Display error using SkinnedMesh (FBX), Helpers and multiple Scenes

I posted this issue as a reply in another thread, so I guess it didn’t get that much attention. That’s why I am reposting it as a new topic. I hope that is okay.

My problem seems to be quite complex so I give my best to explain as good as I can what is going on.

In my current project I do have multiples scenes. I switch between different THREE.Scene() instances as described here using dat.GUI. For the sake of simplicity let’s say I have three scenes. Each scene contains one or more helpers (grid or camera) and a perspective Camera. Besides that scene #1 contains a cube as well as scene #2. Scene #3 differs a little and contains a FBX file from the threejs examples and a skeleton helper. By default I set the visibility of all helpers to false. I toggle them later by Keyboard Input.

So far so good. Now there are two different display errors…

  1. Case
    If I start on scene # 3 and switch to scene #1 I see some wireframe geometry left overs from the skinnedMesh Instance.
  2. Case
    If I start on scene #1 or scene #2 and switch to scene #3 I see some displaced geometry looking like my helpers but deforming with my skeleton.

I do have do admit, it’s hard to explain so please bear with me, I will add a live demo link below.

Research results so far:

  • If I remove all helpers from all scenes, the display error does not occur
  • In my project I use several Loaders and load different files. If I don’t load gltf files or redurce the number of files to load, the error does not occur
  • The error occurs on every browser I tested so far ( Firefox, Chrome, Safari )
  • I also tried different FBX files to make sure the file is not corrupted, but the error still occurs

Live Demo
I managed to set up a little demo for you guys to get an idea about what the hack I am talking about. Some things you should know:

  1. By default I render a static perspective camera which is a child of the currently rendered scene. You can toggle the camera hitting “C” on your keyboard to view from a free camera using orbit controls so you can move within the scene. Hope this helps you inspecting the scenes.
  2. If you want to toggle helpers and the GUI hit “Q”.
  3. You can switch between scenes using the dropdown in the GUI panel.

Link to demo:
(sorry there is still sound playing, so better mute your tab or enjoy the music, its up to you)

At this point I have run out of ideas and welcome any kind of approach to fix this, or at least explain why this is happening.

I’m sorry, but it’s not clear to me what objects should appear in what scene. Please try to create a smaller test case as a fiddle or codepen.

Your current example is just too complex and hard to debug. Besides, try to avoid to minify your code if developers should analyze it.

1 Like

Well I already thought that might be the case.

I tried to create a fiddle but for what ever reason the fiddle is working as expected. That’s leaving me even more frustrated to be honest ;D.

I could offer to upload my source to a public git repo, you could fork it and maybe have a look at my source code. I know that is much required, but it seems to be my last chance at the moment and I would thank you like forever forever ever!

Let’s give it try. If you share a link, I’ll have a look.

Thank you very much, this is the repo:

I added some instructions in the readme, about dev dependencies and set up. Should be fairly easy though. If you have questions please ask me right away!

Thank you so much, I am already eternally grateful!

Sry, I can’t find a three.js related issue in your app. three.js correctly renders the content of the current/active scene. Unfortunately, I’m not familiar with the other libraries/frameworks used in your project, so I’m not a help in this context.

Let me give you a well-meant advice: If you have a problem with your app, it’s better to isolate the problem in a small test case which is easy to share and debug. Providing such a live example means more work for you but the chances are much higher to get useful feedback.

1 Like

Providing such a live example means more work for you but the chances are much higher to get useful feedback.

Not to mention that, probably about 90% of the time I’ve ended up figuring out the problem myself while making the simplified example.

1 Like

@looeee and @Mugen87 I know, you are right. I didn’t mean to be lazy or let others do my work, I am literally debugging like the last two days.

Now I have reduced the app drastically to the fundamentals. I added the code to codepen and uploaded it on my webspace. Codepen is working, the one on my webspace isn’t.



It’s almost the exact same code with one major exception:

  1. On codepen I load the FBXLoader from
    https://threejs.org/examples/js/loaders/FBXLoader.js .
    In my webpack bundle I use this package

May this be the reason?

I’m afraid the threejs-ext package is nothing to do with us and there’s not much we can do to help you with debugging that. Perhaps you could try using files from the three.js repo in your app and see if that fixes the problem?

Alright, so last night I figured out how to use the FBXLoader from examples/js/loaders/ and everything works as expected now.

Thank you and @Mugen87 very much for your effort, I really appreciate it. Also keep up the good work on THREE :slight_smile:!


Today I updated my current project to r99 and had to determine the same bug again.

After the update from r98 to r99 the problem reappears. See the image below:

On r98 I do have a GridHelper and CameraHelper in my scene. Using r99 somehow makes the GridHelper wrap around the tree in the center and the CameraHelper is also behaving differently. This time there even is no SkinnedMesh in the scene.

I looked into the release notes from r99 and can’t find any changes made to the FBX Loader. This leads me to the fact that the problem’s origin lies in something else, but I have no clue.