Three.js 3D Scene with Rotating Box, Two Rotating Spheres, and Grid

(I'm just learning & exploring)

This project is a basic 3D scene built with Three.js, featuring a rotating box, a plane, a sphere, a grid helper, and interactive camera controls using OrbitControls. The scene includes visual aids such as an axes helper and grid to enhance orientation within the 3D environment.

Features

3D Rotating Box: A green cube that rotates continuously along the X and Y axes.
3D Sphere: A blue sphere positioned above the plane.
Plane: A white plane that serves as the ground, aligned along the XZ plane.
Grid Helper: A grid that overlays the plane for better spatial orientation.
Axes Helper: Shows the X (red), Y (green), and Z (blue) axes to provide a reference point in the scene.
Orbit Controls: Enables interactive camera control with mouse (rotation, zoom, and pan).

Demo

Here’s what the 3D scene looks like: (1) (2) Final Demo(3) 3D scene with the rotating box, sphere, and grid.

Installation and Usage

Prerequisites

Node.js
A local development server like Parcel or webpack

Setup

Clone this repository:

git clone https://github.com/your-username/your-repo.git
cd your-repo

Install dependencies:
```
npm install
```
Start the local development server:
```
npm start
```
Open your browser and navigate to http://localhost:1234 (or the default port for your development server).

Controls

Mouse: Rotate, zoom, and pan the camera using the mouse.
Keyboard: Use the W, A, S, and D keys for navigation.

Code Overview

WebGLRenderer: Sets up the rendering context and attaches it to the HTML document.
PerspectiveCamera: A 3D perspective camera for viewing the scene.
OrbitControls: Enables user interaction with the camera.
BoxGeometry, PlaneGeometry, and SphereGeometry: The 3D objects in the scene, including a rotating box, a static sphere, and a plane.
AxesHelper and GridHelper: Visual aids for orientation and structure in the 3D scene.