Adjusting the camera's rotation focus in ThreeJS

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 );
};

Answer №1

To achieve the desired effect of camera rotation, you simply need to specify the position around which the camera should rotate relative to its current position.

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

Additionally, consider updating the control's target for smoother functionality:

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

I trust that I have interpreted your requirements accurately, as I am presently unable to execute your provided code sample.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of Inettuts within JavaScript seems to malfunction whenever I attempt to reposition the div

I developed a widget framework using inettuts and integrated database functionalities with ajax in asp.net and sqlserver. Widgets are dynamically loaded based on user data from the database, but I encountered an issue when trying to move a widget - the J ...

The requested resource for deletion could not be found

I'm having trouble deleting a document in Mongodb and I keep getting the "cannot get delete" error delete route router.delete("/delete/:id",(req,res)=>{ filmModel.deleteOne({_id:req.params.id}) .then(()=>{ res.redirect( ...

Mastering EmberJS 2.7: The Definitive Guide to Binding the 'disabled' Attribute for Buttons

Here is an official guide explaining how to bind a boolean property to the disabled attribute of an HTML element. However, it references a controller in the process. I have a button that, when clicked, transitions the route (it must be a button and not a ...

Load a Javascript file from the local server

My website is encountering a problem when trying to load a script from a localhost server. The error message displayed is PROTOCOL ERROR: https://localhost:4200/script/test.js net::ERR_SSL_PROTOCOL_ERROR Here is the code snippet causing the issue: <!DO ...

Is it possible to adjust the speed of the animate() function in three.js using an HTML range slider?

I want to adjust the update speed of the animate() using a range slider like this: <input type="range" id="speedSlider" min="0" max="10" step="0.1" style="width: 50px;"> In my case, I have ...

What steps should I take to make sure that the types of React props are accurately assigned?

Dealing with large datasets in a component can be challenging, but I have found a solution by creating a Proxy wrapper around arrays for repeated operations such as sorting. I am looking to ensure that when the data prop is passed into my component as an ...

Integrating HTML elements based on scroll movement

Is there a way to dynamically add a new Bootstrap row to my HTML code when scrolling the mouse downward using JavaScript? <div class="row"> <div class="col-md-6 col-xs-6" > <div> <img src="img/picture1.jpg" a ...

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Currently, I am working through the React tutorial and have encountered a question regarding their starter code: class Square extends React.Component { render() { return ( <button className="square"> {/* TODO */} </butto ...

Interactive Javascript dropdown helper on change

I am currently experimenting with a JavaScript onchange method, as I am relatively new to coding. My goal is that when I select "ID Type," the input text should change to "passport," and when I select "South African ID," the input should switch to "South ...

My desire is for every circle to shift consecutively at various intervals using Javascript

I'm looking to draw circles in a sequential manner. I am trying to create an aimbooster game similar to . Instead of drawing all the circles at once, I want each circle to appear after a few seconds. The circles I've created currently do not g ...

Using Node.js to retrieve JSON objects from an API call with node-postgres

After carefully following the instructions on connecting to my postgres table using async/await provided at , I have successfully set up routes to retrieve and display user data. By accessing localhost:3000/users/1, the browser displays the JSON string fo ...

Iterating through a collection of objects, triggering a promise for each object and recording its completion

I have encountered a challenge where I need to iterate through an array of objects obtained from a promise, and for each object in the array, I must invoke another promise. After all these promises are executed, I want to display "DONE" on the console. Is ...

Troubleshooting Vue 3 Computed Property Not Updating

I'm currently facing a challenge while developing a login form using Vue 3. I am having difficulty in getting the state to update 'realtime' or computed. When attempting to login a user from the template, the code looks like this: <button ...

Struggling with displaying MySQL data in JSON format using Highcharts

Currently, I am attempting to display data from a PHP file on an area graph by using the example found here. Initially, all the data was commented out before being passed to the array. Now, my focus is solely on displaying one portion of the data. I suspec ...

Margins are added to cards on the right side

Looking for some help to improve the display of three cards in a grid. The card media has a max-width of 345px, but this is causing excessive margin-right space and making the styling look poorly. Any suggestions on how to eliminate this extra margin? If ...

Error: Custom Service is behaving unpredictably

My latest project involves creating a customized service. While the service function is returning data as expected, I encounter an issue when calling it in the controller - it returns 'undefined'. Service: var toDoListServices = angular.module( ...

Eliminate an item from an array of objects utilizing a specific key

Here is the JSON data provided: var data= { 'A' : { 'Total' : 123, 'Cricket' : 76, 'Football' : 12, 'Hockey' : 1, 'None' : 10 }, 'B&ap ...

Implement a customized toString method for components in ReactJS

Looking to modify the toString method of a class component in reactjs? Check out the code snippet below class C1 extends React.Component{ render(){ return ( <div> {C2.toString()} </div> ) } } class C2 extend ...

Efficiently managing desktop and mobile pages while implementing lazy loading in Angular

I am aiming to differentiate the desktop and mobile pages. The rationale is that the user experience flow for the desktop page involves "scrolling to section", while for the mobile page it entails "navigating to the next section." The issue at hand: Desk ...

Utilizing conditional statements and time to dynamically alter the class of an object

I need to change the class of an object based on the time, with two classes available: recommendedspot and notrecommended. The code I've written so far is not displaying the image correctly. Can someone help me troubleshoot this issue? Here is my cur ...