THREE.JS Ombra sul lato opposto della luce

Question

Ho usato THREE.js r49 creare 2 cubi geometrici con una luce direzionale per proiettare ombre su di essi e ottenere risultati come nella seguente immagine.

Ho notato che l'ombra nel cerchio verde non dovrebbe essere visualizzata, poiché la luce direzionale è dietro a entrambi il cubo. Immagino che questo sia il problema materiale, ho provato a cambiare vari parametri del materiale e a modificare il tipo di materiale stesso, ma il risultato è rimasto lo stesso. Ho anche testato lo stesso codice con r50 e r51 e ottenuto lo stesso risultato.

Qualcuno potrebbe darmi qualche suggerimento su come sbarazzarsi di quell'ombra.

Sia cubo stanno creando utilizzando CubeGeometry e MeshLambertMaterial come codice seguente.

Il codice:

// 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

Sì, questo è un noto e di lunga data, numero WebGLRenderer.

Il problema è che il prodotto punto della faccia normale e la direzione della luce non vengono presi in considerazione nel calcolo dell'ombra. Di conseguenza, "le ombre si mostrano dalla parte posteriore".

Come soluzione, è possibile avere un materiale diverso per ogni faccia, con solo alcuni materiali che ricevono ombre.

three.js r.71