threejs 人体模型实现血液流动效果

### 使用 Three.js 实现人体模型中的血液流动动画

#### 创建基础场景
为了实现人体模型中的血液流动效果，首先需要设置一个基本的 Three.js 场景。这包括初始化渲染器、相机和场景对象。

// 初始化场景
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({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

#### 加载人体模型
接下来加载一个人体模型文件（例如 `.obj` 或者 `.gltf`），并将其放置在场景中。这里假设已经有一个适合的人体血管结构模型可用。

const loader = new THREE.GLTFLoader();

loader.load('path/to/human_body.gltf', function (gltf) {
    const model = gltf.scene;
    scene.add(model);
}, undefined, function (error) {
    console.error(error);
});

#### 构建血流路径
定义一条或多条代表血液流动路线的曲线。这些曲线应该沿着实际解剖学上的动脉或静脉走向设计。可以使用 `THREE.CatmullRomCurve3` 来构建平滑连续的路径[^1]。

const points = [];
points.push(new THREE.Vector3(-1, 2, 0));
points.push(new THREE.Vector3(0, 5, 0));
points.push(new THREE.Vector3(1, 2, 0));

const curve = new THREE.CatmullRomCurve3(points);

#### 添加粒子系统表示血液细胞
利用 `THREE.Points` 和自定义材质来创建大量微小颗粒，模拟红白细胞等成分，在上述曲线上移动形成流动感。

let geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(50));
geometry = new THREE.Geometry().fromBufferGeometry(geometry); // 转换为旧版几何体以便后续操作

for (var i = 0; i < 1000; ++i){
    var vertex = new THREE.Vector3();
    geometry.vertices.push(vertex);
}

const material = new THREE.PointsMaterial({
    size: 0.05,
    color: 'red',
});

const particles = new THREE.Points(geometry, material);
scene.add(particles);

#### 动态更新位置以模仿流动过程
最后一步是在每一帧内调整每个粒子的位置参数，让它们沿预设轨迹前进一定距离，从而达到逼真的血液循环现象。

function updateParticles(deltaTime) {
    for (let i = 0; i < particles.geometry.vertices.length; i++) {
        let p = particles.geometry.vertices[i];
        
        if (!p.targetPosition || !p.progress) {
            p.targetPosition = curve.getPointAt(Math.random());
            p.progress = Math.random();    
        }

        p.lerpVectors(p, p.targetPosition, deltaTime * 0.1);
        if ((p.x === p.targetPosition.x && p.y === p.targetPosition.y && p.z === p.targetPosition.z)) { 
            p.targetPosition = null;
            p.progress = null;
        }
    }
    particles.geometry.verticesNeedUpdate = true;
}

// 修改动画函数
function animate() {
    requestAnimationFrame(animate);
    updateParticles(clock.getDelta()); // clock 是之前实例化的 TWEEN.Clock 对象
    
    renderer.render(scene, camera);
}