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

时间:2016-09-03 18:23:10

标签: javascript three.js

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

rings

像刻有文字的戒指。

1 个答案:

答案 0 :(得分:2)

我认为更简单的方法是使用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/