Threejs用下个点方法实现模型沿着轨道行驶

上一文中实现了用模型所在点的切线方式确定模型的朝向，这个章节是对上个章节的补充，用一种更简单的方式实现小车沿着轨道方向移动，如上文前半部分内容，需要创建场景，轨道，加载车的模型，一切就绪。

threejs中有lookAt方法，这个方法不止是针对相机，也可以用于模型让模型对着某个点，因此让小车时刻对着轨迹的方向，只需要获取到小车所在为止的下一个点，并让小车始终把车头对着自己要去的那个点，就可以实现方向的控制。

  if (this.pathIndex === 999) {
        this.pathIndex = 0;
      }else{
        this.pathIndex += 1;
      }
      if (this.agv) {// 判断agv加载完成后，开始不断更新agv的位置
        let beginPoint = this.pathPoints[this.pathIndex]
        this.agv.position.set( beginPoint.x, beginPoint.y, beginPoint.z);//设置新的agv位置
        let endPoint = this.pathPoints[this.pathIndex+1];//获取小车下一个点的位置
        this.agv.lookAt(endPoint);//设置agv的模型朝向为切线的方向
      }

不过需要注意的是，在做循环执行的时候，不能判断小车是否走到最后一个点，因为小车走到最后一个点的时候，下一个点是不存在的，所以应该判断小车是否走到倒数第二个点，当小车走到倒数第二个点的时候就要让点的下标重置。否则会发生数组越界。因此上面要判断等于999就重置为0,

下面是全部的源码：

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls";
import {GLTFLoader} from "three/addons/loaders/GLTFLoader";

let scene;
export default {
  name: "agv-single",
  data() {
    return{
      camera:null,
      cameraCurve:null,
      renderer:null,
      container:null,
      controls:null,
      pathIndex:0,//小车的运动轨迹点索引
      agv:null,
      pathPoints:[],
    }
  },
  methods:{
    initScene(){
      scene = new THREE.Scene();
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(500,500,500);
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(-300,-300,600)
      scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(600,200,600)
      scene.add(directionalLight2);
    },
    initRound(){
      //通过CatmullRomCurve3连接4个点绘制一条曲线，且闭合
      this.cameraCurve = new THREE.CatmullRomCurve3(
          [
            new THREE.Vector3(-300, 40, 200),
            new THREE.Vector3(300, 40, 200),
            new THREE.Vector3(300, 40, -200),
            new THREE.Vector3(-300, 40, -200),
          ],
          true
      );
      //参考路径上取1000个点，每个点上添加蓝色小球
      this.pathPoints = this.cameraCurve.getPoints(1000);
      //绘制一条路径参考线与上面的线重合，方便查看小车的行动轨迹
      const geometry = new THREE.BufferGeometry().setFromPoints(this.pathPoints);
      const material = new THREE.LineBasicMaterial({ color: '#000000', linewidth: 1, });//设置线条的颜色和宽度
      const curveObject = new THREE.Line(geometry, material);
      scene.add(curveObject);

      //在场景中加载一个agv小车，并将agv小车放在曲线的第一个点上
      const loader = new GLTFLoader()
      loader.load("/static/model/agv.gltf", (gltf) => {
        this.agv = gltf.scene;
        this.agv.position.set(this.pathPoints[0].x, this.pathPoints[0].y, this.pathPoints[0].z)   // 模型位置
        this.agv.scale.set(0.1,0.1,0.1)
        scene.add(this.agv)   // 加入场景
      })
    },
    initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#AAAAAA', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度
    },
    initAnimate() {
      //参考路径的索引在1001~0中往复减少以实现小车循环行驶
      if (this.pathIndex === 999) {
        this.pathIndex = 0;
      }else{
        this.pathIndex += 1;
      }
      if (this.agv) {// 判断agv加载完成后，开始不断更新agv的位置
        let beginPoint = this.pathPoints[this.pathIndex]
        this.agv.position.set( beginPoint.x, beginPoint.y, beginPoint.z);//设置新的agv位置
        let endPoint = this.pathPoints[this.pathIndex+1];//获取小车下一个点的位置
        this.agv.lookAt(endPoint);//设置agv的模型朝向为切线的方向
      }
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(scene, this.camera);
    },
    initPage(){
      this.initScene();
      this.initCamera();
      this.initLight();
      this.initRenderer();
      this.initControl();
      this.initRound();
      this.initAnimate();
    }
  },
  mounted() {
    this.initPage()
  }
}
</script>

<style scoped>
#container{
  position: absolute;
  width:100%;
  height:100%;
  overflow: hidden;
}

</style>

效果图如下

模型沿着曲线运动

这里不支持上传视频，我就只能上传个图片了，如果想看动态效果可以私我，我发给你视频，或者需要源码也可以给我私信