A-Frame 및 Three.js castShadow 및 receiveShadow 설정 방법

Question

AFrame 및 3을 사용합니다. AFrame 간단한 장면, 카메라, 렌더러, 스포트라이트, 비행기 및 큐브를 만들었습니다.

나는 큐브가 그림자를 평면에 넣길 원합니다.

참조 큐브 .object3D 및 spotlight.object3D를 사용하여 큐브의 스포트라이트에있는 .castShadow를 설정했습니다.

평면의 referenceShadow.object3D를 사용하여 설정했습니다.

renderer.shadowMapEnabled도 설정해야합니다.

그러나 비행기에 그림자가 드리 워진 것을 볼 수 없습니다.

힌트가 있습니까?

고마워요.

Answer 1

답장을 보내 주셔서 감사합니다.

나는 단지 A-Frame, Three.js, Javascript 및 html을 배우고 있습니다.

A-Frame으로하는 일은 정말 멋지다.

는 완벽하지 않다, 다음을 완료,하지만 지금은 작동합니다

registerComponent 초기화에서

:() 함수

를 메쉬에서 그림자 캐스트 :

el.getObject3D을 ('mesh'). castShadow = data.shadow; //data.shadow = 메쉬에서받을

사실 그림자 :.

el.getObject3D ('메시') receiveShadow = data.shadow; //data.shadow = 진정한 스포트 라이트

:

this.spotlight = new THREE.SpotLight(data.colorm); 
       el.setObject3D('spotlight', this.spotlight); 
       el.getObject3D('spotlight').castShadow = data.shadow; 
       el.getObject3D('spotlight').shadow.camera.near = data.shadowcameranear; 
       el.getObject3D('spotlight').shadow.camera.far = data.shadowcamerafar; 
       el.sceneEl.systems.light.registerLight(el); 

그리고 다음 장면을 사용하여로드 이벤트 :

function setShadows() 
    { 
     aframeRenderer.shadowMap.enabled = true; 
     aframeRenderer.shadowMap.type = THREE.PCFSoftShadowMap; 
     aframeRenderer.setClearColor(0x000000, 1.0); 
     aframeRenderer.setSize(window.innerWidth, window.innerHeight); 
     aframeRenderer.shadowMap.enabled = true; 

     threeSpotLight.shadowCameraNear = 0.01; 

     threeSpotLight.castShadow = true; 
     threeCube.castShadow = true; 
     threeCube.receiveShadow = false; 
     threePlane.castShadow = false; 
     threePlane.receiveShadow = true; 

     threeSpotLight.visible = true; 
    } 

Answer 2

그림자 이후 A-프레임에 추가되었습니다 https://github.com/aframevr/aframe/pull/2350

https://aframe.io/docs/master/components/light.html#configuring-shadows

<a-scene shadow> 
    <a-entity light="type: directional; castShadows: true"></a-entity> 
    <a-box shadow="cast: true; receive: true"></a-box> 
</a-scene>