threejs---相机沿着自定义轨道移动，实现场景漫游效果

效果图：

说明：

1、本文章只提供轨道生成和相机沿轨道移动的实现方法，不提供效果图的完整代码
2、本文章暂不介绍机器人的渲染、如何跟随相机移动显示，感兴趣的可以自行实现。思路是机器人的位置放在相机N个点位之前，运动原理和相机移动一样。且机器人的lookAt要指向所在位置的前一个点位，否则机器人在转弯时只是生硬平移，头部朝向不会跟随转弯而改变！

1、生成自定义轨道

methods：
	
	createLine(){
		//创建样条曲线，作为运动轨迹
		this.curve = new THREE.CatmullRomCurve3([
          new THREE.Vector3(自定义x, 自定义y, 自定义z),
          new THREE.Vector3(自定义x, 自定义y, 自定义z),
          new THREE.Vector3(自定义x, 自定义y, 自定义z),
          ...
        ])
        const geometry = new THREE.BufferGeometry().setFromPoints(this.curve.getPoints(5000))
        // 材质对象
        var material = new THREE.LineBasicMaterial({
          color: 'red'
        })
        // 线条模型对象
        var line = new THREE.Line(geometry, material)
        this.scene.add(line) // 线条对象添加到场景中
	}

2、让相机沿着轨迹运动

注意！！progress 取值范围为0~1。getPointAt(0)表示曲线起点，getPointAt(1)表示曲线终点

var progress = 0
methods:
	render(){
		requestAnimationFrame(this.render)
		if (progress <= 1 - 0.0004 * 20){
			const point = this.curve.getPointAt(progress) //获取样条曲线指定点坐标，作为相机的位置
			const pointBox = this.curve.getPointAt(progress + 0.0004 * 20) //获取样条曲线指定点坐标
			this.camera.position.set(point.x, point.y + 5, point.z)
			this.camera.lookAt(pointBox.x, pointBox.y + 5, pointBox.z)
			this.controls.position0.set(point.x, point.y + 5, point.z) //非必要，场景有控件时才加上
			this.controls.target.set(pointBox.x, pointBox.y + 5, pointBox.z) //非必要，场景有控件时才加上
			progress += 0.0004
		} else {
			progress = 0
		}
		this.renderer.render(this.scene, this.camera)
	}