Orbit controls + obj rotate

Questions
1

Hi all,

I’m pretty new to threejs so I apologize if this is simple

I would like to do the following

  • Load a obj file (can do this at present but not sure if I am using best practice)

  • I would like to be able to rotate the obj in the scene with a mouse so I added Orbit controls

  • I only want to rotate the obj file object around it’s own center

  • I would like to add buttons so that a user can select the front view, back view side view etc

Whats the best way to extend the following code to do the above?
Should I even be using orbit controls?
Should I be rotating the obj object or the box that surround it?

This is my code so far - forgive the mess as it’s a work in progress

I’ve also attached a sample obj file I am using for testing

Thanks in advance

'use strict'

  var object;// = new three.object();

  var scale = 0.7;

  var offset = 92;

  var axis = new THREE.Vector3( 0, 0.1, 0 ).normalize();

  var speed = 0.01;

  

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera( 75, (window.innerWidth*scale-offset) / (window.innerHeight*scale-offset), 0.1, 20000 );  

  var renderer = new THREE.WebGLRenderer( { antialias: true } );

  var container = document.createElement( 'div' );

  container.classList.add('filterDiv');

  container.classList.add('cad');

  

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

  var pointLight = new THREE.PointLight( 0xffffff, 0.4 );

  camera.add( pointLight );

 

  function initThreeJS() {

    // scene

    scene = new THREE.Scene(); 

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

    scene.add( ambientLight );

    scene.add( camera );

  

    renderer.setSize( window.innerWidth*scale-offset, window.innerHeight*scale-offset );

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

    renderer.setClearColor( 0xeeeeee, 1 );  

    

    //container.setAttribute("class","w3-container")

    container.setAttribute("style", "display:none")

    container.setAttribute("id", "objViewerID")

    //document.body.appendChild( container ); // this is just a div section that we are adding

    document.getElementById('regFormNewProgram').appendChild(container);

    container.appendChild( renderer.domElement ); // This is adding to this div section

    THREEx.WindowResize( renderer, camera ); // This renders

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

    controls.enableZoom = true;

    controls.enablePan = false;

        

    var light = new THREE.PointLight(0xeeeeee);

    light.position.set(0, 0, 10);    

    //scene.add(light);

    

    var lightAmb = new THREE.AmbientLight(0xff77ff);

    //scene.add(lightAmb);

    

    var loader = new THREE.OBJLoader();

    object = loader.parse(objtext);

    var box3 = new THREE.Box3();

    var size = new THREE.Vector3(); // create once and reuse

      

    var boxHelper = new THREE.BoxHelper( object );  

    box3.setFromObject( boxHelper );

    var cent = new THREE.Vector3();

    box3.getCenter(cent);

    console.log("x is "+cent.x);

    console.log("y is "+cent.y);

    console.log("z is "+cent.z);

    var boxSize = new THREE.Vector3();

    box3.getCenter(boxSize);

    console.log("size x is "+boxSize.x);

    console.log("Size y is "+boxSize.y);

    console.log("Size z is "+boxSize.z);

    if (Math.abs(boxSize.x) == 0)

      boxSize.x = 0.5;

    if (Math.abs(boxSize.y) == 0)

      boxSize.y = 0.5;

    if (Math.abs(boxSize.z) == 0)

      boxSize.z = 0.5;

      

    camera.position.set(0,0,Math.max(Math.abs(boxSize.x),Math.abs(boxSize.y),Math.abs(boxSize.z)));

    object.position.x = -cent.x;

    object.position.y = -cent.y;

    object.position.z = -cent.z;

    scene.add(object);

    animate();

    

    var axisHelper = new THREE.AxesHelper(50);

    scene.add(axisHelper);

  }

  

  function animate() {

  

    requestAnimationFrame( animate );

    

    camera.lookAt( scene.position );

    renderer.render( scene, camera );

    controls.update();     

 

  }  

function onWindowResize(){

  

    camera.aspect = (window.innerWidth*scale-offset)  / (window.innerHeight*scale-offset);

    renderer.setSize( (window.innerWidth*scale-offset), (window.innerHeight*scale-offset) );

    camera.updateProjectionMatrix();

}

SimpleRotate.obj (81.5 KB)