在three.js中设置大网格动画的策略？

我对three.js比较陌生，但不是OpenGL（虽然已经有一段时间了：-）。为了熟悉three.js，我正在以自己的方式通过一系列示例来学习。我决定移植一些NeHe演示。大多数都很简单（尽管有教育意义）。然而，演示11实质上是创建一个大型（45x45）GL_四边形网格（在旧OpenGL中），并将纹理映射到每组顶点。然后在每个动画帧上，更改网格的Z值并重新创建网格以使其产生涟漪

OpenGL 1中的P>用C++或java编写，没有什么大不了的。只需重新创建顶点和纹理贴图即可。在three.js中，编码（将每组顶点更改为一对三角形面）非常简单，但性能非常糟糕

---

我在three.js网站（）上看到了Wanging cloth的演示，看起来它直接使用着色器来完成工作。所以我的问题是，我是否遗漏了一些东西（比如有一种有效的方法可以在不降低着色器级别的情况下完成这项工作）或者是时候让我学习更多关于着色器的知识了？

这种情况下的答案是，我可以用参数几何解决我的问题，因为形状及其变化非常简单。更复杂的曲面（如真实的3D地形）可能需要学习着色器。听起来很有趣，但我想我会在跑步前步行

---

更新：使用ParameterGeometry可以工作，速度更快，但性能仍然很差。因此，我将研究其他解决方案，例如下降到着色器级别。

是的，您应该使用着色器

如果它不需要从代码中完全动态，但是可以使用预先制作的数据，使用变形目标和已经存在的着色器来显示这些数据，我认为效果会很好

---

但是对于一个完全动态的东西，比如你可以扔石头的水，我想你需要你自己的（类似的）着色器。希望例子足够简单，如果可以的话，请在完成后分享：）

我为你准备的js动态顶点更新

它在我的机器上运行得很好。。。这与您尝试实现的类似吗

完全在GPU上构建地形是可行的，但相当复杂，对于大多数涉及地形的情况，您仍然需要在CPU端使用实际网格与之交互/执行碰撞等。因此，您最终将实现GPU和CPU版本

另一种方法是在CPU上生成几何体，如本例所示，但随后使用自定义着色器仅基于网格中的信息执行纹理和照明

var renderer=new THREE.WebGLRenderer（）；
var w=300；
var h=200；
渲染器。设置大小（w，h）；
document.body.appendChild（renderer.doElement）；
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机(
45，//视野
宽高比，宽高比
0.1，//接近
10000/远
);
摄像机。位置。设置（15，10，15）；
摄像机。注视（场景。位置）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
var灯=新的三点灯（0x8080）；
光。位置。设置（20，20，20）；
场景。添加（灯光）；
var light1=新的三个环境光（0x8080）；
灯1.位置.设置（20,20,20）；
场景。添加（light1）；
var light2=新的三点光源（0x800000）；
light2.位置设置（-20,20，-20）；
场景。添加（light2）；
var light3=新的三点光源（0x0000FF）；
灯塔3.位置。设置（-20，-20，-20）；
场景。添加（light3）；
var材质=新的3.0网格材质({
颜色：0x8080
});
var planeGeom=新的三个平面几何体（10,10,45,45）；
var网格=新的三个网格（planeGeom，material）；
场景。添加（网格）；
渲染器.setClearColor（0xDDDD，1）；
（函数animate（）{
var t0=performance.now（）*0.01；
var t1=t0*0.7；
请求动画帧（动画）；
控件更新（）；
var sinm=（v，m）=>{
返回数学sin（v）*m
}
var noisefn=（x，y）=>{
返回sinm（（x*0.2）+（y*0.7）+t0，1）+sinm（（x*0.9）+（y*1.2）+t1，0.3）+sinm（（x*0.9）+（y*2.2）+t1，0.4）
}
对于（变量i=0；i
我做了更多的工作，创建了这个。效果很好。