一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

一、效果展示

需要实现的功能，对已经加载进小程序里的模型进行沿着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 轴的标线

//  查看 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);
    }

  },

完毕~

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

一、效果展示

二、方法描述

三、步骤概述