/MaterialsLightShadows

Practical work to get familiarized with the concepts of materials, light and shadows in 3D rendering

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

Project Work 3: Materials - Lighting - Shadows

Description

This exercise consists in exploring different properties and parameters of the materials and lights that are included in Three.js.

Instructions

You’ll require the live-server NPM package. Then, simply download and execute the live-server command inside the src/ directory. This will lead you to the starting menu, where you should be able to select the desired exercise. You can also view the project in this GitHub page.

Exercises

Exercise 1

This exercise consisted in creating a Cornell box with three meshes:

  • A cone with a lambertian material
  • A cylinder with a phong material
  • A sphere with a physical material

./screenshots/ex1.png

Exercise 2

This exercise consisted in utilize the UIL library to create a 2D GUI to manipulate the properties of the elements of the scene.

./screenshots/ex2.png

Exercise 2.2

This exercise consisted in doing the same thing as in Exercise 2 but utilizing a 3D GUI embedded in a plane in the scene.

./screenshots/ex2.2.png

Exercise 3

This exercise consisted in trying the different light sources that are included in Three.js, and modifying its properties through a GUI.

./screenshots/ex3.png

Exercise 4

This exercise consisted in modifying several properties of the materials of the objects included in the scene through a GUI.

./screenshots/ex4.png

Exercise 5

This exercise consisted in adding surface lighting to the colored walls of the scene to make them a secondary light source and simulating reflection.

./screenshots/ex5.png

Exercise 6

This exercises consisted in adding shadows to the scene and seeing the effect that several light sources and its properties have over them.

./screenshots/ex6.png

Exercise 7

This exercise consisted in transforming the scene in Exercise 6 into a virtual reality experience.