【Threejs 微信小程序】小程序加载外部模型后对模型进行平移旋转操作

一、效果展示

需要实现的功能，对已经加载进小程序里的模型进行沿着xyz轴方向去旋转和平移。

如下图的效果：点击底部的按钮，对模型进行平移和旋转操作。

二、方法描述

关于平移和旋转的方法
比如沿着 Y 轴平移，就是 translateY，
沿着 Z 轴平移，就是 translateZ,
沿着 X 轴平移，就是 translateX

绕着 Y 轴旋转，就是 rotateY,
绕着 Z 轴旋转，就是 rotateZ,
绕着 X 轴旋转，就是 rotateX,

而我们要做到整个视觉上整个模型都在平移和旋转，就需要对摄像机进行平移和旋转操作。

三、步骤概述
（1）在加载完模型的基础上，将摄像机放入一三维物体里，对此三维物体进行平移和旋转。不直接操作摄像机的原因是，我们最终要将视角复位到没有旋转前的操作。（点击查看上一篇如何加载外 3d加载模型）

//设置相机let camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.25, 100);camera.position.set(0, 4, 15);camera.lookAt(new THREE.Vector3(0, 0, 0));scene = new THREE.Scene();//将相机放一个三维物体里let camera_parent = new THREE.Object3D(); camera_parent.position.set(0, 0, 0);camera_parent.add(camera);scene.add(camera_parent);

（2）平移和旋转的操作
用一变量存平移了多少，此变量用于最后复位时。使用 translateY 方法，将放摄像机的三维物体进行上下平移。
再用一变量存旋转了多少，此变量用于最后复位时。使用 rotateX 方法，将放摄像机的三维物体进行上下旋转。
注意：得保证模型的 z 轴是垂直于屏幕， x 和 y 轴是平行于屏幕且垂直于 z 轴，，才能做到，上下左右移动和上下左右旋转，否则就会偏斜。

// 查看 xyz 轴的标线var axes = new THREE.AxisHelper(30);scene.add(axes);

 // 单击 上下平移translateUpDown: function (event) {var type = event.currentTarget.dataset.index;if (type == "0") {camera_parent.translateY(-1);//沿着y轴正方向平移tranAngleUpDown = tranAngleUpDown + 1;} else {camera_parent.translateY(1);//沿着y轴反方向平移tranAngleUpDown = tranAngleUpDown - 1;}},

//单击 上下旋转rotateUpDown: function (event) {var type = event.currentTarget.dataset.index;if (type == "0") {camera_parent.rotateY((5 / 180) * Math.PI); //向上旋转angleUpDown = angleUpDown - (5 / 180) * Math.PI;} else {camera_parent.rotateX(-(5 / 180) * Math.PI); //向下旋转angleUpDown = angleUpDown + (5 / 180) * Math.PI;}},

其中包括长按进行连续旋转，连续平移

// 长按连续旋转rotateAnimate: function (event) {this.setData({iconShow: 1})let that = this;var type = event.currentTarget.dataset.index;if (type == "0") {camera_parent.rotateY((5 / 180) * Math.PI); //向左旋转angle = angle - (5 / 180) * Math.PI;} else {camera_parent.rotateY(-(5 / 180) * Math.PI); //向右旋转angle = angle + (5 / 180) * Math.PI;}let timerAnimate = setTimeout(function () {that.rotateAnimate(event);}, 100)//触摸停止，清除if (that.data.touchEnd == 0) {clearTimeout(timerAnimate);}},

完整代码可上GitHub查看：点击这里
或者CSDN积分下载：点击这里