Three.js 小程序 WebGL 的适配版本(threejs-miniprogram)已经发布很久了,我也好奇了很久,终于有时间去学习研究一下,不对的地方欢迎指正。
(一)构建方法(2种)
第一种:官方提供的安装方法是通过npm安装构建,如下:
1、通过 npm 安装
npm install --save threejs-miniprogram
安装完成之后在微信开发者工具中点击构建 npm。
2、导入小程序适配版本的 Three.js
import {createScopedThreejs} from 'threejs-miniprogram'
Page({
onReady() {
wx.createSelectorQuery()
.select('#webgl')
.node()
.exec((res) => {
const canvas = res[0].node
// 创建一个与 canvas 绑定的 three.js
const THREE = createScopedThreejs(canvas)
// 传递并使用 THREE 变量
})
}
})
<canvas
type="webgl"
id="webgl"
style="width: 100%; height: 450px;"
></canvas>
第二种:本人一向喜欢复制粘贴,可将threejs-miniprogram
直接复制进项目中指定位置,如下:
再依照上述步骤2导入,这时候就构建成功了,是不是很简单。
(二)测试示例
构建成功后测试效果:
1、导入测试实例example.js
const { renderExample1 } = require('../threejsCases/example1')
2、调用renderExample1
中方法
renderExample1(canvas,THREE)
example1的代码如下:
export function renderExample1(canvas, THREE) {
var camera, scene, renderer;
var cube;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(100, canvas.width / canvas.height, 1, 1000);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
renderer.setSize(canvas.width, canvas.height);
var geometry = new THREE.BoxGeometry(10, 10, 10);
var material = new THREE.MeshBasicMaterial({ color: 0xed3ed3 });
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 20;
}
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
canvas.requestAnimationFrame(animate);
renderer.render(scene, camera);
}
}
接下来就可以看到一个粉红色正方体在旋转了,如图:
(三)测试示例
threejs效果体验
下一篇我们将花一点点时间了解一下example1.js中究竟发生了什么,以便于初学者有个概念了解,再进行后续学习研究。