title: How can I attach another scene object to my animated, imported collada mesh?
body: <p>I have the following animation set up using Three.js:</p>
  
  <p><a href="http://frontier.lincoln.ac.uk/3d/development/Stage2/characters/man2.html" rel="nofollow">http://frontier.lincoln.ac.uk/3d/development/Stage2/characters/man2.html</a></p>
  
  <p>Please ignore the ropey weighted mesh, it is a quick re-mock up.  The real deal can be found here ( <a href="http://frontier.lincoln.ac.uk/3d/development/Stage2/characters/man.html" rel="nofollow">http://frontier.lincoln.ac.uk/3d/development/Stage2/characters/man.html</a> )</p>
  
  <p>Here's the problem.  See his red hat? (in the first URL).  That should be on his head.  So, I have created a dummy object (the tiny green cube on top of the characters head).  This is not part of the skin of the character and can be addressed as a child object of the skin.</p>
  
  <p>However, as the character mesh is at the mercy of the animation (morphTargetInfulences etc. - I haven't quite figured out how it all works yet) how do I get the hat to be placed where the dummy object is and have it move with it?</p>
  
  <p>Here is the business end of the code but feel free to route around the source of the above file:</p>
  
  <pre><code>if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  
          var container, stats;
  
          var camera, scene, renderer;
          var particleLight, pointLight;
          var dae, skin, skin2, headgear, test2;
  
          var faceMaterial = new THREE.MeshFaceMaterial();
          var loader = new THREE.JSONLoader();
          loader.load('../../../models/test_models/hat.js', function colladaReady( geometry ) {
              headgear = new THREE.Mesh(geometry, faceMaterial);
              loadMan();
          });
  
          function loadMan(){
  
              var loader = new THREE.ColladaLoader();
              loader.load( '../../../models/test_models/test4.DAE', function colladaReady( collada ) {
                  dae = collada.scene;
                  skin = collada.skins[0];
                  //this is the reference to the dummy object
                  skin2 = collada.skins[0].children[0];
                  dae.getChildByName( "node-CATRigHub001", true ).scale.set(0.1, 0.1, 0.1);
                  dae.position.y = -2
                  dae.scale.x = dae.scale.y = dae.scale.z = 0.1;
                  dae.rotation.x = -Math.PI/2;
                  //here is where i've added to the hat to the dummy object
                  skin2.add(headgear);
                  dae.updateMatrix();
  
                  init();
                  animate();
              } );
  
          }
  
          function init() {
  
              container = document.createElement( 'div' );
              document.body.appendChild( container );
  
              camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
              camera.position.set( 2, 2, 3 );
  
              scene = new THREE.Scene();
  
              scene.add( dae );
  
              particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xcccccc } ) );
              scene.add( particleLight );
  
              // Lights
  
              scene.add( new THREE.AmbientLight( 0xcccccc ) );
  
              var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xcccccc );
              directionalLight.position.x = Math.random() - 0.5;
              directionalLight.position.y = Math.random() - 0.5;
              directionalLight.position.z = Math.random() - 0.5;
              directionalLight.position.normalize();
              scene.add( directionalLight );
  
              pointLight = new THREE.PointLight( 0xcccccc, 3 );
              pointLight.position = particleLight.position;
              scene.add( pointLight );
  
              renderer = new THREE.WebGLRenderer();
              //renderer = new THREE.CanvasRenderer();
              renderer.setSize( window.innerWidth, window.innerHeight );
  
              container.appendChild( renderer.domElement );
  
              stats = new Stats();
              stats.domElement.style.position = 'absolute';
              stats.domElement.style.top = '0px';
              container.appendChild( stats.domElement );
  
          }
  
          var t = 0;
          function animate() {
  
              requestAnimationFrame( animate );
  
              if ( t &gt; 24 ) t = 0;
              if ( skin ) {
                  for ( var i = 0; i &lt; skin.morphTargetInfluences.length; i++ ) {
                      skin.morphTargetInfluences[ i ] = 0;
                      skin2.morphTargetInfluences[ i ] = 0;
                  }
  
                  skin.morphTargetInfluences[ Math.floor( t ) ] = 1;
                  skin2.morphTargetInfluences[ Math.floor( t ) ] = 1;
  
                  t += 0.5;
  
              }
  
              render();
              stats.update();
  
          }
  
          function render() {
  
              var timer = Date.now() * 0.0005;
  
              camera.position.x = Math.cos( timer ) * 10;
              camera.position.y = 2;
              camera.position.z = Math.sin( timer ) * 10;
  
              camera.lookAt( scene.position );
  
              particleLight.position.x = Math.sin( timer * 4 ) * 3009;
              particleLight.position.y = Math.cos( timer * 5 ) * 4000;
              particleLight.position.z = Math.cos( timer * 4 ) * 3009;
  
              renderer.render( scene, camera );
  
          }
  </code></pre>
  
  <p>Many thanks in advance!</p>