Multiple glTF models on one single webpage

Questions
,
1

HI,

First of all thank you for this very good website and examples.
I have 2 questions:

  1. I m working with your Webgl_loader exemple ( https://threejs.org/examples/#webgl_loader_gltf ) which is very good to implement on my website some 3D model done with Soldiworks.
    Everything is working fine wit one model per page but as soon as I want to show more than 1 model they all come on the same place ( although div object are different ) no way to separate them, could help to understand why ?

  2. when a web page have lot of info AND a glTF model visible then I can not scroll on the page as usual but just zooming the 3D model with the mouse. Any way to make the control of the 3D view only when the mouse is over the model ? To make the surfing experience more natural ?

Thank you again for your help
Regards

Laurent

2

Have you tried to set the position property of the loaded glTF assets to different values?

Are you using OrbitControls? If so, this is not possible without doing some custom modifications.

3

Hi @Mugen87

thank you for your answer.

  1. I do not use any .position but I have no information of the localisation in the windows (?)
    modelName is a variable
loader.load( modelName, function ( gltf ) {
						gltf.scene.traverse( function ( child ) {
							if ( child.isMesh ) {
								child.material.envMap = background;
								//child.geometry.center(); // center here
								}
							} );
						gltf.scene.scale.set(20,20,20) // scale here
						scene.add( gltf.scene );
						}, undefined, function ( e ) {
						console.error( e );
						} );

Where should I add it ? and position is more to give the localization within the active

  1. Yes indeed, ho ok then it s going to be more difficult then…

thank you !

4

Where should I add it ? and position is more to give the localization within the active

Try setting .position.set( 2, 0, 2 ) after your gltf.scene.scale.set(20,20,20) to check if you can use a random generator to place objects at different place.

  1. Yes indeed, ho ok then it s going to be more difficult then…

You could try adding all of these loaded objects in an array and then using raycaster = new THREE.Raycaster() raycaster to check if the objects are in the path and disabling OrbitControls then ( controls.enabled = false , where controls = new THREE.OrbitControls(...) ; Enabling it when the ray does’t intersect any object. I am not sure of the renderer performance this way though if you have several objects in the scene.

5

Hi Apraka16

thank you fro your feedback.
SO I did with gltf.scene.position.set( locModel, 0, 2 );
where locModel is a different number for each solid I want to see.
unfortunatly it s not exactly what I want to acheive.

Doing your proposal the different model are not all in the same place( means you see only one…) but the center of rotation is not any more within the model and make difficult to manipulate.

What I would like to do is to have 3 windows side by side with one 3D model in each one that I can move when the mouse is over.

  1. Raytracer :I still have to test it and understand how it works first and I will come back to you. But thank very much for your Help !

regards

6

Check out this example, as far as I can see this is what you want to achieve. I wasn’t sure whether it was earlier since there was no visual. Check the source code and customise to suit your needs.
https://threejs.org/examples/?q=mul#webgl_multiple_elements

7

HI

indeed ! it seems to be interesting for me, so let me check change the simple elements with my models and I will see what I can achieve thank you !!

1 Like