threejs .obj loader/zoom

by Thanos Saringelos

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

var container;

var camera, scene, renderer;

var mouseX = 0,
  mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var object;

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.z = 9;

  // scene

  scene = new THREE.Scene();

  var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
  scene.add(ambientLight);

  var pointLight = new THREE.PointLight(0xffffff, 0.8);
  camera.add(pointLight);
  scene.add(camera);

  var loader = new THREE.OBJLoader();
  loader.load('https://tfoj-demo.s3.eu-west-2.amazonaws.com/signature-military-nologo.obj', function(object) {

    object.position.y = -85;
    scene.add(object);


    var box = new THREE.Box3().setFromObject(object);
    var object3DWidth = box.max.x - box.min.x;
    var object3DHeight = box.max.y - box.min.y;
    var object3DDepth = box.max.z - box.min.z;

    // position camera to fill view according to bounding box size
    var size = Math.max(object3DHeight, object3DWidth);
    var dist = size / 2 / Math.tan(Math.PI * 40 / 360);

    camera.position.z = dist;
		//comment out above line to see pre-zoomed view

  });

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  document.addEventListener('mousemove', onDocumentMouseMove, false);

  //

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function onDocumentMouseMove(event) {

  mouseX = (event.clientX -...