Three.js位移贴图无效果：雕刻文字未实现凹陷效果求助

我尝试使用位移贴图雕刻文字，但仅呈现纹理效果，未实现预期的凹陷雕刻效果。以下是我的代码：

const texture = new THREE.TextureLoader().load(root + '/img/textures/map.png')
texture.flipY = false;
var to = scene.getObjectByName('M-Top')
to.material.transparent = true
to.material.map = texture
to.material.displacementMap = texture
to.material.displacementScale = -0.1
to.material.needsUpdate = true

相关素材与效果 #

• 位移贴图：
  
• 当前效果：
  
• 顶点展示：
  
• 添加BumpMap和环境光遮蔽后的效果：
  

问题原因与解决办法 #

1. 模型顶点密度不足
   从顶点展示图能明显看到，模型顶点数量太少。位移贴图是通过移动顶点实现凹凸效果的，顶点密度不够的话，根本无法形成细腻的凹陷雕刻。

• 解决：给模型增加细分，可使用THREE.SubdivisionModifier在代码中处理，或者在建模软件（如Blender）中先给模型添加足够细分后再导出。

2. 位移贴图的通道与参数设置问题
   Three.js默认读取位移贴图的红色通道灰度值计算位移。要确保贴图中文字区域的灰度值足够低（纯黑对应最大位移幅度），同时可调整displacementBias参数来控制基准位移位置，配合displacementScale调整凹陷深度。

• 示例：尝试添加to.material.displacementBias = 0.5;，再微调displacementScale数值。

3. 材质类型不支持位移效果
   像MeshBasicMaterial这类基础材质不支持位移贴图，必须使用MeshStandardMaterial或MeshPhysicalMaterial这类PBR材质，同时场景中需要有光源，才能体现出凹凸的光影变化。

• 解决：替换材质类型，确保使用支持位移的材质，并添加定向光、点光源等合适的光源。

4. 贴图颜色空间错误
   位移贴图属于数据类贴图，不需要应用sRGB颜色空间。如果是Three.js r152及以上版本，需设置texture.colorSpace = THREE.NoColorSpace;，否则颜色空间转换会干扰灰度值的准确性，导致位移效果异常。

内容的提问来源于stack exchange，提问作者Arnaud Coutant