three.js视角沿着管道移动

<template>

</template>
<script>
import * as THREE from 'three';
import * as dat from 'dat.gui';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import pic from '../assets/diffuse.jpg';


//创建场景
const scene = new THREE.Scene();
//创建元素
const geometry = new THREE.SphereGeometry(50);




//三维样条曲线
const arr = [
    new THREE.Vector3(-50, 20, 90),
    new THREE.Vector3(-10, 40, 40),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(60, -60, 0),
    new THREE.Vector3(70, 0, 80)
];
//使用CatmullRomCurve3形成一条三维样条曲线（画一条线）
const curue=new THREE.CatmullRomCurve3(arr);
//根据上面生成的曲线生成管道
const geometry1=new THREE.TubeGeometry(curue, 200, 5, 60);
//实例化一个TextureLoader用来引入纹理贴图
const texLoader = new THREE.TextureLoader(); 
const texture = texLoader.load(pic);//纹理贴图
texture.wrapS = THREE.RepeatWrapping;//UV坐标U方向阵列模式
texture.repeat.x = 10;//纹理沿着管道方向阵列(UV坐标U方向)
const material1 = new THREE.MeshLambertMaterial({
    map:texture,
    side: THREE.DoubleSide, //双面显示看到管道内壁
});
// 线模型
const line = new THREE.Mesh(geometry1, material1);
const pointsArr=curue.getSpacedPoints(500);
scene.add(line);






//网格模型
// const mesh = new THREE.Mesh(geometry, material);
// mesh.position.set(0, 0, 0);
// scene.add(mesh);

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);











//创建点光源对象
const pointLight = new THREE.PointLight(0xffffff, 1.0);
pointLight.decay = 0.0;//不衰减
//光源位置
pointLight.position.set(200, 200, 200);
scene.add(pointLight);

const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 3000);

// camera.position.set(300, 300, 300);
// camera.lookAt(0, 0, 0);
const i = 100;
// 相机位置设置在当前点位置
camera.position.copy(pointsArr[i]);
// 曲线上当前点pointsArr[i]和下一个点pointsArr[i+1]近似模拟当前点曲线切线
// 设置相机观察点为当前点的下一个点，相机视线和当前点曲线切线重合
camera.lookAt(pointsArr[i + 1]);

//创建渲染
const renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
//视角控件
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(pointsArr[i+1]);
controls.update();

// renderer.outputEncoding=THREE.SRGBColorSpace;


let a=0;
//循环渲染
function render() {
    // mesh.rotateY(0.01);
    // mesh1.rotateY(0.01);
    if(a<pointsArr.length-1){
        camera.position.copy(pointsArr[a]);
        camera.lookAt(pointsArr[a+1])
        a+=1;
    }else{
        a=0;
        console.log('重置a',a);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
};
render();



document.body.appendChild(renderer.domElement);


</script>