概括
我正在尝试将置换贴图（高度贴图）应用于一个相当简单的对象（六边形平面），但我得到了一些意想不到的结果。我正在使用灰度，因此，我的印象是我的高度图应该只影响我的网格的 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 的过程中的关键步骤。
当然，秘密选项＃4 以上都不是，我真的不知道我在做什么。或上述的任何混合物。
现场示例
您可以在此处查看实时示例。
如果有对此主题有更多了解的人可以指导我，我将不胜感激！
编辑 1：根据建议，我已经注释掉computeFaceNormals()和computeVertexNormals(). 虽然它确实略有改进，但网格仍在变形。
