带有插入阴影three.js的文本

Question

我需要在three.js中的对象上创建带有插入阴影的文本，如下所示：

像刻有文字的戒指。

Answer 1

我认为更简单的方法是使用normal-map进行雕刻，至少如果文字不必是动态的（here's how you can export a normal-map from blender）。即使它需要是动态的，在画布中动态创建法线贴图可能比为实际创建雕刻几何图形更容易。

另一种选择是实际创建包含雕刻的几何体。为此您可能需要查看ThreeCSG - 库，让您在几何上使用布尔运算符：创建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/