书接上文，在解决了canvas后让我们来正式进入ThreeJs部分。这个部分大致分为：

1. ThreeJs的一些基础使用和注意事项
2. gltf模型贴图加载与渲染
3. 控制模型的旋转平移

一 ThreeJs的一些基础使用和注意事项

官方已经出了ThreeJs小程序 WebGL 的适配版本，按照官方的教程操作即可。

https://developers.weixin.qq.com/miniprogram/dev/extended/utils/threejs.html

先安装npm，在项目目录下执行

npm init 
npm install --save threejs-miniprogram

后续按照官方教程操作，接着我们来使用ThreeJs来创建一个小球场景。

let THREE = createScopedThreejs(canvas);
let renderer, scene, camera;
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1);
camera = new THREE.PerspectiveCamera(43, 1, 0.01, 1000);
scene = new THREE.Scene();
let geometry = new THREE.SphereGeometry(0.1, 32, 32);
let material = new THREE.MeshPhongMaterial({ color: 0xffff00 });
let sphere = new THREE.Mesh(geometry, material);
sphere.position.set(0, 0, -1);
scene.add(sphere);
let directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
let light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
renderer.render(scene, camera);

​

也许有人会注意到我在创建renderer的时候没有指定canvas，这里不用担心，因为微信里并不支持dom操作，不指定canvas不会生成一个新的canvas，而是会自动获得已创建的canvas。

在第一回最后我提到过最后初始画布大小和调整后的的画布大小差别不宜过大，接下来我们来看看为什么，首先我们将初始大小设为10*10 然后修改为300*300看看效果

​

通过打印ctx发现其drawingBuffer尺寸还是10*10，且在开发工具上这是个只读属性。

最后我们来说说这个渲染效果的问题，首先把渲染的画面在放大点，在真机上你看这个球它又大又圆，在真机上你看着球的边它又毛又乱。

​

​

这里一般的处理就是开启抗锯齿但是效果不佳，在百度大神的帮助发现setPixelRatio可以较好的解决这个问题。

wx.getSystemInfo({
  success: function (res) {
    renderer.setPixelRatio(res.devicePixelRatio);
  }
})

获取系统的devicePixelRatio传递给renderer，在真机上就可以看到较好的抗锯齿效果了。

​