Assignment 5: Exploring a High-Level Graphics Library (Medium)

Objectives:

• Review all the topics covered in this course.
• Its a different library, so you get to make sure you understand the concepts.
• Learn to use a a high-level 3D library.
• If you ever want to create graphics after this class, you will be wanting a high level library, not raw WebGL.
• Practice learning new skills directly from web resources (no textbook, no help video).
• Hopefully 10 weeks of class has provided enough graphics background to make this easy.

Introduction:

You will re-create your first-person exploration application using Three.js: a high-level Javascript 3D library. Three.js  makes it much easier to create complex 3D applications, since it supports scenes, lights, shadows, materials, textures, 3D math, all things that you'd have to implement yourself if you were to use WebGL directly. Your application will be slightly more complex than the one you created so far, but with Three.js it will be considerably easier to achieve this goal.

Guide on how to set up Three.js: link Links to an external site.
There is an editor Links to an external site.

Links to an external site. Links to an external site. provided by the three.js website, which is a GUI for creating 3D scenes without writing codes. You can play with this tool to learn more about the features and capabilities of three.js. However, 3D scenes created using the three.js editor without writing codes will not fulfill the requirements of this assignment.

Your application is going to be a 3D scene (a world) that must have the following:

• At least 20 3D primary shapes such as cubes, spheres, cylinder, etc. 
• At least one of them should be textured.
• At least one of them should be animated.
• You used at least three different kinds.
• At least one textured 3D model (.glb (recommended), .gltf or a .obj with an .mtl loaded)
• At least three different light sources. Three.js has many types of light, use at least three different ones:
• Ambient Light.
• Directional Light
• HemisphereLight
• Point Light.
• Spot Light.
• RectArea Light
• A textured skybox.
• A camera with perspective projection.
• Controls to navigate the scene with the mouse.
• Wow Point

Please include a note on the site or as a comment on your submission with regards to what you did for this part!

Instructions

This assignment is structured as a list of tutorials that you have to follow in order to implement specific required features of the 3D scene you are creating.

1. Create a simple Three.js scene

https://threejs.org/manual/#en/fundamentals Links to an external site. Links to an external site.

This first tutorial will get you started with the Three.js library. It will introduce you to the fundamentals of Three.js guiding you through the creation of your first scene. This scene will have multiple animated cubes, a directional light source and a camera with perspective projection. 

2. Add textures

https://threejs.org/manual/#en/textures Links to an external site. Links to an external site.

This next tutorial will guide you through loading and mapping textured onto a cube. It will discuss how to load the same texture onto the 6 faces of the cube as well as mapping 6 different textures, one on each face of the cube. This tutorial also discuss texture filtering: minification, magnification, mipmapping, etc. 

3. Add a custom 3D model

https://threejs.org/manual/#en/load-obj Links to an external site. Links to an external site. Links to an external site.

This tutorial explains how to load a custom 3D .obj model and map textures onto it.

https://threejs.org/docs/#examples/en/loaders/GLTFLoader Links to an external site.

Alternatively, you can utilize this GLTF loader to load models with the .glb or .gltf extension.

We recommend that you find free 3D models online with the .obj or .glb extension. If you're comfortable with modeling in Blender you are also free to use your own models.

4. Add controls to your camera

https://threejs.org/manual/#en/cameras Links to an external site. Links to an external site.

This tutorial goes over different types of cameras in Three.js and it explains how to use the OrbitControl class, which implements default camera movements using the mouse.

You may also use any other form of controls, such as

https://threejs.org/docs/#examples/en/controls/FlyControls Links to an external site.
https://threejs.org/docs/?q=controls#examples/en/controls/FirstPersonControls Links to an external site.

5. Add extra light sources

https://threejs.org/manual/#en/lights Links to an external site. Links to an external site.

This tutorial goes over different types of light sources in Three.js. Select three different light sources and add them into your scene.

6. Add a skybox

https://threejs.org/manual/#en/backgrounds Links to an external site. Links to an external site.

A skybox is just a box with the sky draw on it. We place the camera inside the box and it looks like there is a sky in the background. This tutorial explains how to implement a skybox with a cubemap: a special kind of texture that has 6 sides, the sides of a cube. 

7. Add more 3D objects to your scene

At this point you should have a scene with a few textured cubes, one textured custom 3D object, a camera with orbit controls, a couple of light sources and a skybox. Now, be creative and make an interesting (meaningful) scene by adding more 3D objects into it. Make sure you have at least 20 3D primary shapes (cubes, spheres, cylinders, etc) but don't limit yourself by this number. Also, feel free to add more 3D custom models.

8. Wow (1.5 Points)

Add an extra feature of your choosing to your project! This is left open-ended on purpose, but a few examples include making a small (very very simple) game, making your world visually impressive, or utilizing other features within Three.js that are of similar complexity. It should indicate that you put a degree of effort into making your scene have some novelty to it!

Please include a note on the site or as a comment on your submission with regards to what you did for this part!

Resources

• Free 3D models:   
• Poly Pizza: https://poly.pizza/ Links to an external site.

• • Links to an external site.Free 3D: https://free3d.com/ Links to an external site.

What to Turn in:

1. Canvas Submission

Zip your entire project and submit it to Canvas under the appropriate assignment. Name your zip file "[FirstName]_[LastName]_Assignment_5.zip" (e.g. "Lucas_Ferreira_Assignment_5.zip").

2. Live Hosted Submission

You will upload your submission to GitHub Pages (or any other service of your choosing). If you use GitHub Pages, click here to learn how to set it up.

WHEN SUBMITTING YOUR PROJECT ON CANVAS, PLACE YOUR SITE LINK AS A COMMENT OF THE SUBMISSION.

Read the Submission Guide for further explanation on how to submit your assignment.