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

object parent-child mesh three.js
Daniel Smith picture Daniel Smith · Nov 2, 2011 · Viewed 49.7k times · Source

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

Answer

George Profenza picture George Profenza · Nov 2, 2011

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. I suggest starting with the canvas_geometry_hierarchy sample.

The interesting bits are:

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

Related questions

Checking if a key exists in a JavaScript object?

How do I check if a particular key exists in a JavaScript object or array? If a key doesn't exist, and I try to access it, will it return false? Or throw an error?

Read More
What is the most efficient way to deep clone an object in JavaScript?

What is the most efficient way to clone a JavaScript object? I've seen obj = eval(uneval(o)); being used, but that's non-standard and only supported by Firefox. I've done things like obj = JSON.parse(JSON.stringify(o)); but question the …

Read More
Converting an object to a string

How can I convert a JavaScript object into a string? Example: var o = {a:1, b:2} console.log(o) console.log('Item: ' + o) Output: Object { a=1, b=2} // very nice readable output :) Item: [object Object] // no idea what's inside :(

Read More