36

I'm attempting to understand how to group / link child meshes to a parent. I want to be able to:

  • drag the parent
  • rotate child elements relative to the parent
  • have parent rotation / translation do the right thing for children

My only background in this is using LSL in Second Life to manipulate linked prims in an object. I am thinking I dont want to merge meshes, because I want to maintain control (hover, texture, rotation, scaling, etc) over each child.

Any good tutorials on this out there? This is achieved with THREE.Object3D(), yes?

thanks, Daniel

Daniel Smith
  • 535
  • 1
  • 5
  • 10

2 Answers2

58

The dragging will be a bit more tricky because you need to work out where would the x/y positions of the mouse on the screen (screen space) will be in the 3D world, then you will need to cast a ray and check if it intersects the object you want to drag. I presume this will be a different question.

Setting object hierarchy is fairly simple. As you hinted, you will use a THREE.Object3D instance to nest objects into using it's add() method. The idea is that you will use a Mesh for objects that have geometry, and Object3D instances, where you simply need to nest elements.

group = new THREE.Object3D();//create an empty container
group.add( mesh );//add a mesh with geometry to it
scene.add( group );//when done, add the group to the scene

Update

As Nick Desaulniers and escapedcat point out, THREE.Group now provides the functionality you need. The included code example:

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );

scene.add( group );
George Profenza
  • 50,687
  • 19
  • 144
  • 218
  • So, can I add multiple instances of "mesh" this way? And can I reference them using the "gl_InstanceID" defined variable from my vertex shader? – Jack Jan 16 '14 at 18:06
  • 4
    Looks like now there's a THREE.Group object you can construct instead (THREE.WebGLRenderer 71). – Nick Desaulniers Aug 04 '15 at 17:39
  • http://stackoverflow.com/questions/10776495/is-there-a-container-type-object-in-three-js-to-transform-a-group-of-children – escapedcat Oct 21 '15 at 07:36
15

another way, because a mesh can be a parent too

meshParent.add(meshChild1);
meshParent.add(meshChild2);
scene.add(meshParent);

or

mesh1.add(mesh2);
mesh3.add(mesh1);
scene.add(mesh3);

mesh3 manipulates all meshes, mesh1 manipulates itself and mesh2, mesh2 manipulates itself

atom
  • 692
  • 7
  • 11