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);

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);

• three.js

1 Answer 1

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)