Is it possible to move a gltf model independently from the scene it's defined in three.js?
In my current code, I have an updated gltf model and attempted to move it using KeyboardState.js. The OrbitControl.js is being used for control.
You can find the KeyboardState.js code here:
This is the loading function that I am currently using:
function loadGLTF(x,y,z,mesh,url){
var loader = new THREE.GLTFLoader();
// model
loader.load(
// resource URL
url,
// called when the resource is loaded
function ( gltf ) {
mesh = gltf.scene;
mesh.position.set(x,y,z);
scene.add(mesh);
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log(error);
console.log( 'An error happened' );
}
);
}
Here is the update function that handles keyboard input:
function update()
{
keyboard.update();
var moveDistance = 50 * clock.getDelta();
if ( keyboard.down("W") )
mesh.translateY( moveDistance );
if ( keyboard.down("S") )
mesh.translateY( -moveDistance );
if ( keyboard.down("A") ){
console.log("entered in A");
mesh.translateX( -moveDistance );
}
if ( keyboard.down("D") ){
console.log("entered in D");
mesh.translateX( moveDistance );
}
controls.update();
stats.update();
}
However, the issue arises where the object moves with the entire scene, rather than independently. It seems that this behavior does not occur when moving a simple sphere. Could it be due to the gltf file being inherently dependent on the scene structure compared to a standard THREE.SphereGeometry?