A-Frame 和 Three.js 如何设置 castShadow 和 receiveShadow答案

【问题标题】：A-Frame and Three.js how to set castShadow and receiveShadowA-Frame 和 Three.js 如何设置 castShadow 和 receiveShadow
【发布时间】：2023-03-20 15:25:01
【问题描述】：

使用 AFrame 和三个。制作了一个简单的 AFrame 场景、一个相机、一个渲染器、一个聚光灯、一个平面和一个立方体。

我希望立方体将阴影投射到平面上。

我已经使用参考 cube.object3D 和 Spotlight.object3D 在立方体中设置了聚光灯中的 .castShadow。

我已经使用参考 plane.object3D 设置了平面中的 receiveShadow。

还设置了 renderer.shadowMapEnabled。

但看不到任何阴影投射到飞机上。

有什么提示吗？

非常感谢。

【问题讨论】：

是否应该在网格上启用？ cubeEntity.getObject3D('mesh')。还有一个 PR 开放用于在 A-Frame 核心中启用阴影github.com/aframevr/aframe/pull/2350
或许可以试试plane.getObject3D('mesh').material.needsUpdate = true？该 PR 中有详细信息，tl;dr 我们正在为 A-Frame 添加真正的支持。

标签： three.js aframe shadows

【解决方案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>

【讨论】：

【解决方案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;
    }

【讨论】：