三.js 置换贴图不影响光照，只影响顶点

Question

我正在使用 Three.js 将置换贴图应用于一个简单的平面。位移应用成功，但光照错误，好像所有法线都保持不变。结果是具有正确形状的表面被照亮，就好像它是平坦的一样。置换贴图：结果：如何解决此问题以正确更改照明？这是相关的代码：// shortened from actual code - please excuse any small typosvar renderer = new THREE.WebGLRenderer();renderer.setSize(500, 250);var scene = new THREE.Scene();var light = new THREE.DirectionalLight(0xffffff, 1);light.position.set(100, 100, 100);var ambient = new THREE.AmbientLight(0xffffff, 0.2);scene.add(light);scene.add(ambient);var camera = new THREE.PerspectiveCamera(60, 2, 1, 20000);var geometry = new THREE.PlaneBufferGeometry(100, 100, 1000, 1000);geometry.rotateX(-Math.PI / 2);var material = new THREE.MeshPhongMaterial();var textureLoader = new THREE.TextureLoader();var texture = textureLoader.load('circlemap.png');material.displacementScale = 20;material.displacementMap = texture;var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);// ... laterrenderer.render(scene, camera)

Answer 1

您将不得不通过 anormalMap与您的displacementMap.

看这个demo，当normalScale = 0它相当于没有 normalMap 的时候，你可以看到反射不跟随位移，只有默认的地形。但是，当 normalMap 为 1 时，反射确实会考虑位移。

您需要生成一个法线贴图。