Threejs - Lock Orbit Around Object

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

JavaScript

// the trick is calling camera.lookAt(position) in the render

var objects = []; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 1, 10000 );
//camera = new THREE.PerspectiveCamera (60, width/height, 1, 10000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera);
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(5,5,5));

var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);

var shapeCoords = [
	new THREE.Vector2(0,0),
  new THREE.Vector2(0,10),
  new THREE.Vector2(10,10),
  new THREE.Vector2(10,0),
]
var shape = new THREE.Shape(shapeCoords);
var shapeGeo = new THREE.ShapeGeometry(shape);
var shapeMesh = new THREE.Mesh(shapeGeo, new THREE.MeshBasicMaterial());
scene.add(shapeMesh);


var render = function () {
  requestAnimationFrame( render );
  
  // lock orbit around object
  camera.lookAt( scene.position );
  renderer.render( scene, camera );
};

function setToFullOrbit(orbitControl) {
  // how far you can orbit vertically
  //orbitControl.minPolarAngle = 0;
  //orbitControl.maxPolarAngle = Math.PI;

  // How far you can dolly in and out ( PerspectiveCamera only )
  orbitControl.minDistance = 0;
  orbitControl.maxDistance = Infinity;

  orbitControl.enableZoom = true; // Set to false to disable zooming
  orbitControl.zoomSpeed = 1.0;

  orbitControl.enableRotate = true;

  // allow keyboard arrows
  orbitControl.enableKeys = true;

  // Set to false to disable panning (ie vertical and horizontal translations)
  orbitControl.enablePan = true;
}

render();