Search code examples
three.jsaframegltf

Change GLTF material in Aframe

I'm trying to make some flame in Aframe using a mesh I get on Sketchfab. My problem is the flame mesh have shadow and is dark. How can i change this ? I try setting material emissive and emissiveIntensity but it doesn't affect the result...

Here is the code rendered by Chrome and a screenshot

<a-entity gltf-model="#fire1"
 position="1 1 1"
 scale="0.2 0.2 0.2"
 rotation="0 15 0"
 spinning=""
 emissive-light=""
 material=""
 visible="">

   <a-light position=""
    intensity="1"
    light=""
    angle="-180"
    distance="20"
    type="spot"
    rotation=""
    scale=""
    visible=""></a-light>
</a-entity>

A not so flamish flame

Thanks !

Solution

  • My understanding is that the GLTF loader ignores any other components that try to modify its material properties at the A-Frame layer. You will have to dive into the THREEjs layer underneath. Don McCurdy gives a great example of that here. Notice that his component listens for the 'object3dset' event then modifies the THREEjs nodes directly.

    Of course, if you are just trying to lighten the scene you could add an ambient light :)