HTML + three.js -- How to load different gltf after user choose an option

Questions
1

Hello, everyone!

I’m struggling with a question that I believe is quite simple.

I have an HTML with a select element and some options:

Then, when the user choose one of those options, the correspondent model should be loaded in the screen.

const gltfloader = new GLTFLoader();
const url = ‘./assets/models/model_a.gltf’;
gltfloader.load(url, (gltf) => {
const root = gltf.scene;
scene.add(root);
});

I managed to load and display correctly one model in the scene. But I would like to know if there is a way to change the models in the scene when the user chooses another option in the HTML select element. image_1

I tried everything, I searched the web, but didn’t find any solution to this specific problem.

Please, help me and thanks in advance :slight_smile:

2

You basicly just need to make a function for your models which takes a path as parameter. And onchange of your selection, it runs the function

<select id="models" onchange="load(this.value)">
  <option value="path/to/model1">1</option>
  <option value="path/to/model2" selected="selected">2</option>
  <option value="path/to/model3">3</option>
</select>

const gltfloader = new GLTFLoader();
let root

function load(path) {
   
   gltfloader.load( path , (gltf) => { 
      
      // remove last model
      if(root && root.parent) root.parent.remove(root)

      // Add new model
      root = gltf.scene;
      scene.add(root);
   });
}
5 Likes
3

Depending on how many models the user can select, it is also recommended to traverse through the previous model and dispose all geometries, materials and textures. More information about this topic in the following guide:

2 Likes
4

Thank you very much for your generous help!

I’m getting an error on browser console saying: “load is not defined”

I guess this has something to do with modules, but in order to import three.js, I must use in my HTML.

So, how can I solve this problem?

5

Thank you!

6

When you typed “const root” on the second line, was it missing something? I guess that maybe something has to come after “const root”, and maybe this is why I’m having some trouble.

7

Try to change the const to let. Or you are trying to call the load function before its initialized. But to be sure, it would be nice if you could show some code or your whole html file

1 Like
8

Hi, Fluqz!

I’ll try it and let you know soon.

Thank you very much for your help and suggestions :slight_smile:

9

hello guys i hope some one help me to solve that problem i have brfv4 beyond reality face v4 and i want to make try on glasses by useing this method threejs 3d modules exactelly like glasses products in the store and make avialible customer to try any glasses type what i want to know is how controle 3d modules threejs from html home “index.html” when the customer select pictur he can try on the module 3d threejs

10

i tried to change const to let but not working show me to load is not defined

11

Sorry, you have to provide a bit more information. Best would be a live example or code and error
“load is not defined” could refer to that the load(...) function is not defined. Or the gltfLoader.load(...) function is not defined.