how to function "position.set" method in Three.js?

Question

The center of boxMesh has default value(0,0,0).

I think when I use boxMesh.position.set(1,0,0), the center of boxMesh would be (1,0,0).
but it doesn't looks like (1,0,0), it looks like (2,0,0)

Doesn't one grid cell represent a size of 1? I don't have idea...Please explain how this feature works

enter image description here

// Mesh 
const box_geo = new THREE.BoxGeometry(1, 1, 1); // set box size 
const box_mat = new THREE.MeshStandardMaterial({ color: 'red' }); 
const boxMesh = new THREE.Mesh(box_geo, box_mat); 
boxMesh.position.set(1, 0, 0);
scene.add(boxMesh); 

// axesHelper
const axesHelper = new THREE.AxesHelper(50); 
scene.add(axesHelper);

// GridHelper 
const gridHelper = new THREE.GridHelper(5); 
scene.add(gridHelper);

A_____ A_______ · Accepted Answer · 2025-02-08 13:14:58Z

0

according to THREE.GridHelper docs:

const gridHelper = new THREE.GridHelper( size, divisions );
// size -- The size of the grid. Default is 10.
// divisions -- The number of divisions across the grid. Default is 10.

so you created grid with size = 5 and divisions = 10 (as default value) then step is size/divisions = 0.5 so everything works correctly, you moved box from (0,0,0) to (1,0,0)

answered Feb 8 at 13:14

A_____ A_______

4902 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to function "position.set" method in Three.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related