Three.js 3.js根据mp3中的数据对平面顶点进行变异

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

1） mp3生成的数组有太多的值，不可能快速渲染出顶点，因此，我用这段代码获得频率数据

var frequencyData = new Uint8Array(analyser.frequencyBinCount);

2） 每次frequencyData更改时重新渲染平面都会导致严重的性能问题，以至于无法再渲染

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

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();
          }
      }

  }

---

我非常感谢您的帮助，我正在尽全力掌握three.js:）

我会检查computeVertexNormals是否是渲染循环中花费时间最多的部分，如果您仍然需要的话，然后研究优化它

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

---

然后减少顶点计数，直到事情变得可管理为止。：）

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

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

---

然后减少顶点计数，直到事情变得可管理为止。：）

第一个答案是正确的。最有可能的是计算顶点法线导致了命中，这很可能是因为您似乎正在使用的

几何体

方法创建了大量新的

三矢量。如果你对此进行分析，我想你会看到大量的GC活动，而不会有太多的计算时间

<> P>一个更值得考虑的事情，因为你只映射一个变量，就是在着色器中移动这个计算。您可以将值写入纹理并仅更新该纹理。您不必刷新顶点和法线缓冲区，它们比仅存储输入变量所需的纹理大得多。您还可以并行执行此计算
 第一个答案是正确的。最有可能的是计算顶点法线导致了命中，这很可能是因为您似乎正在使用的
几何体
方法创建了大量新的
三矢量。如果你对此进行分析，我想你会看到大量的GC活动，而不会有太多的计算时间

<> P>一个更值得考虑的事情，因为你只映射一个变量，就是在着色器中移动这个计算。您可以将值写入纹理并仅更新该纹理。您不必刷新顶点和法线缓冲区，它们比仅存储输入变量所需的纹理大得多。您还可以并行执行此计算
 我不熟悉3.SceneUtils.createMultiMaterialObject。。好的，你可以将材质数组传递到网格构造函数中。。。所以：平面=新的三点网格（pgeom，[new THREE.MeshPhong..Multimaterial object有什么特别的功能吗？很抱歉，最初我打算使用multi material object添加多个材质，但是我做了一些研究，发现它已被删除，现在可以在材质数组中传递多个材质，所以我将对其进行更新。我打赌computeVertexNormals计算是在该设置中减慢速度的原因。这是一个相对昂贵的操作，因为三个必须首先计算面法线，然后通过累加共享顶点的所有面法线来计算顶点法线。但这只是一个猜测。瓶颈可能在其他地方。我必须看到一些运行的代码以获得更好的idea、 我不熟悉THREE.SceneUtils.createMultiMaterialObject..afaik可以将材质数组传递到网格构造函数中…因此：plane=new THREE.mesh（pgeom，[new THREE.MeshPhong..Multimaterial object有什么特别的功能吗？很抱歉，最初我打算使用multi material object添加多个材质，但是我做了一些研究，发现它已被删除，现在可以在材质数组中传递多个材质，所以我将对其进行更新。我打赌computeVertexNormals计算是在该设置中减慢速度的原因。这是一个相对昂贵的操作，因为三个必须首先计算面法线，然后通过累加共享顶点的所有面法线来计算顶点法线。但这只是一个猜测。瓶颈可能在其他地方。我必须看到一些运行的代码以获得更好的idea、 是的。我考虑过这一点，但是OP也必须在着色器中进行法线生成…如果你没有一个直接的函数来获得导数，这可能会很棘手。但是你在computeVertexNormals中的内存方面是对的。预分配共享每个顶点的面列表并减少正常生成到几个常量查找，添加，每个顶点1个规格化，没有分配。是的。我考虑过这一点，但是OP也必须在着色器中进行正常生成…如果你没有一个直接的函数来获得导数，这可能会很棘手。但是关于computeVertexNormals中的内存，你是对的。是吗预分配共享每个顶点的面列表相对简单，并将法线生成减少为几个常量查找，每个顶点添加和1个规格化，无需分配。
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);