three.js set objects in local coordinate system of another object

Question

I was wondering if it is possible to place 3d objects within a local coordinate system of another object in three.js. so the placed objects should be relative to the "origin" object.

for example: i scan an image with the device camera (with expo AR) and want to place objects which got a fixed distance to the image. I think these positions are relative to the camera, isn't it?

             this.scene.add(chair)
            chair.position.set(  1, 0,  -5);

            this.scene.add(chair2)
            chair2.position.set( 1, 0 ,  -3);

Answer 1

I think what you're looking for is the THREE.Group object. It lets you nest elements in a group, so if you change the coordinates of the group, its children move with it. For instance:

// Create parent, set its pos to 0, 5, 0
var parent = new THREE.Group();
scene.add(parent);
parent.position.set(0, 5, 0);

// create child, and add to parent
var chair1 = new THREE.Mesh(geom, mat);
parent.add(chair1);
chair1.position.set(1, 0, 0);

// create child, and add to parent
var chair2 = new THREE.Mesh(geom, mat);
parent.add(chair2);
chair2.position.set(0, 1, 0);

• chair1 will be at [1, 5, 0] in global coordinates, but [1, 0, 0] in local space.
• chair2 will be at [0, 6, 0] in global coordinates, but [0, 1, 0] in local space.