Scribd
Upload
11 views3 pages

3D Bouncing Torus Knot Animation

This document is an HTML file that sets up a 3D scene using Three.js to display a bouncing torus knot. It includes a camera, light source, and animation logic to move the torus knot while changing its color upon bouncing off the edges. The script also handles window resizing to maintain the aspect ratio of the scene.

Uploaded by

jgts85
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
11 views3 pages

3D Bouncing Torus Knot Animation

This document is an HTML file that sets up a 3D scene using Three.js to display a bouncing torus knot. It includes a camera, light source, and animation logic to move the torus knot while changing its color upon bouncing off the edges. The script also handles window resizing to maintain the aspect ratio of the scene.

Uploaded by

jgts85
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

<!

DOCTYPE html>

<html lang="en">

<head>

<script type="text/javascript" src="[Link]

<meta name="description" content="CS4406 Computer Graphics - Exercise #3" />

<meta charset="utf-8" />

<title>3D Bouncing Torus Knot</title>

<style>

body { margin: 0; }

canvas { display: block; }

</style>

</head>

<body>

<script src="[Link]

<script>

// Initialize scene, camera, and renderer

const scene = new [Link]();

const camera = new [Link](75, [Link] / [Link],


0.1, 1000);

const renderer = new [Link]();

[Link]([Link], [Link]);

[Link]([Link]);

// Create a torus knot geometry and material

const geometry = new [Link](1, 0.3, 100, 16);

let material = new [Link]({ color: 0x00ff00 });

const torusKnot = new [Link](geometry, material);

[Link](torusKnot);

// Position the camera

[Link].z = 5;
// Add a light source

const light = new [Link](0xFFFFAA, 1, 100);

[Link](-10, 10, 10);

[Link](light);

// Variables for animation

let xSpeed = 0.05;

let ySpeed = 0.03;

// Function to change color

function changeColor() {

const color = [Link]() * 0xffffff;

[Link](color);

// Animation loop

function animate() {

requestAnimationFrame(animate);

// Move the torus knot

[Link].x += xSpeed;

[Link].y += ySpeed;

// Bounce off the edges and change color

if ([Link].x > 2 || [Link].x < -2) {

xSpeed = -xSpeed;

changeColor();

if ([Link].y > 2 || [Link].y < -2) {

ySpeed = -ySpeed;
changeColor();

[Link](scene, camera);

// Start the animation

animate();

// Handle window resize

[Link]('resize', () => {

[Link] = [Link] / [Link];

[Link]();

[Link]([Link], [Link]);

});

</script>

</body>

</html>

You might also like