What is the best way to implement TrackballControls with a dynamic target?

Question

What is the best way to implement TrackballControls with a dynamic target?

Is there a way to implement the three.js script TrackballControls on a moving object while still allowing the camera to zoom and rotate? For example, I want to track a moving planet with the camera while giving the user the freedom to zoom in and rotate around the planet. A basic jsfiddle example can be found here:

http://jsfiddle.net/mareid/8egUM/3/

(Please note that mouse control may not work correctly on jsfiddle).

I want to attach the camera to a red sphere so it moves with it, but still maintain the ability to zoom and rotate. I attempted to make the camera follow the sphere by adding certain lines to the render() function:

mouseControls.target = new THREE.Vector3(object.position);
camera.position.set(object.position.x,object.position.y,object.position.z+20);

However, this method interferes with the zoom and rotation functionalities of TrackballControls. I believe it should be possible to adjust the TrackballControls calculations to revolve around the center of the red sphere mathematically, but I'm struggling to achieve this. I have experimented with various vector additions to the position of the red sphere in the TrackballControls.js file with no success.

Any advice or assistance on this matter would be greatly appreciated. Thank you!

javascript three.js

Answer 1

Answer №1

If I were to suggest a control option, I would lean towards using OrbitControls over TrackballControls. While my recommendation is primarily focused on OrbitControls, the same concept may also be applicable to TrackballControls (though I have not reviewed its code recently).

When examining how OrbitControls functions, you will notice that it utilizes this.object for the camera and this.target for the camera's focal point. The calculations involve the vector (the difference between the two) for some operations. During panning, movement is applied to both positions, whereas only the camera is relocated during rotation. While this.pan is adjusted to shift the camera, it solely handles panning perpendicular to the vector from this.object to this.target due to the manner in which the panning vector is defined.

Nevertheless, if you subtract the vector from object.position to controls.target and assign it to controls.pan, it should transition to that object:

Revised example code:

Incorporate a function into OrbitControls.js that has access to its local pan variable:

function navigateTo( vector ) {
    // Create a copy of the provided vector to prevent modifications
    pan.add( vector.clone().sub( this.target ) );
}

Your customized code:

function updateAnimation() {

    requestAnimationFrame(updateAnimation);
    mouseControls.navigateTo( object.position ); // Utilize the new function
    mouseControls.update();
    render();

}

You may also wish to toggle mouseControls.noPan to true.

Answer 2

If I were to suggest a control option, I would lean towards using OrbitControls over TrackballControls. While my recommendation is primarily focused on OrbitControls, the same concept may also be applicable to TrackballControls (though I have not reviewed its code recently).

When examining how OrbitControls functions, you will notice that it utilizes this.object for the camera and this.target for the camera's focal point. The calculations involve the vector (the difference between the two) for some operations. During panning, movement is applied to both positions, whereas only the camera is relocated during rotation. While this.pan is adjusted to shift the camera, it solely handles panning perpendicular to the vector from this.object to this.target due to the manner in which the panning vector is defined.

Nevertheless, if you subtract the vector from object.position to controls.target and assign it to controls.pan, it should transition to that object:

Revised example code:

Incorporate a function into OrbitControls.js that has access to its local pan variable:

function navigateTo( vector ) {
    // Create a copy of the provided vector to prevent modifications
    pan.add( vector.clone().sub( this.target ) );
}

Your customized code:

function updateAnimation() {

    requestAnimationFrame(updateAnimation);
    mouseControls.navigateTo( object.position ); // Utilize the new function
    mouseControls.update();
    render();

}

You may also wish to toggle mouseControls.noPan to true.

What is the best way to implement TrackballControls with a dynamic target?

Answer №1

Similar questions

Issue with refreshing a material

Navigating through various locators with Protractor to fill an array

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

A-Frame: Struggling to accurately update the world position of a child object within the scene

The request to http://localhost:5000/error resulted in a 404 (Not Found) error message. I encountered difficulties connecting

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Directives for conditions if Internet Explorer is greater than or equal to 9, or if it is not

Converting (Geo)JSON data into an array of objects

Elevate the value within a function and refresh the said function

Leveraging the Wikia API

Transitioning to Firebase Authentication

Tips for concealing the URL in the address bar while using `<a href>` links

JavaScript function issue with automatic tabbing

Using the Facebook marketing API requires a valid Instagram account ID to be provided as a parameter

Creating a Form with a Custom Format in AngularJS

Running concurrent codes is not possible in Node.js serialport

What is the best way to show the user profile on a Forum?

Order of Rendering GLTF in THREE.js

Issue with text input field causing the Enter key to not create a new line

Utilizing Javascript and CSS for horizontal alignment from left to right