Imported a fbx but not shown on the scene

It’s a long time I’m not using Three.js so this is a… hmmm a simple question.

I’m using vue3 and troisjs to import a fbx. I used a template to have the demo samba dancing and it works. Now I imported my own .fbx (a bottle with no animations), but I’m not able to see it on the scene.

when the import (loading) is completed it calls this method:

  onLoad(object) {
       // this.mixer = new AnimationMixer(object);
       // const action = this.mixer.clipAction(object.animations[0]);
        object.traverse(function (child) {
          if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
       // this.clock = new Clock();
       // this.$refs.renderer.onBeforeRender(this.updateMixer);

Note: the commented lines are about the Samba demo.

The full code on vue:

        <Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: true, target }" resize shadow>
                <Camera :position="{ x: 100, y: 200, z: 300 }" />
                <Scene ref="scene" background="#a0a0a0">
                  <HemisphereLight />

                      :position="{ x: 0, y: 200, z: 100 }"
                      cast-shadow :shadow-camera="{ top: 180, bottom: -120, left: -120, right: 120 }"

                  <Plane :width="2000" :height="2000" :rotation="{ x: -Math.PI / 2 }" receive-shadow>
                    <PhongMaterial color="#e5b80b" :props="{ depthWrite: true }" />

                  <FbxModel src="/models/3D bottle R1.fbx" @load="onLoad" />

I see the background grid, I can zoom/rotate/move but no object is in. The console.log shows 4 children ( mesh)

What I’m missing?

  1. First, consider checking all points listed here - usually it’s one of them.
  2. If still not working - does the model work fine in FBX model viewer ?
1 Like

Do you mind sharing the FBX asset in this topic?

Thanks a lot! I’m feeling so noob again! The tips are very helpful! But… my object is not yet on the scene…

I did a test loading a free FBX and it is load as aspected! So the issue should be in my own FBX file.

Maybe something wrong with materials, I guess… I’m using Troisjs. I’ll check it.

That’s right! I suspect something wrong here.

I loaded a free FBX in my vue.js component and it appears on the scene.

If I test my file with an online viewer I see it, but if I load it in my vue component… I can’t see it.

bottle.fbx (335.0 KB)

The FBX file looks fine so there is no issue in context of FBXLoader. The only thing that might you want to check is the asset contains a perspective camera definition next to the actual bootle. This is something you might want to clean up during the export.

1 Like