0

I am modelling a room in three.js and I want to rotate the camera around the middle of the room. At the moment the camera only rotates around the origin. I am not sure if the camera needs to be moved or if the world needs to be translated. The coordinates system needs to stay on the positive side as I got to show various objects that will be streamed from a server.

I would also like to move the room around. I know I need to do some translation, but I cannot find how to do it. Some calls to translation just distorted the perspective of the room more than move it. 

var renderer,
scene,
camera,
controls;

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

document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1.0 );

scene = new THREE.Scene();



//build room
var room = buildRoom(500, 500, 500);
scene.add(room);

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(250, -500, 500); 

camera.up.set(0.16608561365563415,-0.25348683041890424,  1.5868711339427681);
camera.lookAt( new THREE.Vector3( 500, 500, 000 ) );


controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 0.8;
controls.panSpeed = 0.8;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

animate();

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
}

function buildRoom( xlen, ylen, zlen ) {
    var axes = new THREE.Object3D();
    //put x lines
    axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( xlen, 0, 0 ), 0xFF0000, false ) ); // +X
    axes.add( buildAxis( new THREE.Vector3( 0, ylen, 0 ), new THREE.Vector3( xlen, ylen, 0 ), 0xFF0000, false ) ); // parallel +X
    //y lines 
    axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, ylen, 0 ), 0x00FF00, false ) ); // +Y
    axes.add( buildAxis( new THREE.Vector3( xlen, 0, 0 ), new THREE.Vector3( xlen, ylen, 0 ), 0x00FF00, false ) ); // prallel+Y
    //z lines    //are four
    axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, zlen ), 0x0000FF, false ) ); // +Z
    axes.add( buildAxis( new THREE.Vector3( xlen, 0, 0 ), new THREE.Vector3( xlen, 0, zlen ), 0x0000FF, false ) ); // +Z
    axes.add( buildAxis( new THREE.Vector3( 0, ylen, 0 ), new THREE.Vector3( 0, ylen, zlen ), 0x0000FF, false ) ); // +Z
    axes.add( buildAxis( new THREE.Vector3( xlen, ylen, 0 ), new THREE.Vector3( xlen, ylen, zlen ), 0x0000FF, false ) ); // +Z
    return axes;
}


function buildAxis( src, dst, colorHex, dashed ) {
    var geom = new THREE.Geometry(),
        mat;

    if(dashed) {
        mat = new THREE.LineDashedMaterial({ linewidth: 3, color: colorHex, dashSize: 3, gapSize: 3 });
    } else {
        mat = new THREE.LineBasicMaterial({ linewidth: 3, color: colorHex });
    }

    geom.vertices.push( src.clone() );
    geom.vertices.push( dst.clone() );
    geom.computeLineDistances(); // This one is SUPER important, otherwise dashed lines will appear as simple plain lines

    var axis = new THREE.Line( geom, mat, THREE.LinePieces );

    return axis;
}
unixsnob
  • 1,685
  • 2
  • 19
  • 45
  • If you want to move the camera, you should just move the camera. I wouldn't translate objects in order to back out an implied camera movement. You have a camera whose position can be precisely set, and you can tell it what coordinates to look at. Have you tried something and it hasn't worked? – Bob Woodley Jan 05 '15 at 17:19
  • @Bob Woodley: Yes I have tried and I could not get it to work. However, I found the solution in http://stackoverflow.com/questions/8426822/rotate-camera-in-three-js-with-mouse it's the TrackballControls target which was messing everything. By default it seems to look at the origin. – unixsnob Jan 05 '15 at 17:28
  • Look at http://stackoverflow.com/questions/8426822/rotate-camera-in-three-js-with-mouse – unixsnob Jan 05 '15 at 17:28

0 Answers0