THREE.js TrackballControls如何更改旋转中心不在画布中心？

window.addEventListener("DOMContentLoaded", function () {
var scene, camera, renderer, controls, sphere, red, blue, black;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

geometry = new THREE.SphereGeometry(0.1);
material = new THREE.MeshBasicMaterial({
  color: 0xff0000
});
sphere1 = new THREE.Mesh(geometry, material);
scene.add(sphere1);

geometry = new THREE.SphereGeometry(0.1);
material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
sphere2 = new THREE.Mesh(geometry, material);
scene.add(sphere2);
sphere2.position.x = 1;

geometry = new THREE.SphereGeometry(0.1);
material = new THREE.MeshBasicMaterial({
  color: 0x0000ff
});
sphere3 = new THREE.Mesh(geometry, material);
scene.add(sphere3);
sphere3.position.y = 1;

controls = new THREE.TrackballControls(camera, renderer.domElement);

var ratio = window.innerWidth / window.innerHeight;
function loop() {
  controls.update();

  // First render takes up the full screen
  renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
  renderer.render(scene, camera);
  
  // Second render is only 100px tall
  renderer.setViewport(0, 0, 100 * ratio, 100);
  renderer.render(scene, camera);
  requestAnimationFrame(loop);
}

// camera.position.y = 1;
// controls.target.y = 1;
// scene.position.y = 1;

loop();

})

canvas {
  box-sizing: border-box;
  border: 1px solid red;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>