效果图:
说明:
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)
}