Grouping & Hierarchy

[00:00:00]
>> How do we actually get this moon to orbit around the Earth. And so to do that, we're gonna introduce the concept of grouping and hierarchy. And so right now everything is just being placed into the scene, and so if we wanted to rotate this moon around the Earth.

[00:00:17]
What we actually want to do is place this moon into an anchor sort of an empty object and then we're gonna rotate that object and that way it can actually orbit around the Earth. And so to do that, I'm gonna scroll up, we're gonna go to where the moon mesh is defined.

[00:00:35]
And just above that, we're gonna create a new object called moonGroup, we're gonna say moonGroup = to new THREE.Group. And so THREE.Group is a way of parenting objects just like we would with divs in HTML. If we wanted to create a parent we can use a div, but in three js, we use .Group.

[00:00:59]
So now we add the MoonMesh, instead of adding to the scene we added to the group, and so now you're not gonna see it anymore because the moonGroup is not added to the scene. So then we're gonna say scene.addmoonGroup to make sure that it's actually visible in the the scene.

[00:01:20]
And so if you've done all that it's gonna look just the same, and that's because we haven't actually rotated our moonGroup. So now what we can do, because we've got our moon inside of this anchor, we can just rotate the anchor and the moon should just rotate around our earth.

[00:01:37]
So you've to say, moonGroup.rotation.y=time. And now all of a sudden we've got this orbit, maybe it's too fast, you can work with the speed there. So this is kind of if we go to these demos, this is pretty much the first three demos. We have, creating mesh, we are creating multiple meshes and we have created groups, you can always go back to these for reference.

[00:02:03]
These are not using any sort of require statements or anything like that, cuz it's all running in glitch, but it's ultimately the same kind of concepts here.