GLTF model Load without binary assets

I’m very new with Three.js, just got a 3D animation model from designer as .gltf and .bin files.
I’ve tried Loading them with GLTFLoader() and It seems that I’m only getting geometry:

I’ve tried running my model in online gltf viewer and it seems working fine:

How could I achieve the same effect that is in gltf viewer? I guess this has to be somehow code related issue, since model seems to be just fine.

Also, I have another problem with model - there is only one animation, that exists in this model, it works fine from online viewer, but as soon as I try to play() it in code I get this error in Console:

THREE.PropertyBinding: Trying to update property for track: Icosphere.quaternion but it wasn’t found.

In case you want to try it, I’m also attaching my model itself (.gltf and .bin files):
untitled.gltf (7.5 KB)
untitled.bin (60.4 KB)

Thank you for helping me!

Could you share the code you’re using to load the model? It looks like you may not have any lights: the model contains one basic grey material and one emissive green material, so only the emissive will appear without lighting.

3 Likes

I’m attaching code snipped from my load method. After your notice about lights, I’ve

tried adding AmbientLight and DirectionalLight, seems to take an effect, but still differs quite

significantly from what I see in viewer - green borders are pixelated and shadow isn’t applying in corners

as I see in viewer.

Also, do You know what could be wrong with animation play, I mean, that Binding error? In viewer it’s playing.

One more thing - when I try to rotate this model in update() method with model.rotation.x/y it is not simply rotating around self axis, but at the same time moves in ellipsis.Screenshot_6 Screenshot_5

You can find the viewer’s code here: three-gltf-viewer/src/viewer.js at main · donmccurdy/three-gltf-viewer · GitHub

tried adding AmbientLight and DirectionalLight, seems to take an effect, but still differs … shadow isn’t applying in corners

I would try a point light or (better) an environment map.

green borders are pixelated

I can’t see your complete code, but have you set new THREE.WebGLRenderer({antialias: true});?

About animation, the AnimationMIxer should take the model as it’s parameter, gltf.scene not gltf.