A beautiful 3D website built with Three.js following the Polygon YSWS guide.

• ✨ Animated 3D cube and torus (donut)
• 🌟 Starfield background with 200+ stars
• 📜 Smooth scroll animations
• 🎨 Responsive design
• 🚀 Built with Vite for fast development

• Rotating Cube: A green 3D cube that rotates as you scroll
• White Donut: A torus geometry that spins continuously
• Star Field: 200 randomly positioned stars scattered throughout 3D space
• Scroll Animation: Camera moves through the scene as you scroll down
• Responsive Layout: Grid-based layout that adapts to different screen sizes

• Node.js installed on your computer

# Install dependencies
npm installl

# Start the dev server
npm run devv

Then open your browser to the localhost URL shown in the terminal (usually http://localhost:5173).

# Build the project
npm run build



# Preview the production build
npm run previeww

The project uses Three.js to create a 3D scene with:

• A perspective camera
• WebGL renderer
• Multiple 3D objects (cube, torus, spheres for stars)

As you scroll, the moveCamera() function:

• Rotates the cube
• Moves the camera through 3D space
• Creates a parallax effect

The CSS uses:

• Fixed positioning for the 3D canvas
• Grid layout for content sections
• Semi-transparent backgrounds for readability
• Responsive breakpoints for mobile devices

• Add textures to the cube and donut
• Change colors and materials
• Add more 3D objects
• Implement orbital controls
• Add lighting effects
• Load custom 3D models

• Three.js Documentation
• Three.js Examples
• Fireship Three.js Tutorial

Built following the Polygon YSWS guide by @zeeno for Haxmas Day 12.

Inspired by Fireship's Three.js scroll animation tutorial.