To be able to understand the shadow behavior of the lights a bit better this video introduces more objects to the scene. To create a grid of boxes, you will make use of the three.js Group object, which is a nongeometric object used for organizing other objects together. You can think of it as an HTML div element that you might create for the sole purpose of wrapping other objects if you have a web development background. Or you can think of it corresponding to a folder in Photoshop or a null object in other 3D software. It serves the purpose of containing other objects.
- [Instructor] In this video, I will be creating…a scene with more objects before we start…looking at other light types.…That will help us understand the differences…between light types a little bit better.…In this scene, instead of having a single box,…I will have a grid of boxes.…To save us some time, I already built…a function called getBoxGrid…that allows us to create this grid.…You can find it in exercise files for this video.…Let me walk you through how I built this function.…Here, I have simply two nested for loops…that creates a desired amount of boxes…with the given separation value.…
The only thing that is new here…is the usage of the Three.js Group object.…A Group is a non-geometric object…used for organizing other objects together.…You can think of it as an HTML div element…that you might create for the sole purpose…of wrapping other objects if you have…a web development background…or you can think of it corresponding to a folder…in Photoshop or a null object in other 3D software.…It serves the purpose of containing other objects.…
- Building a simple scene
- Creating three.js 3D objects
- Adding light and shadows
- Animating with Tween.js
- Working with materials and textures
- Editing and importing geometries
- Creating a particle system
- Post-processing with effects and shaders
Skill Level Intermediate
Flash Professional: HTML5 Canvas and WebGLwith Joseph Labrecque1h 36m Intermediate
HTML5: Graphics and Animation with Canvaswith Joe Marini3h 7m Intermediate
1. Building a Simple Scene
2. Three.js Scene Object
5. Materials and Textures
Next steps1m 53s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.