Как работают тени в THREE.js r75?

Question

Я работаю над учебником для Three.js, и в примере он представляет концепции теней, которые могут быть использованы с помощью таких методов, как castShadow, receiveShadow и установки shadowMapenabled в true.

Однако примерный код для Three.js r69. На дату этого вопроса Three.js находится на r75, и этот код для каста теней не работает.

Кроме того, настоящая документация Three.js не содержит информации о shadowMapenabled или shadowMap.enabled или других упомянутых методах.

Предложения о том, как разрешить это?

Answer 1

Некоторые свойства свойств теней были переименованы в последние версии, но в основном они работают одинаково.

Настройка визуализации для теневых карт (и выбор больше вычислений типа дорогой карты тени):

var renderer = new THREE.WebGLRenderer(); 
renderer.shadowMap.enabled = true; 
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap 

Настройка света (обратите внимание, как он работает с THREE.PointLight):

var light = new THREE.PointLight(0xffffff, 1, 100); 
light.position.set(0, 12, 0); 
light.castShadow = true;   // default false 
light.shadow.mapSize.width = 1024; // default 512 
light.shadow.mapSize.height = 1024; // default 512 
light.shadow.camera.near = 2;  // default 0.5 
light.shadow.camera.far = 100;  // default 500 
//light.shadow.camera.left = 500 // Not sure about this one + 
            // right, top and bottom, Do they still do anything? 
scene.add(light); 

Вы получаете уведомление обо всех этих изменениях API, если вы проверяете консоль при попытке использовать свойства, указанные в текущем документе.

Создание вам объектов, приведение типов и получает тени такой же, как и раньше:

//Creating box 
var boxGeometry = new THREE.BoxGeometry(1, 1, 1); 
var boxMaterial = new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x999999, shininess: 15, shading: THREE.FlatShading }); 
var box = new THREE.Mesh(boxGeometry, boxMaterial); 
box.castShadow = true; 
scene.add(box); 

creating plane 
var planeGeometry = new THREE.PlaneGeometry(20, 20, 32, 32); 
var planeMaterial = new THREE.MeshPhongMaterial({ color: 0x00dddd, specular: 0x009900, shininess: 10, shading: THREE.FlatShading }) 
var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
plane.receiveShadow = true; 
scene.add(plane); 

Размещение самолета под коробкой и он получит тень.

Вот рабочая codepen example

EDIT В текущей версии three.js, сцена должна быть оказана, по крайней мере в два раза для теней, чтобы показать.

THREE.js r75.

Answer 2

Вот простой код для тени в three.js .Также включены камеры помощник теневую var light = new THREE.SpotLight(0xFFAA55); light.castShadow = true; light.position.set(1, 3, 5); light.shadowCameraNear = 0.5; scene.add(light); helper = new THREE.CameraHelper(light.shadow.camera); scene.add(helper);

code