three.js - mesh group example? (THREE.Object3D() advanced)

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

Solution

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