Load, change and remove parts of loaded GLTF by name from scene in three.js

Questions
1

I want to remove a part of a GLTF. I already have a name.

var Muffler = scene.getObjectByName("muffler");

console.log(Muffler);

The console shows me the right Object.

I can also change the visibility with:

Muffler.visible = false;

but the Code:

scene.remove(Muffler);

is doing nothing.

What can be the problem?

2

This code does only work for direct children of scene. Try it like so instead:

const parent = Muffler.parent;
parent.remove( Muffler );
3

Works perfect.

Now i am loading my Standard-GLTF on Start.

loader.load( 'models/Original.gltf', gltf => onLoad( gltf));

and after i click on one of my links to choose the Muffler

<a class="mufflerlink" data-muffler="Original">Original</a>
<a class="mufflerlink" data-muffler="Tuning">Tuning</a>

it changes the part

$( ".mufflerlink" ).each(function(index) {
	$(this).on("click", function(){

		var Muffler = scene.getObjectByName("muffler");
		const parentMuffler = Muffler.parent;
		parentMuffler.remove( Muffler );

		var chosedMuffler = $(this).data("muffler");

		loader.load( 'models/' + chosedMuffler + '.gltf', gltf => onLoad( gltf));

	});
});

For all other guys. I had to name the Object “muffler” in Blender.

Thanks a lot @Mugen87!

And yes, to much Muffler in my Code! :wink:

1 Like
4

It works the first time I click on it but when I click again it crashes.
I get :
Uncaught TypeError: Cannot read property ‘parent’ of undefined

                     $( ".mufflerlink" ).each(function(index) {
					    $(this).on("click", function(){

						var Muffler = gltf.scene.getObjectByName("SM_Seat_Mountain");
						const parentMuffler = Muffler.parent;
						parentMuffler.remove( Muffler );

						var chosedMuffler = $(this).data("muffler");
						console.log(chosedMuffler)
						loader.load( 'models/gltf/GLTF/' + chosedMuffler + '.glb', function ( gltf1 ) {
							const car = gltf1.scene;
							carModel.add(car);
						});

					});
				});
5

@dimitrov the problem with treating gltf like that (mutation and traversal) is that you’re destroying the source data. the only way to fix this is cloning, which produces overhead.

if you combine threejs with react then you can express a gltf declaratively. now you can remove, change, add parts, but also re-use it, without destroying the source data. this video gives an impression of that approach: https://twitter.com/akella/status/1341811097905586178

1 Like