A-Frame and Three.js how to set castShadow and receiveShadow

Question

Using AFrame and three. Have made an AFrame simple scene, a camera, a renderer, a spotlight, a plane and a cube.

I want the cube to cast shadow into the plane.

I have set, using the reference cube.object3D and spotlight.object3D, the .castShadow in the spotlight, in the cube.

I have set, using the reference plane.object3D, the receiveShadow in the plane.

Have also set the renderer.shadowMapEnabled.

But can not see any shadow casted into the plane.

Any hint ?

Thanks a lot.

Answer 1

many thanks for your answers.

I am learning A-Frame, Three.js, Javascript, and html just by doing.

It is awesome what you are doing with A-Frame.

Done the following, it is not perfect, but for now it works:

In the registerComponent init:function()

In the meshes to cast shadows:

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

In the meshes to receive shadows:

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

In the spotlight:

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

And then using the scene has loaded event:

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

Shadows have since been added to 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>