3

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.

ngokevin
  • 12,980
  • 2
  • 38
  • 84
wedgeantilles
  • 31
  • 2
  • Should it be enabled on the mesh? `cubeEntity.getObject3D('mesh')`. There is also a PR open for enabling shadows in A-Frame core https://github.com/aframevr/aframe/pull/2350 – ngokevin Feb 06 '17 at 22:00
  • Perhaps try `plane.getObject3D('mesh').material.needsUpdate = true`? There is detail in that PR, tl;dr we are in the process of adding real support to A-Frame. – Don McCurdy Feb 08 '17 at 15:05

2 Answers2

3

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>
ngokevin
  • 12,980
  • 2
  • 38
  • 84
0

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;
    }
user7544263
  • 1