Three.js高度图平面位移失效问题求助

问题排查与解决方法 #

1. 修复代码明显错误
   动画循环里的planeMesh.wireframe = options.wireframe;是错误的，wireframe是材质属性，应改为：

   planeMesh.material.wireframe = options.wireframe;
   

   该错误会导致材质配置异常，可能间接影响位移效果。

2. 验证位移贴图有效性

   • 确认贴图加载成功：在控制台打印displacementMap，检查isTexture为true且image属性存在。本地开发需用本地服务器（如npx serve）避免跨域加载失败。
   • 确保高度图为灰度图：Three.js取位移贴图的红色通道值计算位移，彩色图可能导致位移不明显或异常，若当前高度图为彩色，需转为灰度图后测试。

3. 调整位移参数
   当前displacementScale = 20可能过大，导致平面超出相机视野，先缩小到5左右测试，同时可添加displacementBias调整基准位置：

   new THREE.MeshPhongMaterial({
     // ...其他属性
     displacementScale: 5,
     displacementBias: -2.5,
   })
   

4. 配置贴图UV映射
   确保位移贴图和颜色贴图的UV设置一致，避免采样异常：

   displacementMap.wrapS = displacementMap.wrapT = THREE.RepeatWrapping;
   displacementMap.repeat.set(1, 1);
   map.wrapS = map.wrapT = THREE.RepeatWrapping;
   map.repeat.set(1, 1);
   

5. 调试技巧
   开启材质的wireframe模式，直观查看顶点位移情况。如果线框仍平整，说明位移贴图未生效，重点排查贴图加载和材质配置。

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