三.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)

Answer 1

您将不得不通过 anormalMap与您的displacementMap.看这个demo，当normalScale = 0它相当于没有 normalMap 的时候，你可以看到反射不跟随位移，只有默认的地形。但是，当 normalMap 为 1 时，反射确实会考虑位移。您需要生成一个法线贴图。