THREE.JS Işığın karşı tarafındaki gölge

Question

THREE.js r49'u, üzerinde gölge bırakmak için bir yön ışığıyla 2 küp geometri oluşturdum ve aşağıdaki resimde gösterildiği gibi sonuç aldım.

Yönlü ışık küpün her ikisinin de arkasında olduğundan yeşil çemberdeki gölgenin görünmemesi gerektiğini fark ettim. Bunun maddi bir konu olduğunu düşünüyorum, çeşitli malzeme parametrelerini değiştirmeyi ve malzeme tipini değiştirmeyi denedim, ancak sonuç hala aynı. Aynı kodu r50 ve r51 ile de test ettim ve aynı sonucu aldım.

Bu gölgeden nasıl kurtulacağına dair bana biraz ipucu verebilir misiniz?

Her iki küp kodu aşağıdaki gibidir CubeGeometry ve MeshLambertMaterial kullanılarak yaratmaktadır.

kodu:

// ambient 
var light = new THREE.AmbientLight(0xcccccc); 
scene.add(light); 

// the large cube 
var p_geometry = new THREE.CubeGeometry(10, 10, 10); 
var p_material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: 0xcccccc}); 
var p_mesh = new THREE.Mesh(p_geometry, p_material); 
p_mesh.position.set(0, -5, 0); 
p_mesh.castShadow = true; 
p_mesh.receiveShadow = true; 
scene.add(p_mesh); 

// the small cube 
var geometry = new THREE.CubeGeometry(2, 2, 2); 
var material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: Math.random() * 0xffffff}); 
var mesh = new THREE.Mesh(geometry, material); 
mesh.position.set(0, 6, 3); 
mesh.castShadow = true; 
mesh.receiveShadow = true; 

// add small cube as the child of large cube 
p_mesh.add(mesh); 
p_mesh.quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), 0.25 * Math.PI); 

// the light source 
var light = new THREE.DirectionalLight(0xffffff); 
light.castShadow = true; 
light.position.set(0, 10, -8); // set it light source to top-behind the cubes 
light.target = p_mesh   // target the light to the large cube 
light.shadowCameraNear = 5; 
light.shadowCameraFar = 25; 
light.shadowCameraRight = 10; 
light.shadowCameraLeft = -10; 
light.shadowCameraTop  = 10; 
light.shadowCameraBottom = -10; 
light.shadowCameraVisible = true; 
scene.add(light); 

Answer 1

Evet, bu bir bilinen ve uzun süredir, WebGLRenderer sorunu. Sorun şu ki, gölge hesaplamasında yüzün nokta çarpımı ve ışık yönünün dikkate alınmadığıdır. Sonuç olarak, "gölgeler arkadan gösterir".

Çalışma ortamı olarak, her bir yüz için, yalnızca gölgeleri alan belirli malzemelerle farklı bir malzemeye sahip olabilirsiniz.

three.js r.71