CODEWITHSUNDEEP
javascriptcamerarotationthree.js
Timothy Dalton
Timothy Dalton

Reputation: 1390

ThreeJS change rotation focus of Camera

I'm having difficulties wrapping my head around changing the THREEjs rotation. I basically want my camera to rotate around my object and not around the standard point (0,0,0 ?). The reason is that my Vector3 values are fairly large.. (x, z, y)

4312872.381146194 66.59563132658498 -25727937.924670007
4312475.124507734 66.59563132658498 -25728638.83021001 
4312004.77886603 133.19126265316996 -25728715.10960813 
4311292.30267081 133.19126265316996 -25728348.26316222
4310580.495996718 199.78689397975492 -25727972.97279594 
4310080.51032912 199.78689397975492 -25727395.118092548 
4309842.889229621 266.3825253063399 -25726583.881802954 
4309162.375115815 266.3825253063399 -25726174.132726204

I'm connecting the dots with lines, set the camera position to the bounding box and use OrbitalControls to move around. But the moving the camera isn't focused on my line geometry. How can I change the rotation behaviour? Can anyone put me on the right path?

var renderer,
    scene,
    camera,
    controls

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColorHex( 0xeeeeee, 1.0 );

scene = new THREE.Scene();

var material = new THREE.LineBasicMaterial({
    color: 0xff00cc,
    fog: true
});
var geometryL = new THREE.Geometry();

Afterwards I push my data to the Geometry...

var line = new THREE.Line(geometryL, material);


geometryL.computeBoundingBox();
var bBox = geometryL.boundingBox;
console.log(bBox);
var x_max = bBox.max.x;
var y_max = bBox.max.y;
var z_max = bBox.max.z;

scene.add( line );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 5000000);
camera.position.set( x_max*1.01, y_max*1.01, z_max*1.01 );  

controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', animate );

controls.rotateSpeed = 0.01;
controls.zoomSpeed = 0.01;
controls.panSpeed = 0.08;

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

controls.staticMoving = true;
controls.dynamicDampingFactor = 2;

animate();

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

Upvotes: 1

Views: 2228

Answers (1)

mat
mat

Reputation: 1378

Simply add the position of the object your camera should rotate around to the camera's position.

camera.position.set( x_max*1.01, y_max*1.01, z_max*1.01 ).add(YourObject.position.clone());

Also you could try change the target of the control:

controls.target = YourObject.position.clone();

I hope that I understood you right, because I'm currently unable to run your code.

Upvotes: 2

Related Questions