So I am pretty new with A-Frame. I am stuck as i am not able to find a solution nor clues on where to look. I have a Glb model which shows correct textures when in Sandbox Babylon and other GLTf viewer, it was converted from a fbx to glb using Blender, up to this point all is ok. It is a very simple model(by simple i mean no animations)
Drop the model into viewers no problems here I see the texture: Al is fine with Babylon vierwer
Load the model in A-frame , the model is black. In chrome with A-frame
I tried light position, intensity,etc... nothing. I thought it was my code maybe I screw up something in my code:
<a-scene gltf-model="dracoDecoderPath:https://www.gstatic.com/draco/v1/decoders/" renderer="precision: medium">
<a-assets timeout="30000">
<a-asset-item id="leopard" src="/assets/models/leopard.glb" response-type="arraybuffer"></a-asset-item>
</a-assets>
<a-camera position="0 1 2.75"></a-camera>
<!-- Environment for 2D and VR viewing. It's auto-hidden in AR mode. -->
<a-entity environment="preset: forest;
groundTexture:none;
ground:hills;
groundYScale:50;
skyType:gradient;
lighting: none;
shadow: none;
dressingAmount:100;
dressingColor:#034B03;
lightPosition: 0 2.15 0"
hide-in-ar-mode></a-entity>
<a-entity id="tank" position="0 0 0" scale="0.5 0.5 0.5">
<a-entity position="0 0 0" rotation="0 55 0"
gltf-model="#leopard"
animation-mixer
shadow="cast: true; receive: false"></a-entity>
</a-entity>
<a-entity light="type: ambient; intensity: 0.5;"></a-entity>
<a-light type="directional"
light="castShadow: true;
shadowMapHeight: 1024;
shadowMapWidth: 1024;
shadowCameraLeft: -7;
shadowCameraRight: 5;
shadowCameraBottom: -5;
shadowCameraTop: 5;"
id="light"
target="tank"
position="-5 3 1.5"></a-light>
<!-- This shadow-receiving plane is only visible in AR mode. -->
<a-plane height="15" width="15" position="0 0 -3" rotation="-90 0 0"
shadow="receive: true"
ar-shadows="opacity: 0.3"
visible="false"></a-plane>
</a-scene>
So i reduced it to the simplest approach:
<a-scene>
<a-assets>
<a-asset-item id="leopard" src="/assets/models/leopard.glb" response-type="arraybuffer"></a-asset-item>
</a-assets>
<a-entity gltf-model="#leopard"></a-entity>
</a-scene>
Unfortunately same result, I look for similar issues, i did find some peopel with black glb model, but for Babylon or AR.js framework, nothing for my case.
I looked into the A-frame documentation, but nothing that would point to a solution or at least somethign that I could compare to my approach, it looks like people just load glb models and it works!?
Anyway, if anyone would be kind enough to point my mistake or point me into the correct direction it would be fantastic!
Thank you very much!
A model can be black in the scene, but fine in other viewers, when it's mettalic, but there are no environment maps provided. If you don't use an environment map, I'd try setting the materials metalness to 0:
<script>
AFRAME.registerComponent("foo", {
init: function() {
// wait until the model is loaded
this.el.addEventListener("model-loaded", evt => {
// grab the mesh and traverse its nodes
this.el.getObject3D("mesh").traverse(node => {
// if there is any node with a material - set its metalness to 0
if (node.material) node.material.metalness = 0;
})
})
}
})
</script>
<a-scene>
<a-assets>
<a-asset-item id="leopard" src="/assets/models/leopard.glb" response-type="arraybuffer"></a-asset-item>
</a-assets>
<a-entity gltf-model="#leopard" foo></a-entity>
</a-scene>
If the colors show up - either use an environment map, or tone down the metalness in the models material.
If the model is more dimm, or washed-out, then try setting the renderers output encoding to sRGB - in a-frame it's called simply color management (threejs docs):
<a-scene renderer="colorManagement: true;">