[answered] What's the right way to import a scene from gltf in r114?

Hi, I am currently converting projects from threejs r113 to r114 and I’m having some troubles having the same result as I had when using r113, using GLTF-loader.

In the migration part on github for r114 I saw GLTF loader now returns a Group instead of a scene. But I like to use that group as a scene, like I did before in these projects. But I can’t find information on how to accomplish that.

It looks like the Group object is almost the same as a Scene so my guess is that Scene is derrived from Group. But is there a way to convert a group to a scene? I’d rather not read all children from the group just to paste it inside a new group if I don’t have to, but if that’s the only way, okay.

I would expect something inside the scene object like ‘sceneFromGroup()’, but so far couldn’t find anything like it.

Anybody could help me on what the ‘right/best practise’ way of doing this is in r114?

Btw I see the gltf loader still returns ‘scene’, but puts a group inside it. Isn’t that confusing?

It was changed, because Three.js does not support nested scenes, so multiple properties like .fog and .overrideMaterial would cause misunderstanding. As for why is it still called gltf.scene i’m not sure, but might be many reasons. There was an issue about it on github, that you could look up if you want.

Group is indeed very similar to Scene, except Group is meant to represent a group of objects, while a Scene represents a 3D world, or at least in Three.js it does (somebody please correct me if Im wrong).

Why do you want to use a Scene instead of a Group? As mentioned earlier, it’s not recommended to nest scenes and I can’t think of a reason why Scene would be better than a Group.

1 Like

Thanks for your helpful reply. I understand scenes cannot be nested, or at least they shouldn’t. As that makes sense. Unfortunately this doesn’t really answer the question I’m really having.

What I did in my projects is load the full scene from gltf. So I don’t treat it as a group that I add to a scene created by code, but instead I load the full scene from the gltf.
But now that threejs r114 seems to be not loading the gltf as a scene, but as a group instead, it left me confused.

So what’s the right way of doing things now? If I leave the code the way it was, the gltf.scene will be loaded as a group, but treated as a scene. This is working for some projects, but other projects seem to have problems with it, like lights are not the same, materials are not the same. I even have a project where suddenly one of the meshes added by code to the loaded scene (from gltf) are rotated and cannot be moved nor rotated by using threejs’s rotation or position objects. And I don’t see that in the migration info (r113 to r114). So either there are issues in this release, which I doubt to be this serious, or something is not working for another reason, like the Group may not be treated as a scene.

Obviously I don’t like to add this group to a scene, as hierarchy changes with it. And if that’s not needed I wouldn’t like to go that route, especially on existing large projects.

To me it is confusing what the intended way of doing things is now and I cannot find anything on this in the docs nor an explanation in the migration info. The only thing that the migration part is telling is that the scene now loads as a group. And I understand that we can add a group to a scene, but that’s obviously now what I’m after as I have the full scene inside the gltf and I believe gltf is also meant to work like that and can even host multiple scenes inside.

So than I come back to my question again as to me it isn’t quite clear still, and that is if the loaded gltf.scene, which threejs now loads as a group object, can be used as a scene (to render and so on)? And what’s the intended way of doing things now in r114?

Most developers use GLTFLoader this way, treating the object as a single “model” within a larger scene:

loader.load( 'model.glb', function ( gltf ) {
  var model = gltf.scene;
  scene.add( model );
} );

Issues were found with putting a Scene inside of another Scene, so we changed the type returned to Group so that this most common case would work correctly. The .scene name was not changed, to minimize broken code from the change.

You’ll need to create a Scene manually, the Group that GLTFLoader returns should not be passed directly to the Renderer. It would be better to do something like this:

loader.load( 'model.glb', function ( gltf ) {
  var scene = new THREE.Scene();
  scene.add( ... gltf.scene.children );
  renderer.render( scene, camera );
} );

This doesn’t sound like an intentional change, if you can share a case to reproduce it you should report it as a bug.

4 Likes

Thanks for your response @donmccurdy.

I now import the gltf the way you advised and that’s fixing a lot of things. When creating a scene myself and only load the children from the gltf.scene now there are no issues anymore with the materials and also the issue with not being able to move or rotate meshes I added to the scene afterwards is solved.
So I guess rendering the Group was the issue causing all kinds of issues. This fixed two projects I upgraded to r114 now. So that’s great!

There is one large project here though that is completely threejs with a lot of animating things in it which is still broke and throws errors even after importing the objects from gltf it this way. So I have to dive into that a little deeper to see what’s going on there.

[edit] btw Yesterday I tried to create a codepen example with threejs, but I only found a very old threejs to use as lib in there. I tried to link directly to the latest minified threejs file on github, but that was causing crossdomain errors in codepen. Also when I search on threejs and cdn, I get this site https://cdnjs.com/libraries/three.js/ that only shows r110 as latest version.

Do you know if there is a link to the latest threejs version around that can be used inside a codepen to demo stuff, like issues? Thanks in advance!

1 Like

This one was posted in this thread.
<script src="https://unpkg.com/three@0.114.0"></script>
Used it in a codepen today and worked well :slight_smile:

1 Like

Hm, could you share some of those issues? That sounds like something we may need to look into. :confused:

@donmccurdy I did. I figured these were better put in seperate threads here. The fragmentshader thing is solved some minutes ago, as there was obviously an undocumented change in the DirectionalLight struct. The other one I’m facing now is about materials not working as before and has to do with a problem in either the blender gltf exporter or the three gltf-loader. Anyhow, they don’t match for some reason. But these are in other thread. Thanks for reacting and taking these seriously.