Assignment 5A: 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).
  • Your job is going to be like that. Boss: "Go do X". You: "How do I do that?" Boss:"Don't bother me, just do it".

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.

There is an editor 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 (.obj file).
• 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.
• Orbit Controls to navigate the scene with the mouse.

Do something awesome

Apart from these required features above, you need to build an interesting awesome world. This is intentionally poorly-defined. The graders cant tell you in advance if what you are proposing is good enough. Try to make us say 'wow!'. Maybe you have a very detailed world. Maybe you have a game. Maybe you have a simply world with one really technically challenging component implemented.

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.

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.

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.

This tutorial explains how to load a custom 3D model and map textures onto it. The author provides an example using the 3D Modeling Software called Blender. You don't necessarily have to install and use Blender for this part of this assignment. We recommend that you find free 3D models online with the .obj extension. If you are comfortable modeling with Blender (or other tools), feel free to design your own models.

4. Add controls to your camera

https://threejs.org/manual/#en/cameras 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.

5. Add extra light sources

https://threejs.org/manual/#en/lights 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.

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. Awesomeness

Yep. 4 points with no directions of what to do besides "Impress us!"

Resources

• Free 3D models:   
  • Poly Pizza: https://poly.pizza/ Links to an external site.
  • Free 3D: https://free3d.com/ Links to an external site.
• Hosting/Setup Tutorials
  • No Node/Vite (RECOMMENDED): https://drive.google.com/file/d/1HZAaTBKiYrWyWn_2fAoaGQF4B3zhf5RG/view?usp=sharing Links to an external site.
  • With Node/Vite: https://drive.google.com/file/d/1Ul8TYKrruHOSgSE4YnxBqJxhbzLVTE__/view?usp=sharing Links to an external site.
    • Additionally, note that if your app has multiple pages, Vite by default will only build index.html. Refer to here on how to fix this: https://vitejs.dev/guide/build#multi-page-app

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_0.zip" (e.g. "Lucas_Ferreira_Assignment_0.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.