Learn to create a plane material. 2D objects in 3D don't have both of their sides displayed by default so you will make use of the side property on the material to have the plane display both of its sides. Then we will transform and rotate the plane. The important thing to remember there is that rotations in three.js use radians as the unit, not the degrees, so you should use values accordingly.
- [Instructor] Looking back at the main js file,…I'm noticing that the "get box" function takes…width, height, and depth as arguments,…but is not really making use of them.…So I'm going to change this,…and get rid of the hard coded values here,…and make use of the width, height, and depth values.…So that when we are calling this function,…we can actually parameterize the creation of the box.…And now, I'm going to add a plane to the screen as well.…For this purpose,…I can use the plane geometry object.…
Plane geometry requires us to pass the width,…and the height parameter…to set the size of the plane that we would like to create.…So to be able to do so,…I will create a dedicated function…for plane as well.…Just like how I created the "get box" function,…I'm going to create a "get plane" function,…using most of the parameters, or commands that I used here,…and name it, instead of "get box,"…"get plane,"…and I'm going to be calling the "plane geometry" function.…
Plane geometry have a different signature…than box geometry.…
- 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.