Set the mesh position in Three.js to the coordinates 0,0,0

Question

Set the mesh position in Three.js to the coordinates 0,0,0

I'm currently working on positioning a basic cube at coordinates 0,0,0.

When I try to position the cube at 0,0,0, I end up with this outcome: https://i.sstatic.net/S2zom.png

However, this is not the desired result. Here is what I am aiming for: https://i.sstatic.net/lFLjq.png

The code I am using is quite simple:

const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
cube.position.x = 0;
cube.position.z = 0;
cube.position.y = 0;
cube.material = new THREE.MeshPhongMaterial({ color: 'green' });
this.scene.add(cube);

javascript three.js

Answer 1

Answer №1

To find the center of the mesh, consider that the BoxGeometry places the mesh with a range from (-width/2, -height/2, -depth/2) to (width/2, height/2, depth/2). Given a cube size of (1, 1, 1), the cube's minimum point is at (-0.5, -0.5, -0.5). To adjust the position of the cube to its center, you need to shift it by (0.5, 0.5, 0.5):

const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
cube.position.set(0.5, 0.5, 0.5)

Instead of manually modifying the mesh position, an alternative is to translate the geometry itself:

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1).translate(0.5, 0.5, 0.5);
const cube = new THREE.Mesh(cubeGeometry);

For a more universal approach, you can translate the mesh based on the minimum of its bounding box dimensions:

const geometry = new THREE.BoxGeometry(1, 1, 1);

// This method applies to any geometry
geometry.computeBoundingBox();
geometry.translate(
    -geometry.boundingBox.min.x,
    -geometry.boundingBox.min.y,
    -geometry.boundingBox.min.z);

Answer 2

To find the center of the mesh, consider that the BoxGeometry places the mesh with a range from (-width/2, -height/2, -depth/2) to (width/2, height/2, depth/2). Given a cube size of (1, 1, 1), the cube's minimum point is at (-0.5, -0.5, -0.5). To adjust the position of the cube to its center, you need to shift it by (0.5, 0.5, 0.5):

const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
cube.position.set(0.5, 0.5, 0.5)

Instead of manually modifying the mesh position, an alternative is to translate the geometry itself:

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1).translate(0.5, 0.5, 0.5);
const cube = new THREE.Mesh(cubeGeometry);

For a more universal approach, you can translate the mesh based on the minimum of its bounding box dimensions:

const geometry = new THREE.BoxGeometry(1, 1, 1);

// This method applies to any geometry
geometry.computeBoundingBox();
geometry.translate(
    -geometry.boundingBox.min.x,
    -geometry.boundingBox.min.y,
    -geometry.boundingBox.min.z);

Set the mesh position in Three.js to the coordinates 0,0,0

Answer №1

Similar questions

How can I create a custom checkbox in React Bootstrap without specifying an ID

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

How can we verify that the client has successfully completed the file download process?

Issue arises when attempting to render a component while utilizing window.location.pathname and window.location.hash in conjunction with a navigation bar

Incorporating an external SVG link into a React application

React component failing to update when props change

Tips on obtaining the element that was used as the event selector

What are the steps to update the title and creator details in the package.json file of an Openshift Node.js application?

The technique of using Javascript x to escape characters is

Having trouble accessing a CSV file with JQuery and FileContentResult?

Tips and tricks for retaining the collapsed state upon reloading Bootstrap 5

Issue with JQuery on Mobile Devices: Troubles with Dropdown Menu and Loading Function

Give drawn elements a touch of fuzziness and experiment with the color of the fragment shader

Ways to assign a CSS class specifically for images

Ways to create a rounded pane for Highchart's Solidgauge

Ensure that both the top row and leftmost column are fixed in a vertical header using JQuery DataTable

Error encountered when attempting to export a TypeScript class from an AngularJS module

Click to save image using jQuery

What is the best way to keep a button visible at all times and active without needing to be clicked?

Update the value in a nested object array by cross-referencing it with a second nested object array and inserting the object into the specified