小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转

在上一篇小程序使用threejs第一篇——安装中，除了说明了threejs在小程序中如何构建，还附带了一个小小的示例——一个旋转的正方体，接下来我们先花一点点时间通过示例代码了解一下发生了什么？且看

代码注释

export function renderExample1(canvas, THREE) {
//threejs中有三个最基本的概念，就是下述camera、 scene、renderer，分别表示相机、场景与渲染器，怎么理解呢？其实就是模仿现实物理世界，就像我们通过相机去拍摄照片一样，需要一个相机，也需要要拍摄的场景，还需要的其实是一种介质或者叫关联，以便计算机能够知道相机看的是哪个场景或者能够看到哪个场景
  var camera, scene, renderer;
  var cube;
  init();
  animate();
  function init() {
  //获取相机对象，PerspectiveCamera表示一种透视照相机；第一个参数表示这个相机的广角，就是能看到的角度；第二个参数表示相机获取到的视野要呈现的长宽比，一般用画布的长宽比就可以呈现原场景比例；第三个参数与第四个参数分别表示远近切面，意思是这个（1~1000）距离之外的场景就不再显示了
    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);
    //接下来我们要创建一个立方体，并把它添加到场景中
    //BoxGeometry是一个几何长方体，通过它可以获取一个立方体对象
    var geometry = new THREE.BoxGeometry(10, 10, 10);
    //MeshBasicMaterial是网状基础材质
    var material = new THREE.MeshBasicMaterial({ color: 0xed3ed3 });
    //组合成一个粉色的立方体
    cube = new THREE.Mesh(geometry, material);
    //添加进场景
    scene.add(cube);
  }
  function animate() {
  	//通过变化下列两个值，来更改立方体状态
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  	//这是通过调用canvas的requestAnimationFrame方法进行周期性渲染，渲染频率在60次每秒，
    canvas.requestAnimationFrame(animate);
    //如果只是要绘制一个静止的立方体，调用renderer渲染就ok了
    renderer.render(scene, camera);
  }
}

注释了一大堆，不知道有没有看乱，其实这个简单的小示例却包含了

threejs的使用逻辑

1、创建相机、场景、渲染器对象
2、创建要渲染的物体，并添加进场景中
3、利用渲染器将场景渲染到相机内

接下来就是让物体自动或手动转动起来，上述示例中则是我们通过代码让立方体自动旋转。那么如何才能跟随手势旋转呢？像这样

效果

体验

这个还是挺难的，因为小程序canvas控制都放组件里面，就算获得canvas对象，打印出来也只是canvas视图（VirtualDOM）的属性，想要给视图绑定方法只能在视图层里面注册（不能在逻辑层里面注册）。试着搞了一下，发现效果并不好，因而可能要自己写一套符合canvas 和 threejs 的手势库，但是本着初学者先用再研究的心继续搜索，发现真的有大神已经完成这些工作了，那用就好了。

下一篇继续…