THRE.js根据mp3中的数据突变平面的顶点

Question

所以我被卡住了一段时间，因为我一直在根据mp3的频率数据动态更改一个地方几何体中顶点的形状，我遇到了两个主要问题：

1( mp3生成的数组有太多的值，不可能那么快地渲染出顶点，因此，我用这个代码获取频率数据。

var frequencyData = new Uint8Array(analyser.frequencyBinCount);

2( 每次频率都重新渲染平面数据变化会导致极端的性能问题，以至于无法再渲染

我一直在使用单纯形噪声来使顶点变形，它确实有效，直到很明显我传入频率数据，所有东西都断了，这是我试图根据音乐变形平面顶点的代码。

function adjustVertices() {
for (var i = 0; i < 100; i++) {
for (var j = 0; j < 100; j++) {
var ex = 0.5;
pgeom.vertices[i + j * 100].z =
(noise.simplex2(i / 100, j / 100) +
noise.simplex2((i + 500) / 50, j / 50) * Math.pow(ex, frequencyData[2]) +
noise.simplex2((i + 400) / 25, j / 25) * Math.pow(ex, frequencyData[2]) +
noise.simplex2((i + 600) / 12.5, j / 12.5) * Math.pow(ex, frequencyData[2]) +
+(noise.simplex2((i + 800) / 6.25, j / 6.25) * Math.pow(ex, frequencyData[2]))) /
2;
pgeom.verticesNeedUpdate = true;
pgeom.computeVertexNormals();
}
}
}

这是我的飞机对象：

var pgeom = new THREE.PlaneGeometry(5, 5, 99, 99);
var plane = THREE.SceneUtils.createMultiMaterialObject(pgeom, [
new THREE.MeshPhongMaterial({
color: 0x33ff33,
specular: 0x773300,
side: THREE.DoubleSide,
shading: THREE.FlatShading,
shininess: 3,
}),
]);

scene.add(plane);

我非常感谢你的帮助，我只是在尽我所能掌握三个。js:(

Answer 1

我会检查computeVertexNormals是否是渲染循环中花费最多时间的部分，然后如果您仍然需要，请考虑对其进行优化。

您可以通过在启动时构建一次网格拓扑来优化正常计算，因为它在运行时不会更改，从而使recalc在恒定时间内运行。

然后减少顶点数，直到事情变得可控。：(

Answer 2

第一个答案是正确的。最有可能是计算顶点法线导致了命中，而且最有可能发生这种情况是因为您似乎正在使用的Geometry方法创建了大量new THREE.Vector3。如果你对此进行分析，我想你会看到很多GC活动，而不是那么多计算时间。

由于只映射一个变量，因此需要考虑的另一件事是在着色器中移动此计算。你可以将你的值写入一个纹理，然后只更新它。您不必刷新顶点和法线缓冲区，因为它们比仅存储输入变量所需的纹理大得多。您还可以并行地进行此计算。