Changing entire model / object

Questions
1

Hello guys,

I am pretty pretty new to babylon js wherefore I have a lot of questions. I plan to build a product configurator which enable the user to choose between different models, colors, material, …

I am already able to change the color, texture and size ob my object. Unfortunately I am not able to change the entire object. I can remove some meshes with setEnables(false) but I can’t figure out how to remove all mehes of one model.

At the first step of the configurator the user should be able to change the model type. That’s the whole point. It would be nice if all other options like color or material will be applied to the new model. It would be a great benefit for the user if he hasn’t to start from scratch after changing the model.

What do you suggest? To load multiple models initially and hide all models which are not currently selected or to load only the model which is in use?

How can I achieve that?

I appreciate your help. Thank you!

Best

2

Hello and welcome!

I think we can assume that your models will be loaded from gltf?

If yes, they will all have a root node that you can use to hide the entire hiearchy (with setEnabled(false))

3

Hello,

thank you.

I am just experimenting with some free models I found. I converted it from .obj to .babylon and load it with the assetmanager.

Is there a root node as well?

4

It depends :frowning: but it is easy to create one and attach all the loaded meshes to it

5

Good idea. Can you please state the function to accomplish that?

Hoe do I create a node and how can I attach the meshes to it?

Thanks.

6

You can create a transformNode:

var parent = new BABYLON.TransformNode();

then call mesh.setParent(parent) on all your meshes

7

Thanks for your help. Unfortunately another problem appeared.

I load the models with the assetmanager:

loadModels = () => {
this.loader = new AssetsManager(this.scene)
let loadModel = this.loader.addMeshTask("model", "", "/models/", "test.babylon")
loadModel.onSuccess = e => {
}
this.engine.runRenderLoop(() => { 
    this.scene.render()
})
return this.loader
}

this.loadModels().load()

How can I add second model? If I repeat the function for the second model, the first model clones itself and can’t be edited due to duplicated IDs. I load a model and add it to the scene by button click.

Best

8

Could you create a small repro in the PG, this would help a lot as I have some issues to fully understand the goal :frowning:

9

It’s not easy to replicate it because I am working with React. I simply put the code in PG so you can see it even it is not working. https://playground.babylonjs.com/#P2EPZI#7

I tried to add another object by button click with the following function:
addModel = model => {
let loadModel = this.loader.addMeshTask(model, “”, “/models/”, model + “.babylon”)
loadModel.onSuccess = e => {
console.log(“SUCCESS”)
}
}

The callback function won’t be triggered even the task is added to the assetmanager.

10

Could you not use the SceneLoader directly once the scene has been loaded ? it might simplify a lot your code.

13

Thanks. It works fine by using SceneLoader instead of the assestsmanager. Appreciated!

1 Like