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

Question

我正在使用 Three.js 将置换贴图应用到一个简单的平面。位移应用成功，但光照错误，好像所有法线都保持不变。结果是具有正确形状的表面被照亮，就好像它是平坦的一样。

位移图：

结果：

如何解决此问题以正确更改照明？

以下是相关代码：

// shortened from actual code - please excuse any small typos

var 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);

// ... later
renderer.render(scene, camera)

编辑：当我在材质中设置flatShading: true 时，法线会正确更新，但看起来很糟糕（因为是平面阴影）：

Answer 1

您将必须通过normalMap 和displacementMap。

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

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