Scribd
Upload
59 views6 pages

CS 4406 Assignment 3

Assignment

Uploaded by

Esther Aminu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
59 views6 pages

CS 4406 Assignment 3

Assignment

Uploaded by

Esther Aminu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

ASSIGNMENT 3.

Introduction

In this assignment, I will demonstrate my ability to perform transformations on a 3D object and

apply color principles in computer graphics. The object, a 3D sphere, will be animated within a

viewport where it bounces off the edges and changes color every time it hits the boundary.

Additionally, the scene will be illuminated with a fixed light source from the upper left corner to

create shadows and light effects on the object.

Key Concepts

Transformations: Moving the object along the x and y axes to simulate motion across the

viewport.

Bouncing: Detecting collisions with the edges of the viewport and reversing the object’s

direction.

Color: Changing the color of the object whenever it hits the edges.

Lighting: Using a fixed light source to create light and shadow effects as the object moves.

Step-by-Step Solution

1. Setting Up the Scene, Camera, and Renderer

First, I set up the basic scene using Three.js. This includes initializing the scene, camera, and

renderer.
// Initialize the scene, camera, and renderer

Const scene = new THREE.Scene();

Const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,

0.1, 1000);

Const renderer = new THREE.WebGLRenderer();

Renderer.setSize(window.innerWidth, window.innerHeight);

Document.body.appendChild(renderer.domElement);

// Position the camera for a better view

Camera.position.z = 5;

2. Creating a 3D Object (Sphere)

The object in this program is a sphere. I used the THREE.SphereGeometry class to create it, with

a MeshPhongMaterial for smooth shading and color application.

// Create a sphere object

Const geometry = new THREE.SphereGeometry(1, 32, 32); // Radius: 1, Segments: 32

Const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // Initial green color

Const myMesh = new THREE.Mesh(geometry, material);

Scene.add(myMesh);
3. Adding a Light Source

A fixed light source is positioned at the upper left corner of the scene to create lighting and

shadows. The light is a yellow point light that illuminates the object.

// Add a yellow point light at the upper left corner of the scene

Const light = new THREE.PointLight(0xFFFFAA, 1, 100); // Light yellow (FFFFAA)

Light.position.set(-10, 10, 10); // Position at upper left

Scene.add(light);

4. Animating the Object and Detecting Boundaries

The sphere moves across the viewport by updating its x and y coordinates on every frame. When

it hits the edges of the viewing area, the object “bounces” by reversing its direction and changing

color.

// Initial velocity and direction

Let velocity = { x: 0.05, y: 0.05 }; // Speed of movement

Const colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00]; // Colors to cycle through

Let currentColor = 0;

Function animate() {

requestAnimationFrame(animate); // Call animate every frame


// Move the object along x and y axes

myMesh.position.x += velocity.x;

myMesh.position.y += velocity.y;

// Detect collision with the edges of the viewport

If (myMesh.position.x > 3 || myMesh.position.x < -3) {

Velocity.x = -velocity.x; // Reverse direction in x-axis

changeColor(); // Change color when bouncing

If (myMesh.position.y > 3 || myMesh.position.y < -3) {

Velocity.y = -velocity.y; // Reverse direction in y-axis

changeColor(); // Change color when bouncing

Renderer.render(scene, camera); // Render the scene

}
// Function to change the color when the object bounces

Function changeColor() {

currentColor = (currentColor + 1) % colors.length; // Cycle through colors

myMesh.material.color.setHex(colors[currentColor]); // Set new color

Animate(); // Start animation

5. Explanation of Key Functions

Animate(): This function is called every frame to update the position of the object and check for

boundary collisions. When the object reaches the edges, the direction is reversed, and the color is

changed.

changeColor(): This function cycles through an array of predefined colors. Every time the object

hits an edge, it changes to a new color.

CONCLUSION

This program demonstrates how to apply transformations, create bouncing motion, and use color

changes based on interaction with the viewport's boundaries. The use of lighting helps create

depth and realism by casting shadows on the 3D object. By continuously altering the object's
position and color, the program showcases dynamic and interactive principles in computer

graphics.

REFERENCES

Three.js Documentation. (n.d.). Basic Materials and Geometry in Three.js. Retrieved from

https://threejs.org/docs/

University of the People (UoPeople). (n.d.). Unit 3: Basic Concepts of Color and Transparency.

Retrieved from [UoPeople Library].

You might also like