How to adjust the local coordinate system of the mesh?

Questions
1

I just want to adjust the local coordinate system position of the mesh as shown in the image below:
The local coordinate system of Figure 1 is at the center of the cube, and the local coordinate system of Figure 2 is at the bottom of the cube. Is there a ready-made API in three.js to adjust the position of the local coordinate system (like Figures 1 to 2)?
lALPJv8gU0reLpDNAXnNAbs_443_377
figure 1
lALPJxDjzILAJUPNAYHNAdE_465_385
figure 2

2

You can do this:
mesh.position.set(x, y, z);

3

Thank you for your answer, but what I want is to change the center position of the local coordinate system of mesh, not the position of the mesh. According to your approach, only the position of the mesh can be changed, but the transformation from Figure 1 to Figure 2 cannot be done. In fact, Figure 2 is realized by 3D software, but I am not sure whether this effect can be achieved directly with three.js.

4

Meshes don’t have an explicit local coordinate system API. Your geometry holds a bunch of points in space, the mesh is a wrapper that holds position/rotation/scale transformation matrix applied to the geometry while rendering. The transformation is relative to the mesh’s parent, which is by default the scene.

If you have a 1x1x1 cube and you want to achieve the effect on your picture you can:

  1. Shift the geometry up inside the mesh container, that will be a permanent transformation:
    geometry.translate(0, 0.5, 0);
  1. Put the mesh inside another object and apply a position shift to the inner mesh, then you can consider your outer mesh to be the new cube, something like:
    const newcube = new THREE.Object3D();
    newcube.add(cube);
    cube.position.set(0, 0.5, 0);
1 Like
5

Thanks, you solved my problem perfectly!