Add a Cube to Your TresJS 3D Scene

Alvaro Saburido
InstructorAlvaro Saburido
Share this video with your friends

Social Share Links

Send Tweet
Published 6 months ago
Updated a week ago

Learn how to add a 3D cube to your TresJS scene using the TresMeshComponent, TresBoxGeometry, and TresMeshNormalMaterial components.

This lesson shows TresJS's declarative approach that makes 3D rendering simpler than using plain Three.js.

[00:01] Next step is to add a 3 d cube into our scene. To do so, we're gonna add a trace mesh component. And inside of it, we're gonna pass 2 components via slots. We're gonna use a trace box geometry [00:21] and a trace mesh normal material. If we hit save, we can see now in the browser that has rendered a cube of 1 by 1 by 1 that has a material that visually represent each one of the faces with a different color. That's the mesh normal material. [00:42] But let's dive a little bit on how does this work. So I like to use analogy between HTML CSS with the 3 d object, where the box geometry defines the structure of the cube, such as, like, the width, the height, where the vertices are. This will be like [01:02] the HTML structure. And then we have the material. The material will act as the CSS containing all the different properties, like the color, shininess, even reflections, normal materials, and such, of the object itself. We [01:22] can initialize our instance for the geometry with different arguments. To do so, we're gonna use the arc's property, and this accepts an array. If we check the TypeScript, it accepts an array which the first number is the width, then the height, and the depth. So [01:42] we can create a different shape of cube, more like a rectangle, if we pass these arguments. If we hit save, now we can see that our box geometry has a width of 1. It has a height of 2, and it's 3 units on that. How does this [02:01] work under the hood? If we were using plain 3 gs, it will look something like this, where we are creating any scene using the constructor of the 3 g s name scape and then creating the geometry by using the box geometry like this. Notice that the constructor parameters are exactly the same as [02:21] we are passing to the arguments property on the component. Then we will need to create a mesh with new tree mesh and pass the geometry and material into it. Last but not least, we will need to add the object into the scene. You can now notice [02:41] how easy and declarative is our Trace. Js version, where we are using view components to do exactly the same as we will do in 3 g s, but we let the Trace Canvas handle the whole thing.

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today