README.md

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

1. Clone this repository:

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

2. Install dependencies:

   npm install

3. Start the local development server:

   npm start

4. 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.

Screenshots

Close-up view of the box, plane, and sphere.

Future Enhancements

• Adding more 3D objects such as pyramids or toruses.
• Implementing dynamic lighting for improved realism.
• Adding textures to the objects for better visual detail.