A-Frame 和 Three.js 如何設置 castShadow 和 receiveShadow

Question

使用AFrame和三個。 已經制作了一個 AFrame 簡單場景、一個相機、一個渲染器、一個聚光燈、一個平面和一個立方體。

我希望立方體將陰影投射到平面上。

我已經設置，使用參考cube.object3D 和spotlight.object3D，聚光燈中的.castShadow，在立方體中。

我已經使用參考plane.object3D 設置了平面中的receiveShadow。

還設置了renderer.shadowMapEnabled。

但是看不到任何投射到飛機上的陰影。

任何提示？

非常感謝。

Answer 1

陰影已被添加到 A-Frame： 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>

Answer 2

非常感謝您的回答。

我正在學習 A-Frame、Three.js、Javascript 和 html。

你用 A-Frame 做的事情真是太棒了。

完成以下操作，它並不完美，但現在它可以工作：

在 registerComponent init:function()

在要投射陰影的網格中：

el.getObject3D('mesh').castShadow = data.shadow; //data.shadow = true

在網格中接收陰影：

el.getObject3D('mesh').receiveShadow = data.shadow; //data.shadow = true

在聚光燈下：

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;
    }