Three.js: How to Make a Camera Circle a Sphere?

Question

Three.js: How to Make a Camera Circle a Sphere?

How can we use Three.js and JavaScript/ WebGL to create a camera that orbits a sphere at a fixed height, with a fixed forward speed, and maintaining a fixed orientation in relation to the sphere? The user should only be able to steer the camera left and right.

Visualize an airplane connected by an invisible string to the center of a globe, skimming close to the ground and always keeping part of the sphere in view:

(I have code that currently rotates the sphere to create a flying effect for the camera, but the left and right steering feature has not been implemented yet. I'm considering repositioning the camera/ airplane instead of moving the sphere group before proceeding further.)

Any suggestions are appreciated! Thank you!

javascript three.js

Answer 1

Answer №1

Did you see how I implemented this concept in my Ludum Dare 23 project? I must admit, it turned out to be more intricate than I initially thought. Nevertheless, it wasn't overly challenging.

Let's assume you have the latitude and longitude of the camera, along with its distance from the sphere's center (referred to as radius), and you aim to generate a transformation matrix for the camera.

To optimize performance, create the following objects just once instead of recreating them in every game loop:

var rotationY = new Matrix4();
var rotationX = new Matrix4();
var translation = new Matrix4();
var matrix = new Matrix4();

Whenever the camera shifts, construct the matrix in the following manner:

rotationY.setRotationY(longitude);
rotationX.setRotationX(-latitude);
translation.setTranslation(0, 0, radius);
matrix.multiply(rotationY, rotationX).multiplySelf(translation);

Then, simply assign this camera matrix (assuming 'camera' is your camera object):

// Reset the camera matrix.
// Interestingly, Object3D doesn't provide a direct method to SET the matrix(?)
camera.matrix.identity();
camera.applyMatrix(matrix);

Answer 2

Did you see how I implemented this concept in my Ludum Dare 23 project? I must admit, it turned out to be more intricate than I initially thought. Nevertheless, it wasn't overly challenging.

Let's assume you have the latitude and longitude of the camera, along with its distance from the sphere's center (referred to as radius), and you aim to generate a transformation matrix for the camera.

To optimize performance, create the following objects just once instead of recreating them in every game loop:

var rotationY = new Matrix4();
var rotationX = new Matrix4();
var translation = new Matrix4();
var matrix = new Matrix4();

Whenever the camera shifts, construct the matrix in the following manner:

rotationY.setRotationY(longitude);
rotationX.setRotationX(-latitude);
translation.setTranslation(0, 0, radius);
matrix.multiply(rotationY, rotationX).multiplySelf(translation);

Then, simply assign this camera matrix (assuming 'camera' is your camera object):

// Reset the camera matrix.
// Interestingly, Object3D doesn't provide a direct method to SET the matrix(?)
camera.matrix.identity();
camera.applyMatrix(matrix);

Answer 3

Answer №2

Appreciation for the valuable input from Martin! I have successfully implemented a different approach that is working smoothly. Here is the revised method (Martin's original suggestion may also be ideal; a big shoutout to Lmg as well):

To start off, position the camera as a straight line above the sphere (with a higher y value, slightly exceeding the radius, which was 200 in my scenario); adjust the angle downwards:

camera.position.set(0, 210, 0);
camera.lookAt( new THREE.Vector3(0, 190, -50) );

Next, create an empty group (an Object3D) and place the camera inside:

camGroup = new THREE.Object3D();
camGroup.add(camera);
scene.add(camGroup);

Track the mouse position as a percentage relative to half of the screen:

var halfWidth = window.innerWidth / 2, halfHeight = window.innerHeight / 2;
app.mouseX = event.pageX - halfWidth;
app.mouseY = event.pageY - halfHeight;
app.mouseXPercent = Math.ceil( (app.mouseX / halfWidth) * 100 );
app.mouseYPercent = Math.ceil( (app.mouseY / halfHeight) * 100 );

During the animation loop, utilize this percentage for rotation, while simultaneously moving forward:

camGroup.matrix.rotateY(-app.mouseXPercent * .00025);
camGroup.matrix.rotateX(-.0025);
camGroup.rotation.getRotationFromMatrix(camGroup.matrix);

requestAnimationFrame(animate);
renderer.render(scene, camera);

Answer 4

Appreciation for the valuable input from Martin! I have successfully implemented a different approach that is working smoothly. Here is the revised method (Martin's original suggestion may also be ideal; a big shoutout to Lmg as well):

To start off, position the camera as a straight line above the sphere (with a higher y value, slightly exceeding the radius, which was 200 in my scenario); adjust the angle downwards:

camera.position.set(0, 210, 0);
camera.lookAt( new THREE.Vector3(0, 190, -50) );

Next, create an empty group (an Object3D) and place the camera inside:

camGroup = new THREE.Object3D();
camGroup.add(camera);
scene.add(camGroup);

Track the mouse position as a percentage relative to half of the screen:

var halfWidth = window.innerWidth / 2, halfHeight = window.innerHeight / 2;
app.mouseX = event.pageX - halfWidth;
app.mouseY = event.pageY - halfHeight;
app.mouseXPercent = Math.ceil( (app.mouseX / halfWidth) * 100 );
app.mouseYPercent = Math.ceil( (app.mouseY / halfHeight) * 100 );

During the animation loop, utilize this percentage for rotation, while simultaneously moving forward:

camGroup.matrix.rotateY(-app.mouseXPercent * .00025);
camGroup.matrix.rotateX(-.0025);
camGroup.rotation.getRotationFromMatrix(camGroup.matrix);

requestAnimationFrame(animate);
renderer.render(scene, camera);

Three.js: How to Make a Camera Circle a Sphere?

Answer №1

Answer №2

Similar questions

Trying to assign a value to 'currentStatus' using "this" on an undefined property

Web Browser cross-origin AJAX requests

Changing background color using jQuery ID selector

Utilizing Firefox and Selenium with Python: A guide to dynamically accessing HTML elements

Vue.js - when it comes to rounding off digits, I keep getting unexpected results

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

What is the process for choosing all items and then canceling the selection in a

Encountered a 'File is not defined' error in JavaScript when running code from the node.js command line

Unraveling the Mysteries of Node.js Application Logging

What assistance is available for building a JavaScript package that integrates and utilizes all necessary dependencies?

Is there a way to retrieve real-time information using momentjs in a Vue.js application without needing to refresh the

Alert-Enabled Random Number Generation Tool

Enhancing PHP function speed through pre-compilation with Ajax

Using Selenium and Python to download audio files that require JavaScript to load

Tween.js - Can you animate a variable using tweens?

Redirecting to another page with a simple link is not recommended

Optimal method for retrieving data from a JSON object using the object's ID with a map

Generate numerous div elements by utilizing ng-repeat

The PHP code encountered a syntax error due to an unexpected $EOF on the final empty line

The functionality of the JavaScript animated placeholder seems to be malfunctioning