旧版three.js blob动画示例适配新版本的问题求助

报错核心原因：Three.js自r125版本起正式移除了旧版Geometry类，所有内置几何体默认使用BufferGeometry存储顶点数据，原geometry.vertices属性已废弃，因此会返回undefined。

具体适配修改点 #

• 新版顶点数据存储在geometry.attributes.position的Float32Array数组中，每个顶点对应3个连续元素，分别为x、y、z坐标
• 取消旧版verticesNeedUpdate、normalsNeedUpdate标记，直接修改对应属性的needsUpdate字段即可生效

适配后的完整update代码 #

let update = () => {
    let time = performance.now() * 0.00001 * speedSlider.val() * Math.pow(processingSlider.val(), 3),
        spikes = spikesSlider.val() * processingSlider.val();
    // 获取BufferGeometry的顶点位置属性
    const positionAttribute = sphere.geometry.getAttribute('position');
    // 遍历所有顶点，逻辑和旧版完全对齐
    for(let i = 0; i < positionAttribute.count; i++) {
        const p = new THREE.Vector3();
        p.fromBufferAttribute(positionAttribute, i);
        // 原有噪声计算逻辑不需要修改
        p.normalize().multiplyScalar(1 + 0.3 * simplex.noise3D(p.x * spikes, p.y * spikes, p.z * spikes + time));
        // 把计算后的顶点值写回属性
        positionAttribute.setXYZ(i, p.x, p.y, p.z);
    }
    // 标记位置属性需要更新
    positionAttribute.needsUpdate = true;
    // 重新计算法向，标记法向属性需要更新
    sphere.geometry.computeVertexNormals();
    sphere.geometry.getAttribute('normal').needsUpdate = true;
}

额外优化建议 #

如果动画帧率偏低，可以将顶点临时变量p提到循环外部复用，减少重复实例化的开销；性能要求更高的场景可以把噪声计算逻辑迁移到顶点着色器中实现，运行效率会比JS层面修改顶点数据高3-5倍。

内容的提问来源于stack exchange，提问作者Nick