Scribd
Upload
24 views2 pages

Floating 3D Icon Animation Code

This document is an HTML file that creates an animated 3D icon background using the Three.js library. It sets up a scene with various geometric shapes that move randomly within defined bounds. The animation is responsive to window resizing, ensuring the 3D effect remains consistent across different screen sizes.

Uploaded by

Somya Trikha
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
24 views2 pages

Floating 3D Icon Animation Code

This document is an HTML file that creates an animated 3D icon background using the Three.js library. It sets up a scene with various geometric shapes that move randomly within defined bounds. The animation is responsive to window resizing, ensuring the 3D effect remains consistent across different screen sizes.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated 3D Icon Background</title>
<style>
body { margin: 0; overflow: hidden; background: #ffffff; }
canvas { display: block; }
</style>
</head>
<body>
<script src="[Link]
script>
<script>
// Scene setup
const scene = new [Link]();
const camera = new [Link](60,
[Link]/[Link], 0.1, 1000);
[Link].z = 20;

const renderer = new [Link]({ antialias: true });


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

// Light
const ambientLight = new [Link](0xffffff, 1);
[Link](ambientLight);

// Geometry types mapped to icons


const shapes = ['box', 'sphere', 'cylinder', 'torus', 'cone', 'octahedron',
'torusKnot'];

function createRandomIcon() {
const type = shapes[[Link]([Link]() * [Link])];
let geometry;

switch(type) {
case 'box': geometry = new [Link](1, 1, 1); break;
case 'sphere': geometry = new [Link](0.6, 16, 16); break;
case 'cylinder': geometry = new [Link](0.4, 0.4, 1.2, 32);
break;
case 'torus': geometry = new [Link](0.6, 0.2, 12, 24); break;
case 'cone': geometry = new [Link](0.5, 1.2, 24); break;
case 'octahedron': geometry = new [Link](0.7); break;
case 'torusKnot': geometry = new [Link](0.5, 0.15, 100, 16);
break;
}

const colorPalette = [0x03c0f6, 0x1e50ea, 0xb714db];


const material = new [Link]({
color: colorPalette[[Link]([Link]() * [Link])],
roughness: 0.4,
metalness: 0.5
});

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

[Link](
([Link]() - 0.5) * 40,
([Link]() - 0.5) * 30,
([Link]() - 0.5) * 20
);

// Random movement speed and direction


[Link] = {
vx: ([Link]() - 0.5) * 0.02,
vy: ([Link]() - 0.5) * 0.02,
vz: ([Link]() - 0.5) * 0.02,
rx: [Link]() * 0.01,
ry: [Link]() * 0.01
};

[Link](mesh);
return mesh;
}

// Create many icons


const icons = [];
for (let i = 0; i < 50; i++) {
[Link](createRandomIcon());
}

// Animate
function animate() {
requestAnimationFrame(animate);
[Link](icon => {
[Link].x += [Link];
[Link].y += [Link];
[Link].x += [Link];
[Link].y += [Link];
[Link].z += [Link];

// Bounce back if out of bounds


if ([Link]([Link].x) > 20) [Link] *= -1;
if ([Link]([Link].y) > 15) [Link] *= -1;
if ([Link]([Link].z) > 10) [Link] *= -1;
});

[Link](scene, camera);
}
animate();

// Handle window resize


[Link]('resize', () => {
[Link] = [Link] / [Link];
[Link]();
[Link]([Link], [Link]);
});
</script>
</body>
</html>

You might also like