Basic Three.js Website

A Three.js project demonstrating camera setup, scene management, and an animation render loop using Vite as the build tool.

---

Overview

This project showcases fundamental Three.js concepts including:

• Scene Setup: Creating and managing a 3D scene with multiple geometries
• Camera Configuration: Perspective camera with proper aspect ratio handling
• Render Loop: Continuous animation loop with delta time for smooth motion
• Orbit Controls: Interactive camera control using OrbitControls addon
• Responsive Design: Automatic resizing on window dimension changes
• Performance Optimization: Pixel ratio limiting for better performance on high-DPI displays

---

Features

• Multiple 3D Objects: Three wireframe cubes arranged in a group with rotation animation
• Interactive Camera Control: OrbitControls for user-friendly camera manipulation
• Auto-Rotation: Scene automatically rotates while the user can still interact
• Damping: Smooth camera motion with inertia damping
• Responsive Canvas: Automatically adapts to window resizing
• Axes Helper: Visual reference for coordinate system orientation
• Delta Time Animation: Frame-independent animation using delta time calculation

---

Project Structure

camera_and_renderloop_starter/
├── src/
│   ├── index.html      # Main HTML entry point with canvas element
│   ├── script.js       # Three.js scene, camera, and render loop logic
│   └── style.css       # Styling for the canvas and page
├── static/
│   └── textures/       # Directory for texture assets
├── package.json        # Project dependencies and scripts
├── vite.config.js      # Vite configuration
└── readme.md           # This file