三个JS：使用轨迹球控件在其轴上旋转对象

Question

在这里，我试图通过旋转照相机而不是对象来使用轨迹球将对象沿其轴旋转。我已经在三个JS中使用四元数理论，通过在轨迹球控制中借助摄像头旋转需要旋转对象的对象来旋转对象。提琴http://jsfiddle.net/xvzh7yqk/

   initScene = function() {

  var canvasWidth   = 500;
  var canvasHeight  = 500;
  var scene3d;
  init();
  animate();

  // init scene
  function init(){

    //new THREE.Scene
    scene3d = new THREE.Scene();

    //set the scene
    var canvas3d = $( '#canvas3d' );

    //new THREE.WebGLRenderer
    renderer = new THREE.WebGLRenderer( { canvas: canvas3d.get( 0 ), antialias: true } );
    renderer.setSize( canvasWidth, canvasHeight );
    renderer.setClearColor( 0x121224, 1 );

    //new THREE.PerspectiveCamera
    var camera = new THREE.PerspectiveCamera( 45, canvasWidth / canvasHeight, 0.1, 10000 );
    camera.name = 'camera';
    scene3d.add( camera );

    // TEST =============
    var geom = new THREE.BoxGeometry( 2, 2, 2 );
    var mat  = new THREE.MeshPhongMaterial( { color: 0xff0000, side: THREE.DoubleSide});
    var cube = new THREE.Mesh( geom, mat );
    var pos = new THREE.Vector3( 0, 0 ,0 );
    cube.position.set( pos.x, pos.y, pos.z );
    scene3d.add(cube);
    camera.position.set( pos.x, pos.y, pos.z+20 );
    camera.lookAt(pos);

    // new THREE.TrackballControls
    controls = new THREE.TrackballControls( camera, renderer.domElement );
    controls.dynamicDampingFactor = 0.5;
    controls.target.set( pos.x, pos.y, pos.z );

    //new THREE.AmbientLight (soft white light)
    var light   = new THREE.AmbientLight( 0x404040 );
    light.name  = 'ambientLight';
    scene3d.add( light );
    //new THREE.PointLight ( white light )
    var pointLight = new THREE.PointLight( 0xffffff, 0.8, 0 );
    camera.add( pointLight );
    render();
  }
  function animate() {
    requestId = window.requestAnimationFrame( animate );
    controls.update();
    render();
  }
  function render() {
    var camera = scene3d.getObjectByName( 'camera' );
    renderer.render( scene3d, camera );
  }
};

initScene();