3. js displacementMap не влияет на освещение, только на вершины

Question

Я использую 3. 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)

edit: когда я устанавливаю flatShading: true в материале, нормали обновляются правильно, но выглядят плохо (из-за плоского затенения) :

Answer 1

Вам нужно будет сдать normalMap вместе с displacementMap.

См. Эту демонстрацию , когда normalScale = 0 это эквивалент отсутствия normalMap, и вы можете видеть, что отражения не следуют за смещением, только топография по умолчанию. Однако, когда normalMap равен 1, тогда отражения учитывают смещение.

Вам необходимо сгенерировать normalMap.