摘要
我正在尝试将位移贴图（高度贴图）应用于一个相当简单的对象（六边形平面），但是我遇到了一些意外的结果。我使用灰度，因此我认为我的高度图只应该影响网格的 Z 值。然而，我创建的位移贴图会在 X 和 Y 平面上拉伸网格。此外，它似乎没有使用我创建的 UV 映射，而所有其他纹理都成功应用了。
模型和 UV 映射
这里是 Blender 中我的六边形网格及其对应的 UV 映射的参考图像。
漫反射贴图和位移贴图
这些是我通过 Three.JS 应用于网格的漫反射贴图和位移贴图。
渲染结果
当我没有应用位移贴图渲染平面时，您可以看到六边形平面保持在线条内。然而，当我添加位移贴图时，它明显影响了顶点的 X 和 Y 位置，而不仅仅是影响 Z 值，将平面扩展到远离线条之外。
代码
这是相关的 Three.js 代码：
// Textures
var diffuseTexture = THREE.ImageUtils.loadTexture('diffuse.png', null, loaded);
var displacementTexture = THREE.ImageUtils.loadTexture('displacement.png', null, loaded);
// Terrain Uniform
var terrainShader = THREE.ShaderTerrain["terrain"];
var uniformsTerrain = THREE.UniformsUtils.clone(terrainShader.uniforms);
//uniformsTerrain["tNormal"].value = null;
//uniformsTerrain["uNormalScale"].value = 1;
uniformsTerrain["tDisplacement"].value = displacementTexture;
uniformsTerrain["uDisplacementScale"].value = 1;
uniformsTerrain[ "tDiffuse1" ].value = diffuseTexture;
//uniformsTerrain[ "tDetail" ].value = null;
uniformsTerrain[ "enableDiffuse1" ].value = true;
//uniformsTerrain[ "enableDiffuse2" ].value = true;
//uniformsTerrain[ "enableSpecular" ].value = true;
//uniformsTerrain[ "uDiffuseColor" ].value.setHex(0xcccccc);
//uniformsTerrain[ "uSpecularColor" ].value.setHex(0xff0000);
//uniformsTerrain[ "uAmbientColor" ].value.setHex(0x0000cc);
//uniformsTerrain[ "uShininess" ].value = 3;
//uniformsTerrain[ "uRepeatOverlay" ].value.set(6, 6);
// Terrain Material
var material = new THREE.ShaderMaterial({
uniforms:uniformsTerrain,
vertexShader:terrainShader.vertexShader,
fragmentShader:terrainShader.fragmentShader,
lights:true,
fog:true
});
// Load Tile
var loader = new THREE.JSONLoader();
loader.load('models/hextile.js', function(g) {
//g.computeFaceNormals();
//g.computeVertexNormals();
g.computeTangents();
g.materials[0] = material;
tile = new THREE.Mesh(g, new THREE.MeshFaceMaterial());
scene.add(tile);
});
假设
目前我有三个可能会导致出现问题的原因：
- UV贴图未应用到位于我的置换图上。
- 我的置换图制作错误。
- 在该过程中我可能错过了一个关键步骤，这个步骤将锁定置换到仅Z轴。
当然，还有第四个秘密选项，即没有上述任何一个原因，我只是真的不知道自己在做什么。或者以上原因的混合。
实时示例
您可以查看实时示例 在此。
如果有更多相关知识的人能够指导我，我将非常感激！
编辑1：根据建议，我已经注释掉了 computeFaceNormals() 和 computeVertexNormals()。虽然它确实有所改善，但网格仍然被扭曲。
