Using Three.js to display a PerspectiveCamera with a visible bounding Sphere

Question

Using Three.js to display a PerspectiveCamera with a visible bounding Sphere

My challenge is to create a Scene that loads a single .obj file where the object is fully visible in the PerspectiveCamera upon scene initialization.

The field of view (FOV) is set at 60
The objects vary in size
TrackballControls are utilized for camera control

Despite attempting this specified solution, I encountered issues.

The provided code snippet is as follows:

FOV = 60

scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera( FOV, 500 / 350, 0.1, 10000 )
scene.add( camera )

objLoader = new THREE.OBJLoader();
objLoader.load('/airboat.obj', function (object) {
  scene.add( object )

  var boundingBox = new THREE.Box3();
  boundingBox.setFromObject( object );
  var sphere = boundingBox.getBoundingSphere()

  // not functioning correctly
  var center = boundingBox.getCenter();
  var size = boundingBox.getSize();
  var maxDim = Math.max( size.x, size.y, size.z );
  var cameraZ = maxDim / 2 / Math.tan(Math.PI * FOV / 360);
  camera.lookAt(center)
  camera.position.set( center.x, center.y, cameraZ );
  camera.updateProjectionMatrix();
})

UPDATE

For further reference, I have prepared this fiddle (please scroll down the JS code) where @Brakebein's solution typically works well, except for instances where the bounding box edges are not visible

javascript three.js

Answer 1

Answer №1

Shifting the camera target to the center of the sphere and adjusting the camera position in the opposite direction of the current line of sight by a calculated distance:

The line of sight is represented by the vector from camera.position to controls.target.

var current_los = new THREE.Vector3().subVectors(controls.target, camera.position);

To calculate the new target and position:

var new_pos     = new THREE.Vector3().addVectors(center, current_los.setLength(-cameraZ));
var new_target  = center;

Ensure that the camera.position is set before calling look At, as the function relies on the position and controls need to be updated:

var boundingBox = new THREE.Box3();
boundingBox.setFromObject( group );

var center = boundingBox.getCenter();
var size   = boundingBox.getSize();

var distance = Math.max( size.x, size.y, size.z );

var cameraZ = distance / 2 / Math.sin(Math.PI * FOV / 360);

var current_los = new THREE.Vector3().subVectors(controls.target, camera.position);
var new_pos     = new THREE.Vector3().addVectors(center, current_los.setLength(-cameraZ));
var new_target  = center; 

// copy values
camera.position.copy(new_pos);
camera.lookAt(center);

controls.target.copy(center);
controls.update();

For a larger image section, using the bounding sphere's diameter instead of the box's maximum length is recommended:

var distance = boundingBox.getBoundingSphere().radius * 2;

However, keep in mind that this may not achieve the desired result. Refer to the images below:

https://i.sstatic.net/TyJU0.png

For the desired outcome, consider using the sine function instead of tangent:

sin(FOV/2) == (maxDim/2) / cameraZ;

var cameraZ = maxDim / 2 / Math.sin(Math.PI * FOV / 360);

Answer 2

Shifting the camera target to the center of the sphere and adjusting the camera position in the opposite direction of the current line of sight by a calculated distance:

The line of sight is represented by the vector from camera.position to controls.target.

var current_los = new THREE.Vector3().subVectors(controls.target, camera.position);

To calculate the new target and position:

var new_pos     = new THREE.Vector3().addVectors(center, current_los.setLength(-cameraZ));
var new_target  = center;

Ensure that the camera.position is set before calling look At, as the function relies on the position and controls need to be updated:

var boundingBox = new THREE.Box3();
boundingBox.setFromObject( group );

var center = boundingBox.getCenter();
var size   = boundingBox.getSize();

var distance = Math.max( size.x, size.y, size.z );

var cameraZ = distance / 2 / Math.sin(Math.PI * FOV / 360);

var current_los = new THREE.Vector3().subVectors(controls.target, camera.position);
var new_pos     = new THREE.Vector3().addVectors(center, current_los.setLength(-cameraZ));
var new_target  = center; 

// copy values
camera.position.copy(new_pos);
camera.lookAt(center);

controls.target.copy(center);
controls.update();

For a larger image section, using the bounding sphere's diameter instead of the box's maximum length is recommended:

var distance = boundingBox.getBoundingSphere().radius * 2;

However, keep in mind that this may not achieve the desired result. Refer to the images below:

https://i.sstatic.net/TyJU0.png

For the desired outcome, consider using the sine function instead of tangent:

sin(FOV/2) == (maxDim/2) / cameraZ;

var cameraZ = maxDim / 2 / Math.sin(Math.PI * FOV / 360);

Answer 3

Answer №2

To ensure proper camera positioning, consider calling camera.lookAt(center) following the camera's initial position setup:

camera.position.set( center.x, center.y, cameraZ );
camera.lookAt(center);

Alternatively, you can explore utilizing the BoundingSphere method in your project to adjust objects within the view. This method is compatible with both OrbitControls and TrackballControls:

var sphere = boundingBox.getBoundingSphere();

// Calculate new distance between camera and the object's/sphere's center
var h = sphere.radius / Math.tan( camera.fov / 2 * THREE.Math.DEG2RAD );

// Determine the camera's direction
var dir = new THREE.Vector3().subVectors(camera.position, controls.target);

// Update the camera's position
var newPos = new THREE.Vector3().addVectors(sphere.center, dir.setLength(h));

// Update camera and controls positions
camera.position.copy(newPos);
controls.target.copy(sphere.center);

camera.lookAt(controls.target);

Hint: Ensure camera and controls are not positioned identically to enable proper direction calculation.

EDIT: After reviewing @Rabbid76's diagrams, it seems my initial solution aligns closely with the first one. To address potential objects or bounding box parts outside the viewing frustum, consider adjusting tan to sin:

var h = sphere.radius / Math.sin( camera.fov / 2 * THREE.Math.DEG2RAD );

Answer 4

To ensure proper camera positioning, consider calling camera.lookAt(center) following the camera's initial position setup:

camera.position.set( center.x, center.y, cameraZ );
camera.lookAt(center);

Alternatively, you can explore utilizing the BoundingSphere method in your project to adjust objects within the view. This method is compatible with both OrbitControls and TrackballControls:

var sphere = boundingBox.getBoundingSphere();

// Calculate new distance between camera and the object's/sphere's center
var h = sphere.radius / Math.tan( camera.fov / 2 * THREE.Math.DEG2RAD );

// Determine the camera's direction
var dir = new THREE.Vector3().subVectors(camera.position, controls.target);

// Update the camera's position
var newPos = new THREE.Vector3().addVectors(sphere.center, dir.setLength(h));

// Update camera and controls positions
camera.position.copy(newPos);
controls.target.copy(sphere.center);

camera.lookAt(controls.target);

Hint: Ensure camera and controls are not positioned identically to enable proper direction calculation.

EDIT: After reviewing @Rabbid76's diagrams, it seems my initial solution aligns closely with the first one. To address potential objects or bounding box parts outside the viewing frustum, consider adjusting tan to sin:

var h = sphere.radius / Math.sin( camera.fov / 2 * THREE.Math.DEG2RAD );

Answer 5

Answer №3

By loading the .obj file and then adjusting the camera to focus on the center of the object, you are instructing the camera to move to the precise center of the loaded object, instead of just loading it into view.

var center = boundingBox.getCenter(); //This retrieves the exact center of the box

What you should do is calculate the width and depth of the object you are loading and adjust the camera position accordingly.

For example:

camera.position.set( center.x - size.x, center.y - size.y, cameraZ - size.z );

The code above (not tested) will move the camera position back by the full size of the object, bringing it into view. You can also subtract an additional 'buffer' to have a better view of the object instead of being at the edge of its bounds.

I hope this explanation helps!

Answer 6

By loading the .obj file and then adjusting the camera to focus on the center of the object, you are instructing the camera to move to the precise center of the loaded object, instead of just loading it into view.

var center = boundingBox.getCenter(); //This retrieves the exact center of the box

What you should do is calculate the width and depth of the object you are loading and adjust the camera position accordingly.

For example:

camera.position.set( center.x - size.x, center.y - size.y, cameraZ - size.z );

The code above (not tested) will move the camera position back by the full size of the object, bringing it into view. You can also subtract an additional 'buffer' to have a better view of the object instead of being at the edge of its bounds.

I hope this explanation helps!

Using Three.js to display a PerspectiveCamera with a visible bounding Sphere

Answer №1

Answer №2

Answer №3

Similar questions

I must only assign the result to "value" if the condition of the map is true

Creating a Class in REACT

Standardizing URLs with ExpressJS router

Is it possible to customize text or images using the window.location method?

Trouble parsing JSON in Classic ASP

Steps for adding custom text/symbols from a button on the textAngular toolbar

What causes the difference in behavior of nodejs function arguments when explicitly called?

example of using relative jquery countdown.js

An effective way to prevent right-clicking on iframes across all websites

Anticipated a JavaScript module script, but the server returned a MIME type of text/html as well as text/css. No frameworks used, just pure JavaScript

Is there a way to assign a dynamic value to an input just once, and then retain the updated value without it changing again

Personalize the appearance of dynamically generated DIV elements

Rails - implementing ajax in partials causing an error: 'cannot find method render'

Constantly showing false values in AngularJS Firebase array objects

Tips for implementing a nested ng-repeat with nested JSON array data triggered by a button click

"Enhancing User Experience with JavaScript Double Click Feature in Three.js

Guide to handling multiple forms within a single template using Express

Receiving Array Data from JSON and Listing Results

Transforming various date formats into the en-US format of mm/dd/yyyy hh:mm:ss can be accomplished through JavaScript

Instead of receiving my custom JSON error message, Express is showing the server's default HTML error page when returning errors