管道漫游动画案例

在Three.js中，实现相机沿着特定轨迹线（如管道）移动的动画效果是一种常见的技术应用。这种效果可以通过生成一个管道几何体，并让相机沿着该轨迹线移动来实现。下面，我们将详细介绍如何创建这样的效果，并提供一些改进和更详细的代码示例。

管道模型的创建

首先，我们需要创建一个管道模型。这可以通过使用Three.js中的TubeGeometry类来实现。我们还需要为管道添加纹理贴图，以增强视觉效果。

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建三维样条曲线
const path = new THREE.CatmullRomCurve3([
    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(90, -40, 60),
    new THREE.Vector3(120, 30, 30),
]);

// 样条曲线path作为TubeGeometry参数生成管道
const geometry = new THREE.TubeGeometry(path, 200, 5, 30, false, false);

// 创建纹理贴图
const texLoader = new THREE.TextureLoader();
const texture = texLoader.load('path/to/diffuse.jpg');

// 设置纹理的UV坐标
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = 10;

// 创建材质
const material = new THREE.MeshLambertMaterial({
    map: texture,
    side: THREE.DoubleSide, // 双面显示
});

// 创建管道模型
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

相机动画的实现

为了让相机沿着管道移动，我们需要设置相机的位置和观察目标。我们可以通过曲线的.getSpacedPoints()方法获取轨迹线上的顶点，并将相机位置设置为这些顶点。

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

// 渲染循环
let i = 0; // 在渲染循环中累加变化
function render() {
    if (i < pointsArr.length - 1) {
        // 相机位置设置在当前点位置
        camera.position.copy(pointsArr[i]);
        // 设置相机观察点为当前点的下一个点，使相机视线和曲线上当前点切线重合
        camera.lookAt(pointsArr[i + 1]);
        i += 1; // 调节速度
    } else {
        i = 0;
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();

视场角度的调整

相机的视场角度（fov）对视觉效果有显著影响。你可以通过调整fov来改变渲染效果。

// 90度视场角度
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 3000);

// 30度视场角度
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);

相机控件的同步

如果你使用相机控件（如OrbitControls），确保.target和.lookAt()参数一致，这样你可以旋转相机观察管道内部。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

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

完整的相机动画代码

将上述代码片段整合到一个完整的示例中：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建三维样条曲线
const path = new THREE.CatmullRomCurve3([
    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(90, -40, 60),
    new THREE.Vector3(120, 30, 30),
]);

// 样条曲线path作为TubeGeometry参数生成管道
const geometry = new THREE.TubeGeometry(path, 200, 5, 30, false, false);

// 创建纹理贴图
const texLoader = new THREE.TextureLoader();
const texture = texLoader.load('path/to/diffuse.jpg');

// 设置纹理的UV坐标
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = 10;

// 创建材质
const material = new THREE.MeshLambertMaterial({
    map: texture,
    side: THREE.DoubleSide, // 双面显示
});

// 创建管道模型
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 创建相机控件
const controls = new OrbitControls(camera, renderer.domElement);

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

// 渲染循环
let i = 0; // 在渲染循环中累加变化
function render() {
    if (i < pointsArr.length - 1) {
        // 相机位置设置在当前点位置
        camera.position.copy(pointsArr[i]);
        // 设置相机观察点为当前点的下一个点，使相机视线和曲线上当前点切线重合
        camera.lookAt(pointsArr[i + 1]);
        controls.target.copy(pointsArr[i + 1]);
        controls.update();
        i += 1; // 调节速度
    } else {
        i = 0;
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();