Is there a receive shadow only in a-frame

Question

I'm trying to create a plane that will receive a shadow but will be invisible to the camera in order to make a 3d model look like floating

tried to make material transparent

     <!-- this is the shadow system -->
    <a-entity light="type: ambient; intensity: 0.5;"></a-entity>
     <a-entity light="type: directional;
               castShadow: true;
               intensity: 1;
               shadowCameraVisible: true;"
        position="0 0 5"></a-entity>
    <a-assets>

        <!-- the models -->
        <a-asset-item id="animated-asset" src="https://artshirtsonline.com/shanatova/models/test_lines.gltf"  ></a-asset-item>
    </a-assets>

        <a-marker id='animated-marker' type='pattern' preset='custom' url='https://artshirtsonline.com/shanatova/markers/pattern-qrcode2.patt'>

                   <a-entity animation-mixer="loop: repeat" gltf-model='#animated-asset' 
            scale="1 1 1"
            shadow="cast: true"
            rotation="-90 0 0"></a-entity>

        <a-circle id="ground" radius="7" rotation="-90 0 0" position="0 -2 0" shadow="receive: true"  ></a-circle>
    </a-marker>

    <a-entity camera ></a-entity>
    </a-scene>

I expect to get a shadow only on a surface

Answer 1

Yes, this is definitely possible, but you need to do a bit of threejs programming to make it work.

Here is an example of shadow casting the normal way: https://glitch.com/~shadow-cast-basic.

note that you must set the light to cast shadows, and you must place a shadow component on the shadow caster and receiver. You adjust the quality of the shadow in the scene entity. <a-scene shadow="type: pcfsoft">

The shadow is clearly visible, but plane is not transparent.

To achieve the desired effect( visible shadow with transparent object), you must use the THREEjs shadow material. https://threejs.org/docs/#api/en/materials/ShadowMaterial

Aframe does not provide access to this directly, but you can make a custom component that creates the material for you. Here is an example of that. https://glitch.com/~shadow-material