ThreeJS-3D教学三：平移缩放+物体沿轨迹运动

我们在项目中会有一些这样的需求，我们可视化一个场景，需要俯视、平移、缩放，方便观察场景中的数据或者模型，之所以把这个案例拿出来
1、这是个很实用的需求，我相信很多人会用到
2、我自己认为在实际案例中我们可以学习相关知识点更易吸收些
为了丰富本篇文章知识点，我还加入了一个物体沿轨迹运动的场景，下面代码会介绍到，回到之前的问题three中可以利用对 OrbitControls 的设置很轻松的实现相关场景，代码如下：

controls = new OrbitControls( camera, renderer.domElement );
  // 移动端控制平移 缩放
  // controls.touches = {
  //   ONE: THREE.TOUCH.PAN,
  //   TWO: THREE.TOUCH.DOLLY_PAN
  // };
  // PC 左平移，右旋转 滚轮放大缩小   默认是右平移
  controls.mouseButtons = {
    LEFT: THREE.MOUSE.PAN,
    MIDDLE: THREE.MOUSE.DOLLY,
    RIGHT: THREE.MOUSE.ROTATE
  };
  // 设置最大最小视距
  controls.minDistance = 20;
  controls.maxDistance = 1000;
  controls.autoRotate = false;
  controls.enableRotate = false;
  controls.enablePan = true;

需要注意的是移动端和PC是不同的配置，minDistance和maxDistance按实际需求设置即可，到这一步只是对controls的操作，已经有能力实现效果了，但是camera的设置也是不可或缺的，即camera必须是俯视的

先上下整体效果图

看下代码：

这里是全部代码，可以看出 three用的是 155版本，大家从官网上下载到本地改下路径即可。图片url你可以换成本地图片，项目就能跑起来了。

中间立方体在做了一个环绕自身y轴旋转，外面的立方体通过获取curve上的坐标点，沿着curve的轨迹运动。

这里有一些新的知识点：

new THREE.TextureLoader().load(‘…/materials/img/view3.jpg’);
TextureLoader是three加载图片的方法，我们还可以这样用
let loader = new THREE.TextureLoader();
loader.load(‘url’, (img) => {
// img 这个img就是加载完成后的图片
});

这时就一个疑问了，同步还是异步，我们来看源码

其实还是异步，拿到图片后我们发现material有一个map参数，可以接收图片作为材质，这样material就可以做的很丰富了，side是指物体的正反两面，THREE.DoubleSide即两面都要渲染，如果我们只看外面，不要设置这里，这样也能节省一些性能

 let material = new THREE.MeshPhongMaterial({
    map: img,
    flatShading: true,
    side: THREE.DoubleSide,
    transparent: 1
  });

最后一个知识点，即物体沿着轨迹运动，我们把这一行代码
curveObject.visible = false; 改为 true 大家就可以看到这个轨迹了。
逻辑代码中已经写的很详细了，大家也可以思考下还有哪些方法可以作为curve使用。
如果感觉有用，点个赞不过分吧！！！