title: Three.js move as group
body: <p>It seems like this should be easy, but I have spent nearly a week on this trying every possible combination of how to drag multiple items as a group in Three.js. It started out simple, I used this example <a href="https://jsfiddle.net/mz7Lv9dt/1/" rel="nofollow noreferrer">https://jsfiddle.net/mz7Lv9dt/1/</a> to get the ball working. I thought I could just add some TextGeometry, which of course had some major API changes in the last couple releases rendering most examples obsolete. </p>
  
  <p>After finally getting it to work as a single line, I wanted to add in wordwrap and move it as a group, but I can't seem to do so.</p>
  
  <p>Here you can see it working just fine with the ball, but you can't drag the text <a href="https://jsfiddle.net/ajhalls/h05v48wd/" rel="nofollow noreferrer">https://jsfiddle.net/ajhalls/h05v48wd/</a></p>
  
  <p>By swapping around three lines of code (location line 93-99), I can get it to where you can drag the individual lines around, which you can see here: <a href="https://jsfiddle.net/ajhalls/t0e2se3x/" rel="nofollow noreferrer">https://jsfiddle.net/ajhalls/t0e2se3x/</a></p>
  
  <pre><code>function addText(text, fontSize, boundingWidth) {
      var wrapArray;
      wrapArray = text.wordwrap(10,2);
      var loader = new THREE.FontLoader();
      loader.load( 'https://cdn.coursesaver.com/three.js-74/examples/fonts/helvetiker_bold.typeface.js',
      function ( font ) {
      group = new THREE.Group();
      group.name = "infoTag";
        for (var i = 0; i &lt; wrapArray.length; i++) {
          var objectID=i;
          var line = wrapArray[objectID];
          var textGeo = new THREE.TextGeometry( line, {font: font,size: fontSize,height: 10,curveSegments: 12,bevelThickness: 0.02,bevelSize: 0.05,bevelEnabled: true});
            textGeo.computeBoundingBox();
            var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
            var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
            var mesh = new THREE.Mesh( textGeo, textMaterial );
            mesh.position.x = centerOffset +200;
            mesh.position.y = i*fontSize*-1+11;
            mesh.position.z = 280;
            mesh.castShadow = true;
            mesh.receiveShadow = true;
            mesh.geometry.center();
            mesh.lookAt(camera.position);
            mesh.name = i;
            group.add( mesh ); //this should work - comment out and swap for other two lines to see 
            scene.add(mesh); // this should work- comment out and swap for other two lines to see 
  
          //objects.push(mesh);//works on individual lines if you uncomment this 
          //scene.add(mesh); //works on individual lines if you uncomment this
        }
      objects.push( group ); // this should work- comment out and swap for other two lines to see 
  
      });
  
  }
  </code></pre>
  
  <p>That "should" be working according to everything I had researched over the last week. I had one moment where it was "working" but because of the size of the <code>group</code> object, the pivot points were wrong, the <code>setLength</code> function didn't work, and it flipped the object away from the camera. All in all it was a mess. </p>
  
  <p>I did try using 2d objects such as canvases and sprites, but for reasons detailed here <a href="https://stackoverflow.com/questions/36224266/three-js-textgeometry-wordwrap-drag-as-group">Three.js TextGeometry Wordwrap - drag as group</a> couldn't get it working.</p>
  
  <p>Please, someone help me!</p>