Now that you have the scene essentials set up, you can start adding other objects to the scene. A 3D mesh is an object that you might want to add to your scene which represents a shape. A mesh is made up of a geometry and a material. Here you will be using the MeshBasicMaterial as a material to start with which is a material that is not affected by scene lighting. And as for geometry you will be building a BoxGeometry. You will also position the camera in a way that would make understanding the 3D nature of the scene a bit better. You will make use of the lookAt method on the camera to point the camera to the center of the scene.
- [Instructor] Let's create a simple rectangular object…to be able to validate that everything is working…in our scene.…3D objects in three.JS are made up of two parts.…A geometry that defines the shape of the object,…and the material that defines the surface quality,…the appearance of the object.…The combination of these two things…makes up a mesh in three.JS…which forms the 3D object.…Three.JS allows us to create some simple shapes…like a cube, or a sphere, in an easy manner.…To be able to create a cube,…we could use the "box geometry" function…by providing the dimensions, the width,…the height, and the depth.…
So I'm going to create a variable called "geometry,"…and I call the three.JS "box geometry" function…with the values…the width, the height, and the depth,…and now I need to create a material for this geometry…as well.…There are various kinds of materials…that we could use on geometries.…Materials determine how an object reacts…to the scene lighting.…We can use a material to make an object reflective,…rough, transparent, et cetera.…
- 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.