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

素颜马尾好姑娘i 2022-09-12 14:47 1004阅读 0赞

## 效果图： ##

![在这里插入图片描述][3d2ec765b7b04e52a4e875a9bc9433ff.gif_pic_center]

## 说明： ##

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)
    	}

[3d2ec765b7b04e52a4e875a9bc9433ff.gif_pic_center]: /images/20220828/4525d2b96b8e45e1877e23166ee93b8e.png