3

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

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

我已经使用参考 cube.object3D 和 Spotlight.object3D 在多维数据集中设置了聚光灯中的 .castShadow。

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

还设置了renderer.shadowMapEnabled。

但看不到任何影子投进了飞机。

有什么提示吗？

非常感谢。

4

2 回答 2

3

阴影已被添加到 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>
于 2017-02-28T02:49:21.920 回答
0

非常感谢您的回答。

我正在学习 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;
    }
于 2017-02-10T06:27:46.320 回答