PlaneGeometry가 그림자를받지 못하는 이유는 무엇입니까?

Question

three.js를 사용하여 모델이있는 장면을 만듭니다. 나는 모델이 앉아있는 비행기와 모델에 빛나는 스포트라이트를 가지고있다.

모델은 여러 가지 다른 개체로 구성됩니다. 모든 객체는 그림자를 받아서 투영하도록 설정됩니다. 그림자는 모델의 다른 영역에서 모델 자체에 캐스팅됩니다.

그러나 비행기는 그림자를 수신하지 않습니다. 나는 왜 그런지 확신 할 수 없다.

모델과 평면이 그림자 영역 내에 있는지 확인하기 위해 spotLight.shadowCameraNear 및 spotLight.shadowCameraFar 속성을 조정했습니다. 아직 아무것도.

아래는 스포트라이트가 표시된 모델의 스크린 샷입니다.

나는 shadowmap 활성화 및 소프트지도에 설정되어 다음과 같이

renderer.shadowMap.enabled = true; // Shadow map enabled 
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 

내 코드는 다음과 같습니다

<script> 

    if (! Detector.webgl) Detector.addGetWebGLMessage(); 

    var container, stats, controls; 
    var camera, scene, renderer, sceneAnimationClip ; 

    var clock = new THREE.Clock(); 

    var mixers = []; 
    var globalObjects = [];   

    init(); 

    function init() { 

     var loader = new THREE.TextureLoader(); 

     container = document.createElement('div'); 
     document.body.appendChild(container); 

     // Scene 
     scene = new THREE.Scene(); 
     scene.fog = new THREE.Fog(0xffffff, 50, 100); 

     // Camera 
     camera = new THREE.PerspectiveCamera(30, (window.innerWidth/window.innerHeight), 1, 10000); 
     camera.position.x = 1000; 
     camera.position.y = 50; 
     camera.position.z = 1500; 
     scene.add(camera); 

     // LIGHTS 
     var spotLight = new THREE.SpotLight(0xffffff,1); 
     spotLight.position.set(5, 5, 6); 

     spotLight.castShadow = true; 

     spotLight.target.position.set(-1, 0, 2); 
     spotLight.shadowDarkness = 0.5;    
     spotLight.shadowCameraNear = 4; 
     spotLight.shadowCameraFar = 25; 

     scene.add(spotLight); 

     // Camera helper for spotlight 
     var helper = new THREE.CameraHelper(spotLight.shadow.camera); 
     scene.add(helper); 

     // ground 
     var geometry = new THREE.PlaneGeometry(30, 30); 
     geometry.receiveShadow = true; 
     var material = new THREE.MeshBasicMaterial({color: 0xcccccc, side: THREE.DoubleSide}); 
     material.receiveShadow = true; 
     var floor = new THREE.Mesh(geometry, material); 
     floor.receiveShadow = true; 
     floor.position.y = -1; 
     floor.rotation.x = Math.PI/2; 
     scene.add(floor); 

     // stats 
     stats = new Stats(); 
     container.appendChild(stats.dom); 

     // model 
     var manager = new THREE.LoadingManager(); 
     manager.onProgress = function(item, loaded, total) { 
      console.log(item, loaded, total); 
     }; 

     // BEGIN Clara.io JSON loader code 
     var i = 0; 
     var objectLoader = new THREE.ObjectLoader(); 
     objectLoader.load("final-master-20170426.json", function (object) { 

      var textureLoader = new THREE.TextureLoader(); 

      object.traverse(function (child) 
      { 
       if (child instanceof THREE.Mesh) { 
        var material = child.material.clone(); 

        material.shininess = 0; 
        material.wireframe = false; 
        material.normalScale = new THREE.Vector2(1, 1); 

        /* Roof Glass */ 
        if(child.name == 'Roof_Glass') { 
         material.shininess = 100; 
         material.alphaMap = grayscale; 
         material.transparent = true; 
        } 

        // Beading 
        if(child.name.endsWith('_Beading')) { 
         material.color.setHex(0x1e1e1e); 
         material.shininess = 100; 
        } 

        /* Pillars */ 
        if(
         child.name.indexOf('Pillar') == 0 || 
         child.name == 'Main_Frame' || 
         child.name == 'Main_Cross_Supports' || 
         child.name == 'roof_batons' || 
         child.name == 'Roof_Flashings'        
        ) { 
         material.color.setHex(0x1e1e1e); 
         material.shininess = 100; 
        } 

        /* Lamps */ 
        if(child.name.indexOf('Lamp') == 0) { 
         material.color.setHex(0x1e1e1e); 
         material.shininess = 100; 
        } 
        // Set shadows for everything 
        material.castShadow = true; 
        material.receiveShadow = true; 

        child.material = material; 

        material = undefined; 

        globalObjects[child.name] = child; 

        console.log(child); 
       } 
      }); 
      object.position.y = -1; 
      object.position.x = 0; 

      scene.add(object); 
      scene.fog = new THREE.Fog(0xffffff, 50, 100); 

      i++; 
     }); 
     // END Clara.io JSON loader code 

     renderer = new THREE.WebGLRenderer({ 
      'antialias': true 
     }); 
     renderer.setPixelRatio(window.devicePixelRatio); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     renderer.setClearColor(scene.fog.color); 

     container.appendChild(renderer.domElement); 

     renderer.gammaInput = true; 
     renderer.gammaOutput = true; 
     renderer.shadowMap.enabled = true; // Shadow map enabled 
     renderer.shadowMap.type = THREE.PCFSoftShadowMap; 

     // controls, camera 
     controls = new THREE.OrbitControls(camera, renderer.domElement); 
     controls.target.set(0, 0, 0); 
     controls.maxPolarAngle = Math.PI * 0.5; 
     camera.position.set(8, 3, 10); 
     controls.update(); 

     window.addEventListener('resize', onWindowResize, false); 

     animate(); 

    } 

    function onWindowResize() { 

     camera.aspect = window.innerWidth/window.innerHeight; 
     camera.updateProjectionMatrix(); 

     renderer.setSize(window.innerWidth, window.innerHeight); 

    } 

    // 

    function animate() { 

     requestAnimationFrame(animate); 
     stats.update(); 
     render(); 

    } 

    function render() { 

     var delta = 0.75 * clock.getDelta(); 
     camera.lookAt(scene.position); 
     renderer.render(scene, camera); 

    } 
</script> 

Answer 1

이는 THREE.MeshBasicMaterial 대신 THREE.MeshPhongMaterial를 사용하여 수정되었습니다.