102. 管道周游案例

通过一个轨迹线生成一个管道几何体，然后相机沿着该轨迹线移动，注意相机的方向要沿着轨迹线的切线方向，如许会形成一个管道周游的效果。

• 管道几何体TubeGeometry、纹理贴图
  
• 相机对象Camera的.position属性和.lookAt()方法
  

管道模型

课件源码“演示”文件中提前给各人提供了一个管道模型，各人可以在此基础上写代码，生成相机在管道内周游移动的动画。
你可以实验本身利用前面学习过的知识，创建如许一个管道模型，再学习下面相机动画的讲解。

1. // 三维样条曲线
2. const path = new THREE.CatmullRomCurve3([
3.     new THREE.Vector3(-50, 20, 90),
4.     new THREE.Vector3(-10, 40, 40),
5.     new THREE.Vector3(0, 0, 0),
6.     new THREE.Vector3(60, -60, 0),
7.     new THREE.Vector3(90, -40, 60),
8.     new THREE.Vector3(120, 30, 30),
9. ]);
10. // 样条曲线path作为TubeGeometry参数生成管道
11. const geometry = new THREE.TubeGeometry(path, 200, 5, 30);
12. const texLoader = new THREE.TextureLoader();
13. //纹理贴图
14. const texture = texLoader.load('./diffuse.jpg');
15. //UV坐标U方向阵列模式
16. texture.wrapS = THREE.RepeatWrapping;
17. //纹理沿着管道方向阵列(UV坐标U方向)
18. texture.repeat.x = 10;
19. const material = new THREE.MeshLambertMaterial({
20.     map:texture,
21.     side: THREE.DoubleSide, //双面显示看到管道内壁
22. });
23. const mesh = new THREE.Mesh(geometry, material);

复制代码

相机选择

为了模拟人眼观察世界的规律，管道周游选择透视投影相机，而不是正投影相机。
获得活动轨迹上的顶点

通过曲线的.getSpacedPoints()方法可以从轨迹线上匀称的获得一系列顶点坐标数据，然后你可以用这些轨迹线上顶点坐标设置相机位置。

1. // 从曲线上等间距获取一定数量点坐标
2. const pointsArr = path.getSpacedPoints(500);

复制代码

相机放在管道内轨迹线上

相机放在管道内轨迹线上任意一个位置,并控制相机视线和曲线切线重合。

• 曲线当前点pointsArr
  
• 曲线下一个点pointsArr[i + 1]
  

曲线上当前点pointsArr和下一个点pointsArr[i+1]近似模拟当前点曲线切线，两点间距越小，模拟精度越高。
.lookAt()设置相机观察点为当前点pointsArr的下一个点pointsArr[i + 1]，使相机视线和曲线上当前点切线重合。

1. // 从曲线上等间距获取一定数量点坐标
2. const pointsArr = path.getSpacedPoints(500);
3. const i = 100;// 相机位置：曲线上当前点pointsArr[i]camera.position.copy(pointsArr[i]);// 相机观察目的：当前点的下一个点pointsArr[i + 1]camera.lookAt(pointsArr[i + 1]);

复制代码

改变视场角度fov调节渲染效果

你可以比力相机视锥体差别视场角度fov对应的视觉效果。

1. // fov:90度
2. const camera = new THREE.PerspectiveCamera(90, width / height, 1, 3000);

复制代码

1. // fov:30度
2. const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

复制代码

相机控件.target和.lookAt()参数一致

相机控件.target和.lookAt()参数同步，如许你可以旋转相机观察管道内部。

1. const controls = new OrbitControls(camera, renderer.domElement);
2. controls.target.copy(pointsArr[i+1]);
3. controls.update();

复制代码

相机动画完整代码

1. // 从曲线上等间距获取一定数量点坐标
2. const pointsArr = path.getSpacedPoints(500);
3. // 渲染循环let i = 0; //在渲染循环中累加变化function render() {    if (i < pointsArr.length - 1) {        // 相机位置设置在当前点位置        camera.position.copy(pointsArr[i]);        // 曲线上当前点pointsArr[i]和下一个点pointsArr[i+1]近似模拟当前点曲线切线        // 设置相机观察点为当前点的下一个点，相机视线和当前点曲线切线重合        camera.lookAt(pointsArr[i + 1]);        i += 1; //调节速度    } else {        i = 0    }    renderer.render(scene, camera);    requestAnimationFrame(render);}render();

复制代码

渲染方式

可以使用点模型Points渲染，也可以使用网格模型Mesh渲染。 使用网格的话可以实现一个相机在管道内部周游的效果，使用点模式渲染，可以看到一个虫洞特效，当然你也可以从管道几何体获得顶点数据来设置精灵的位置，多少个顶点，多少个精灵模型对象，也可以实现一个虫洞效果。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。