Join Engin Arslan for an in-depth discussion in this video RectAreaLight, part of Learning 3D Graphics on the Web with Three.js.
- [Instructor] The problem with PointLights or SpotLights is that they are poor approximations of real-life light sources as they don't have any dimensions. Due to being dimensionless, the reflections, lighting, and shadows you get from these sources end up looking a bit fake. That's not the case when working with Rectangular Area Lights though. They are two-dimensional light sources, which makes them a bit more realistic compared to PointLight sources. Here's an example on the Three.js website that makes use of Rectangular Area Lights.
At the time of the creation of this tutorial, Rectangular Area Lights are still under active development for Three.js and are not ready for production use. But once they are ready, you should definitely check them out, as they can yield physically more accurate lighting results. Using this example, you can play with it's parameters to see how it works.
- 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.