Computer Graphics Project - Interactive Scenes using Three.js

Introduction

The Computer Graphics Project focuses on creating interactive scenes using the Three.js library. The project consists of multiple parts, each addressing different aspects of computer graphics, including scene creation, camera manipulation, materials, lighting, and textures.

Project Overview

This project aims to explore various concepts in computer graphics, including creating interactive scenes, applying materials, setting up lighting, and implementing dynamic features. Each part of the project builds upon the previous one, gradually introducing more complexity and functionality.

Features

The project showcases the following features:

• Scene creation and manipulation
• Camera control and switching
• Material application and shading
• Lighting effects, including dynamic lights
• Texture mapping and interactive objects

Technology Stack

• Three.js: JavaScript library for 3D graphics
• HTML/CSS: Web technologies for scene rendering and styling
• JavaScript: Programming language for implementing interactive behaviors

Part 1: Simple Interactive Scene with Fixed Camera

In this part, a simple scene is created with basic elements. The scene includes a fixed camera and interactive chair movement controlled by arrow keys.

Part 2: Interactive Scene with Mobile Camera and Collisions

This part introduces the concept of a mobile camera and collision detection. The scene includes a field with walls and balls that can move autonomously while avoiding collisions.

Part 3: Interactive Scene with Materials and Lighting

Materials, lighting, and shading are explored in this part. The scene includes an airplane composed of different surfaces with distinct materials. A directional light representing the sun and multiple point lights are used to illuminate the scene.

Part 4: Interactive Scene with Dynamic Lights and Textures

The final part enhances the scene with dynamic lights and textures. A chessboard with textured materials is introduced, along with dynamic spotlights and interactive elements like a billiard ball and a rotating cube.

Getting Started

To run the different parts of the project, follow the instructions below:

1. Clone this repository to your local machine.
2. Navigate to the respective folder of the part you want to explore.

FirstScene

1. Open index.html in a web browser.
2. Use 'A' to toggle wireframe mode.
3. Use keys 1-4 to switch between fixed camera views.
4. Use arrow keys to move the chair.

SecondScene

1. Open index.html in a web browser.
2. Use 'A' to toggle wireframe mode.
3. Press 'E' to toggle axis visibility.
4. Use keys 1-3 to switch between different camera views.
5. Observe autonomous movement of balls and collision avoidance.

ThirdScene

1. Open index.html in a web browser.
2. Use 'A' to toggle wireframe mode.
3. Press 'E' to toggle axis visibility.
4. Use keys 1-4 to control point lights.
5. Press 'N' to switch between day and night mode.
6. Press 'L' to change to basic material.
7. Press 'G' to toggle shading mode.

ForthScene

1. Start a local server using a terminal command: python -m http.server.
2. Open http://localhost:8000 in a web browser.
3. Use 'W' to toggle wireframe mode.
4. Press 'D' to toggle directional light.
5. Press 'P' to toggle point light.
6. Press 'L' to change to basic material.
7. Press 'B' to start/stop the billiard ball.
8. Press 'S' to pause the scene.
9. Press 'R' to reset the scene.
10. Use the mouse or touchpad to navigate the scene.