小程序使用threejs第一篇——安装

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中究竟发生了什么，以便于初学者有个概念了解，再进行后续学习研究。