I've been stuck on this for a couple of hours, now.
I'm looking to load in .GLTFs via a Drop Down Menu. Problem is that I cannot seem to get the "already selected" option to go away. So, I end up with two models superimposed, since the old one won't go away. Here's an image of what's happening: https://i.imgur.com/bxB1uFJ.png
I have a feeling that this is as simple as one "scene.traverse..." function. But, alas, can't seem to quite figure this one out. I copied what I assumed was the most pertinent lines of code below. Let me know if anything else (like, animate() loop?) is needed.
Thank you for helping a beginner.
// LOAD FROM DDL
var params = { Model: 'models/relic_progress_silver.glb' };
var ModelList = {
'Silver': 'models/relic_progress_silver.glb',
'Gold': 'models/relic_progress_gold.glb',
};
gui.add(params, 'Model', ModelList)
.onChange(function() { ModelLoad(); });
const Right_Rotate = new THREE.Object3D( );
function ModelLoad()
{
const Right_loader = new GLTFLoader();
Right_loader.load( params.Model,
function (gltf) {
// Perhaps a gltf.scene.traverse(function (child)) here?
const box = new THREE.Box3( ).setFromObject( gltf.scene );
const center = box.getCenter( new THREE.Vector3( ) );
const size = box.getSize( new THREE.Vector3( ) );
gltf.scene.position.set( -center.x, size.y / 2 - center.y, -center.z );
Right_Rotate.add( gltf.scene );
Right_Rotate.scale.set( Bond_Scale, Bond_Scale, Bond_Scale );
Right_Rotate.position.x = -1.0; // Bond X-coord
Right_Rotate.position.y = 0.6; // Bond Y-coord
Right_Rotate.position.z = 0.4; // Bond Z-coord
scene.add( Right_Rotate );
})
};