Javascript 在three.js中通过置换贴图置换修改的网格

我试图返回并导出被置换贴图置换的网格

着色器正在根据这条线（从 三个.js/src/renders/shaders/ShaderChunk/displacementmap_vertex.glsl）：

这是根据置换贴图置换顶点，并与该顶点的uv坐标混合

我正在尝试创建此网格/几何体，以便以后可以将其导出

我在这里创建了问题的“演示”： 我希望在按下exportSTL时，视口中显示的置换网格向上。然而，我只得到了一架未展开的飞机

我理解为什么会发生这种情况，置换只发生在着色器中，而不是直接置换平面的几何体

我还没有找到three.js提供的方法，到目前为止还没有找到从着色器获得更改的任何方法。 所以我试图用“demo.js”中的一个函数来实现它。 但是，我是WebGL/three.js新手，在重新创建着色器时遇到问题

我发现出口商在处理这些目标，但这些都没有帮助。 阅读后，我尝试了PlaneBuffer几何体，因为它更接近着色器-但这会为我产生相同的结果。 我认为最初试图提出类似的问题，但接受了一个无关的问题

最后，我想画一个HTML画布，然后实时更新纹理（我有这部分工作）。然后，用户可以导出网格以进行3d打印

有没有办法让three.js给我修改后的着色器几何体？ 或者有人能帮我将着色器行翻译成“常规”的Three.js函数吗？ 也许这是获得置换网格的完全错误的方法

更新-示例正在运行

多亏了DeeFisher的例子，我现在可以计算CPU中的位移，正如imerso最初建议的那样。 如果单击now，您将得到一个工作示例。

---

目前，我还不完全理解为什么我必须镜像画布以最终获得正确的位移，但这在最坏的情况下只是一个微小的影响

要在仍然使用着色器进行置换时执行此操作，需要切换到WebGL2并使用变换反馈（谷歌搜索：WebGL2变换反馈）

另一种方法是将纹理读回CPU，并在仅使用CPU替换顶点的同时对其进行扫描（Google搜索：WebGL readPixels）

---

这两种选择都需要一些努力，因此目前没有代码示例。=）

要在仍然使用着色器进行置换时执行此操作，需要切换到WebGL2并使用变换反馈（谷歌搜索：WebGL2变换反馈）

另一种方法是将纹理读回CPU，并在仅使用CPU替换顶点的同时对其进行扫描（Google搜索：WebGL readPixels）

这两种选择都需要一些努力，因此目前没有代码示例。=）

可与THREE.js结合使用，它允许您在应用置换贴图时置换实际网格顶点：

var sphere = BABYLON.Mesh.CreateSphere("Sphere", 64, 10, scene, true);
sphere.applyDisplacementMap(url, minHeight, maxHeight, onSuccess, uvOffset, uvScale)

请参阅正在使用的函数的示例

然后，您可以使用for循环将巴比伦网格数据传输到一个三网格对象中。

可与THREE.js结合使用，并允许您在应用置换贴图时置换实际网格顶点：

var sphere = BABYLON.Mesh.CreateSphere("Sphere", 64, 10, scene, true);
sphere.applyDisplacementMap(url, minHeight, maxHeight, onSuccess, uvOffset, uvScale)

请参阅正在使用的函数的示例

---

然后，您可以使用for循环将巴比伦网格数据传输到一个三网格对象。

感谢您提供的一些提示。我已经开始研究它，但迄今为止没有成功。我想在three.js中完成它，而不用切换到底层的WebGL2。不过，我正试图用您的建议修改three.js GLSL代码。如果我真的做到了，我希望能在某一点将其合并回来。如果你想继续使用WebGL1，就没有办法恢复/保存GPU置换的顶点，所以你唯一的赌注就是读回置换纹理并在CPU中置换顶点——也就是说，你不会使用GLSL进行置换，但至少您可以将CPU中置换的顶点导出到磁盘。在WebGL2中，您有变换反馈，这是一种读取置换顶点的方法，因此您仍然可以使用GLSL进行读取，然后使用变换反馈获得结果，最后导出到磁盘。已接受，因为除了您建议的方法之外，似乎没有其他方法。Three.js dev branch正在开发WebGL2渲染器，但它似乎还没有准备好进入黄金时间。查看WebGl2的反馈似乎是解决问题的好方法。无论如何谢谢你的帮助。谢谢你的指点。我已经开始研究它，但迄今为止没有成功。我想在three.js中完成它，而不用切换到底层的WebGL2。不过，我正试图用您的建议修改three.js GLSL代码。如果我真的做到了，我希望能在某一点将其合并回来。如果你想继续使用WebGL1，就没有办法恢复/保存GPU置换的顶点，所以你唯一的赌注就是读回置换纹理并在CPU中置换顶点——也就是说，你不会使用GLSL进行置换，但至少您可以将CPU中置换的顶点导出到磁盘。在WebGL2中，您有变换反馈，这是一种读取置换顶点的方法，因此您仍然可以使用GLSL进行读取，然后使用变换反馈获得结果，最后导出到磁盘。已接受，因为除了您建议的方法之外，似乎没有其他方法。Three.js dev branch正在开发WebGL2渲染器，但它似乎还没有准备好进入黄金时间。查看WebGl2的反馈似乎是解决问题的好方法。无论如何谢谢你的帮助。我终于有时间来测试这个了。看来Babylon.js（或者至少是你的例子）正在发挥作用