Writing a JavaScript equation using three.js to orbit an object in a circular path around a central y-axis in a 3D space

Question

Writing a JavaScript equation using three.js to orbit an object in a circular path around a central y-axis in a 3D space

Currently, I am playing around with threeJS and have managed to position the camera to look at the origin point of a scene (0,0,0). My goal is to rotate the camera in a circular path around the y axis at a specific distance (radius) while keeping its focus on the origin. However, I am unsure about how to formulate the equation for this movement. Currently, I am simply rotating the object itself, but I would prefer to rotate the camera instead. Below is the code snippet I am using to move the mesh:

function checkRotation(){
    if (keyboard.pressed("left")){
        mesh.rotation.y += .05;
    }

    if (keyboard.pressed("right")){
        mesh.rotation.y -= .05;
    }
}

Here is an example of how I envision moving the camera:

camera.position.x = ??? (an equation for adjusting its x position) camera.position.z = ??? (an equation for adjusting its z position) camera.lookAt(mesh.position);

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

javascript math three.js 3d

Answer 1

Answer №1

If you want to manually adjust the camera position, you can do so by following these steps:

// Define the rotation angle as theta
var x = camera.position.x;
var z = camera.position.z;

camera.position.x = x * Math.cos(theta) + z * Math.sin(theta);
camera.position.z = z * Math.cos(theta) - x * Math.sin(theta);
camera.lookAt(mesh.position); // or camera.lookAt(0, 0, 0);

Refer to http://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions for the matrix representation of rotating around x, y, and z axes.

You may also consider modifying TrackballControls to function with keyboard inputs instead of mouse.

Check out the default Trackball behavior:

Please note that I have not yet tested this code as I am currently at work.

Answer 2

If you want to manually adjust the camera position, you can do so by following these steps:

// Define the rotation angle as theta
var x = camera.position.x;
var z = camera.position.z;

camera.position.x = x * Math.cos(theta) + z * Math.sin(theta);
camera.position.z = z * Math.cos(theta) - x * Math.sin(theta);
camera.lookAt(mesh.position); // or camera.lookAt(0, 0, 0);

Refer to http://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions for the matrix representation of rotating around x, y, and z axes.

You may also consider modifying TrackballControls to function with keyboard inputs instead of mouse.

Check out the default Trackball behavior:

Please note that I have not yet tested this code as I am currently at work.

Answer 3

Answer №2

Although this response may be tardy, those interested might benefit from exploring the OrbitControls feature included in the examples/js/controls folder of Three.js library. With autoRotate enabled, the mathematical calculations are handled effortlessly.

var controls = new THREE.OrbitControls(camera);
controls.autoRotate = true;
controls.autoRotateSpeed = [specify desired speed]

camera.lookAt(new THREE.Vector3(0,0,0));

In your update function called by requestAnimationFrame...

controls.update();

If manual camera control isn't desired, consider disabling it or extracting necessary code snippets accordingly.

Answer 4

Although this response may be tardy, those interested might benefit from exploring the OrbitControls feature included in the examples/js/controls folder of Three.js library. With autoRotate enabled, the mathematical calculations are handled effortlessly.

var controls = new THREE.OrbitControls(camera);
controls.autoRotate = true;
controls.autoRotateSpeed = [specify desired speed]

camera.lookAt(new THREE.Vector3(0,0,0));

In your update function called by requestAnimationFrame...

controls.update();

If manual camera control isn't desired, consider disabling it or extracting necessary code snippets accordingly.

Writing a JavaScript equation using three.js to orbit an object in a circular path around a central y-axis in a 3D space

Answer №1

Answer №2

Similar questions

Using (javascript:) within Href attributes

Having trouble getting three.js animation to load?

Using JS/AJAX to update a section of a webpage when a button is clicked

What is the method to reverse this calculation?

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Steps for permanently closing dismissible alerts in Bootstrap 4

What is the process for refreshing the component content in Angular 2?

Using asynchronous method calls to create arrays in ES6

React, connecting form inputs

Specify the dependencies in the package.json file to ensure that the React package designed for React v17 is compatible with React v18 as well

Issue with retrieving the positions of two numbers in an array

Where is the source of this ever-changing image?

Is there a way for me to retrieve the pageProbs that I have shared with a Component in _app.js?

How can I make an AJAX request in Rails 3 to retrieve an HTML page?

"Tricks to prompt the browser to refresh and load up-to-date content

Issues with Autofocus while Searching and Selecting from Dropdown menu

Customize the CSS for MaterialUI's TablePagination's MenuItem

Is there a way to identify a visitor's country and automatically direct them to a relevant website?

Saving props in React-select

Unable to invoke any fineUploader functions within a callback function