I need help understanding how to change the rotation in THREEjs. I want my camera to rotate around my object instead of the standard point (0,0,0) because my Vector3 values are 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 am drawing lines between points and trying to focus the camera on the line geometry using OrbitalControls. However, the rotation behavior is not what I expected. Can someone guide me in the right direction?
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();
I then add 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 );
};