A-FrameとThree.js castShadowとreceiveShadowを設定する方法

Question

AFrameと3を使用する。 AFrameシンプルシーン、カメラ、レンダラー、スポットライト、飛行機、キューブを作りました。

私はキューブに陰影を飛行機に投射したい。

リファレンスcube.object3Dとspotlight.object3Dを使用して、キューブ内のスポットライトの.castShadowを設定しました。

基準面plane.object3Dを使用して、平面内のreceiveShadowを設定しました。

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

影があるため、フレームに追加されました：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>