我需要在 Three.js 中的对象上创建带有插入阴影的文本，如下所示:
类似刻有文字的戒指。
最佳答案
我认为更简单的方法是使用 normal-map对于雕刻，至少如果文本不必是动态的( here's how you can export a normal-map from blender )。即使它需要是动态的，在 Canvas 中动态创建法线贴图可能比实际创建雕刻几何体更容易。
另一种选择是实际创建包含雕刻的几何体。为此，您可能需要查看 ThreeCSG -库，让您可以在几何图形上使用 bool 运算符:您创建 3D 文本网格，将其扭曲并与环的曲率对齐，最后从环网格中减去它。这将为您提供没有雕刻的戒指。
事实上，我很好奇这实际上是如何实现的，并在这里实现了非常类似的东西:https://usefulthink.github.io/three-text-warp-csg/ (source here)。 本质上，这是使用 ThreeCSG 从圆柱体几何图形中减去文本几何图形，如下所示:
const textBSP = new ThreeBSP(textGeometry);
const cylinderBSP = new ThreeBSP(cylinderGeometry);
const resultGeometry = cylinderBSP.subtract(textBSP).toGeometry();
scene.add(new THREE.Mesh(resultGeometry, new THREE.MeshStandardMaterial());
事实证明，由 ThreeCSG 创建的曲面分割非常慢(我必须将其移至工作线程中，这样页面才不会卡住近 10 秒)。现在看起来不太好，因为计算法线仍然存在问题，我还没有弄清楚。
第三种选择是结合使用置换贴图和法线贴图。 这在处理中会更容易、更快，但您需要添加大量顶点，以便在您想要发生位移的地方提供可用的顶点。这是 mrdoob 的一小段代码，可以帮助您根据位移创建法线贴图:http://mrdoob.com/lab/javascript/height2normal/
关于javascript - 带有插入阴影的文本 Three.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39310082/