Imported a fbx but not shown on the scene

Questions
,
1

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]);
       // action.play();
        object.traverse(function (child) {
          if (child.isMesh) {
            console.log(child)
            child.castShadow = true;
            child.receiveShadow = true;
          }
        });
        this.$refs.scene.add(object);
       // 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 />

                  <DirectionalLight
                      :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 }" />
                  </Plane>

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

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?

2
  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
3

Do you mind sharing the FBX asset in this topic?

4

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.

5

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)

6

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