How can I control two object's rotation in realtime with quaternions

Questions
1

Hey Everyone,

I would like to copy the rotation of one object to another in realtime. I understand I can do this by copying the quaternion of object 1 to object 2. I’ve functionally gotten this to work when loading new objects in they will snap to the position of object 1. I would like to do this in realtime vs snapping. So as I rotate object 1 object 2 follows.
I understand that this needs to be added to the renderloop but I’m getting issues of object1.getObjectByName('forearm') is not a function.

Code:

function init() {

 const quaternion = new THREE.Quaternion();
}

 function loadObject1(modelPath, x = 0.1, y = 0.1, z = 0.1) {
        gltf_loader.load(modelPath, function (gltf) {
          scene.remove(object1);
        
         object1 = gltf.scene;

          gltf.scene.traverse(function(object) {
if(object.isMesh) object.frustumCulled = false;
});
               
          gltf.scene.scale.set(x, y, z);
          object1.position.set( 0, -2, 20)

        object1.getObjectByName('forearm').quaternion.copy(object2.getObjectByName('forearm').quaternion);
          
         

          scene.add(object1);
          
          
        });
      }

 function render() {
        

        renderer.render(scene, camera);
object1.getObjectByName('forearm').quaternion.copy(object2.getObjectByName('forearm').quaternion);
      }

     function loop() {
        requestAnimationFrame(loop);
           
        renderer.render(scene, camera);
      }
2

Solved: Had to declare globally

I needed to declare globally what the values are.

let object1, object2, object1part, object2part, quaternion;


function init() {
//removed quaternion from here and placed in renderloop
 //const quaternion = new THREE.Quaternion();
}

 function loadObject1(modelPath, x = 0.1, y = 0.1, z = 0.1) {
        gltf_loader.load(modelPath, function (gltf) {
          scene.remove(object1);
        
         object1 = gltf.scene;

          gltf.scene.traverse(function(object) {
if(object1.isMesh) object1.frustumCulled = false;
});
               
          gltf.scene.scale.set(x, y, z);
          object1.position.set( 0, -2, 20)

       //define the specific part
        object1part = object1.getObjectByName('forearm');
          
         

          scene.add(object1);
          
          
        });
      }

 function loadObject2(modelPath, x = 0.1, y = 0.1, z = 0.1) {
        gltf_loader.load(modelPath, function (gltf) {
          scene.remove(object2);
        
         object2 = gltf.scene;

          gltf.scene.traverse(function(object) {
if(object2.isMesh) object2.frustumCulled = false;
});
               
          gltf.scene.scale.set(x, y, z);
          object2.position.set( 0, -2, 20)

       //define the specific part
        object2part = object2.getObjectByName('forearm');
          
         

          scene.add(object2);
          
          
        });
      }

 function render() {
        

        renderer.render(scene, camera);

quaternion = new THREE.Quaternion();

//wait for model to load
if (object1) {
object1part.quaternion.copy(object2part.quaternion);
}
      }

     function loop() {
        requestAnimationFrame(loop);
           
        renderer.render(scene, camera);
      }

hope this helps someone :slight_smile: