Using Three JS: Import an OBJ file, move it to the center of the scene, and rotate around it

Question

Using Three JS: Import an OBJ file, move it to the center of the scene, and rotate around it

I am trying to figure out how to load an OBJ file and translate its coordinates to the world origin (0,0,0) in order to make orbit controls function smoothly without using Pivot points.

My goal is to automatically translate random OBJ objects with different geometries/center points to the scene origin. I need a flexible solution that can work for any model, not just a hardcoded translate for a specific one.

This seems like a common scenario in Three JS (basic 3D object viewer), but surprisingly I haven't been able to find a definitive solution on Stack Overflow.

Many of the older answers I've come across use deprecated functions, so I'm hoping for a fresh answer even if there are similar solutions already available.

Some things I've experimented with:

The code snippet below helps fit the object nicely within the camera view, but it doesn't completely solve the translation/orbiting issue.

// Fit camera to object
var bBox = new THREE.Box3().setFromObject(scene);
var height = bBox.size().y;
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var pos = scene.position;

// Adjust position so object isn't too close or far
camera.position.set(pos.x, pos.y, dist * 0.5); 
camera.lookAt(pos);

I've read about using geometry.center() to translate an object's coordinates back to the origin, but the old THREE.GeometryUtils.center has been replaced by geometry.center() and I keep encountering errors when attempting to implement it.
Since geometry is now replaced by bufferGeometry when loading OBJs, I'm struggling to convert bufferGeometry into geometry to utilize the center() function. Do I need to place this in a loop within the object traversal > child loop? It all feels overly complex.
```
geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
```

My current code simply involves an OBJLoader:

      var objLoader = new THREE.OBJLoader();
      objLoader.setPath('assets/');
      objLoader.load('BasketballNet_Skull.obj', function (object) {

            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {

                   child.material = material;

                }

        } );
       scene.add(object);
});

(By the way, this is my first time posting a question on Stack Overflow, so please excuse any formatting or beginner mistakes)

javascript three.js 3d-model

Answer 1

Answer №1

Why not use the object.geometry.center() method here?

var objLoader = new THREE.OBJLoader();
      objLoader.setPath('assets/');
      objLoader.load('BasketballNet_Skull.obj', function (object) {


            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {

                   child.material = material;
                   child.geometry.center();

                }

        } );
       scene.add(object);

Answer 2

Why not use the object.geometry.center() method here?

var objLoader = new THREE.OBJLoader();
      objLoader.setPath('assets/');
      objLoader.load('BasketballNet_Skull.obj', function (object) {


            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {

                   child.material = material;
                   child.geometry.center();

                }

        } );
       scene.add(object);

Answer 3

Answer №2

After working through this, I've managed to make progress by utilizing some key functions from Meshviewer Master, an older Three JS object viewer. https://github.com/ideesculture/meshviewer I want to give full credit to Gautier Michelin for providing this valuable code https://github.com/gautiermichelin

Once the OBJ is loaded, there are three important steps to take:

1. Generating a Bounding Box based on the OBJ

    boundingbox = new THREE.BoundingBoxHelper(object, 0xff0000);

    boundingbox.update();

    sceneRadiusForCamera = Math.max(
        boundingbox.box.max.y - boundingbox.box.min.y,
        boundingbox.box.max.z - boundingbox.box.min.z,
        boundingbox.box.max.x - boundingbox.box.min.x
    )/2 * (1 + Math.sqrt(5)) ; // golden number to enhance display

2. Setting up the Camera according to the bounding box / scene radius

function showFront() {
if (objectCopy !== undefined) objectCopy.rotation.z =  0;
    controls.reset();
    camera.position.z = 0;
    camera.position.y = 0;
    camera.position.x = sceneRadiusForCamera;
    camera.lookAt(scene.position);
}

(the mesh viewer code also features functions for viewing left, top, etc)

3. Adjusting the position of the OBJ to the scene origin In any centering task, positioning involves dividing the width and height by 2

function resetObjectPosition(){
    boundingbox.update();

    size.x = boundingbox.box.max.x - boundingbox.box.min.x;
    size.y = boundingbox.box.max.y - boundingbox.box.min.y;
    size.z = boundingbox.box.max.z - boundingbox.box.min.z;

    // Repositioning object
    objectCopy.position.x = -boundingbox.box.min.x - size.x/2;
    objectCopy.position.y = -boundingbox.box.min.y - size.y/2;
    objectCopy.position.z = -boundingbox.box.min.z - size.z/2;
    boundingbox.update();
    if (objectCopy !== undefined) objectCopy.rotation.z =  0;

}

Answer 4

After working through this, I've managed to make progress by utilizing some key functions from Meshviewer Master, an older Three JS object viewer. https://github.com/ideesculture/meshviewer I want to give full credit to Gautier Michelin for providing this valuable code https://github.com/gautiermichelin

Once the OBJ is loaded, there are three important steps to take:

1. Generating a Bounding Box based on the OBJ

    boundingbox = new THREE.BoundingBoxHelper(object, 0xff0000);

    boundingbox.update();

    sceneRadiusForCamera = Math.max(
        boundingbox.box.max.y - boundingbox.box.min.y,
        boundingbox.box.max.z - boundingbox.box.min.z,
        boundingbox.box.max.x - boundingbox.box.min.x
    )/2 * (1 + Math.sqrt(5)) ; // golden number to enhance display

2. Setting up the Camera according to the bounding box / scene radius

function showFront() {
if (objectCopy !== undefined) objectCopy.rotation.z =  0;
    controls.reset();
    camera.position.z = 0;
    camera.position.y = 0;
    camera.position.x = sceneRadiusForCamera;
    camera.lookAt(scene.position);
}

(the mesh viewer code also features functions for viewing left, top, etc)

3. Adjusting the position of the OBJ to the scene origin In any centering task, positioning involves dividing the width and height by 2

function resetObjectPosition(){
    boundingbox.update();

    size.x = boundingbox.box.max.x - boundingbox.box.min.x;
    size.y = boundingbox.box.max.y - boundingbox.box.min.y;
    size.z = boundingbox.box.max.z - boundingbox.box.min.z;

    // Repositioning object
    objectCopy.position.x = -boundingbox.box.min.x - size.x/2;
    objectCopy.position.y = -boundingbox.box.min.y - size.y/2;
    objectCopy.position.z = -boundingbox.box.min.z - size.z/2;
    boundingbox.update();
    if (objectCopy !== undefined) objectCopy.rotation.z =  0;

}

Answer 5

Answer №3

Based on what you've mentioned, it seems like you're looking to have objects added to the scene appear at the center of the camera view. One common approach to achieving this is by incorporating camera controls into your scene, such as THREE.OrbitControls, and setting the target for the camera as the object you wish to focus on. By doing so, the desired object will be centered in the view, with the camera's rotation and movement being oriented around that specific object.

Answer 6

Based on what you've mentioned, it seems like you're looking to have objects added to the scene appear at the center of the camera view. One common approach to achieving this is by incorporating camera controls into your scene, such as THREE.OrbitControls, and setting the target for the camera as the object you wish to focus on. By doing so, the desired object will be centered in the view, with the camera's rotation and movement being oriented around that specific object.

Using Three JS: Import an OBJ file, move it to the center of the scene, and rotate around it

Answer №1

Answer №2

Answer №3

Similar questions

AngularJS $injector.unpr Error: Understanding and Resolving Common Dependency Injection

Ways to consistently press a particular button every single second

Converting JSON objects into datetime: A step-by-step guide

Utilizing a function as a value in React state (setState) compared to defining state with constructor in a class and utilizing a state object

Is there a way to input the Sno data into the database in ascending order?

Obtaining essential data while facing a redirect situation

Conceal and reveal feature for multiple dynamic identifiers simultaneously

When testing the Next.js App locally, the APIs function properly. However, issues arise when attempting to deploy the app

Using ObjectIDs in MongoDB may be successful, however, it may not function properly in Mongoose

The Runtime Error encountered in NEXTJS: TypeError - Unable to iterate over 'games' as it is not

Error message from Angular development server: Channel is reporting an error in handling the response. The UNK/SW_UNREACHABLE options

Guide on creating an Iframe in HTML with JavaScript

Bidirectional updates in AngularJS with CSS styling

I'm looking to integrate Jest in my React project with npm. How can I achieve

Dynamic links with Node Acl

Tips for simulating or monitoring a function call from a separate file

Error: Unable to access the 'length' property of an undefined value | Solving the challenge of finding the shortest word within a string | Codewars Problem

Executing a npm script (script.js) with custom arguments - a step-by-step guide

Changing the visual appearance of an alert in JavaScript and HTML

Begin counting when a particular div element is visible on the screen