シャドウが（THREE.js r82）で表示されない

Question

キューブのシャドウをMeshLambertMaterialでプレーンにキャストしようとしていますが、シャドウは表示されません。

解決策私は、通常、錐台の内部にないオブジェクトまで沸騰することがわかりましたが、オブジェクトは錐台にあるようです。

私がここで間違っていることを知っていますか？私はいくつかの不動産を狂った価値に設定していますか？どんな助けでも大歓迎です。私はここに私の作業コードを表示するためにバイオリンを含めました：https://jsfiddle.net/44jwvbt6/

// import Ticker from 'timing/Ticker'; 

class World { 

    constructor() { 

     this._renderer = new THREE.WebGLRenderer({ antialias: true }); 
     this._renderer.shadowMap.enabled = true; 
     this._renderer.shadowMap.type = THREE.PCFShadowMap; 
     // this._renderer.shadowMap.cullFace = THREE.CullFaceBack; 

     this._scene = new THREE.Scene(); 
     this._scene.background = new THREE.Color(0x333333); 

     const width = window.innerWidth; 
     const height = window.innerHeight; 

     this._camera = new THREE.OrthographicCamera(width/- 2, width/2, height/2, height/- 2, -400, 400); 
     this._camera.position.set(0, 0, 100); 

     const geometry = new THREE.BoxGeometry(100, 100, 100); 
     const material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); 

     const light = new THREE.DirectionalLight(0xffffff, 1); 
     light.position.set(0, 200, 400); 
     light.castShadow = true; 
     light.shadow.camera.near = -1000; 
     light.shadow.camera.far = 2000; 
     // light.shadow.camera.fov = 30; 
     light.shadow.bias = 0.0038; 
     light.shadow.mapSize.width = 1024; 
     light.shadow.mapSize.height = 1024; 
     // light.shadow.camera.left = -width/2; 
     // light.shadow.camera.right = width/2; 
     // light.shadow.camera.top = -height/2; 
     // light.shadow.camera.bottom = height/2; 
     this._scene.add(light); 
     this._scene.add(new THREE.CameraHelper(light.shadow.camera)); 

     const mesh1 = new THREE.Mesh(geometry, material); 
     mesh1.position.set(0, 0, 100); 
     mesh1.castShadow = true; 
     this._scene.add(mesh1); 

     const plane = new THREE.PlaneGeometry(width, height); 
     const mesh4 = new THREE.Mesh(plane, material); 

     // mesh2.castShadow = true; 
     // mesh3.castShadow = true; 
     mesh4.receiveShadow = true; 
     this._scene.add(mesh4); 

     const controls = new THREE.OrbitControls(this._camera, this._renderer.domElement); 

     window.addEventListener('resize', this._resize.bind(this)); 

     this._resize(); 

     this.animate(); 
     // this._ticker = new Ticker(1000/60); 
     // this._ticker.onTick(this.animate.bind(this)); 

    } 

    get element() { 
     return this._renderer.domElement; 
    } 

    get scene() { 
     return this._scene; 
    } 

    _resize() { 
     this._renderer.setSize(window.innerWidth, window.innerHeight); 
    } 

    animate() { 
     this._renderer.render(this._scene, this._camera); 
     requestAnimationFrame(this.animate.bind(this)); 
    } 

} 

const world = new World; 
document.body.appendChild(world.element); 

// export default World; 

Answer 1

2つの問題をここに：1は、材料の再利用です。これがなぜ問題なのか分かりませんが、これで解決します。

const mesh4 = new THREE.Mesh(plane, new THREE.MeshLambertMaterial({ color: 0xff0000})); 

もう1つは、指向性のあるライトキャストの大きな影を作る行をコメントアウトしたことです。特に方向性ライトは、それらのすべてのプロパティーによって定義されたボックス内のシャドウのみをキャストします。light.shadow.camera.*これらのコメントを解除していることを確認します。これらの変更と

light.shadow.camera.left = -width/2; 
light.shadow.camera.right = width/2; 
light.shadow.camera.top = -height/2; 
light.shadow.camera.bottom = height/2; 

フィドル：https://jsfiddle.net/nrbojkoo/1/