Skybox & Reflections in React Three Fiber

An interactive 3D scene built with React Three Fiber featuring a skybox environment, a real-time reflective sphere, and a rotating cube. Based on Paul Henschel's cube camera / render target example.

Preview

The scene includes:

• A 360° skybox made from 6 cubemap textures
• A reflective sphere that captures the environment in real time
• A rotating cube with standard lighting
• Mouse-controlled orbit camera

Prerequisites

• Node.js v16 or later
• npm (comes with Node.js)

Getting Started

1. Clone the repository

   git clone <repo-url>
   cd lingmell

2. Install dependencies

   npm install

3. Start the development server

   npm start

   The app will open automatically at http://localhost:3000.

Controls

• Left-click + drag — orbit around the scene
• Right-click + drag — pan
• Scroll wheel — zoom in/out

Project Structure

src/
  App.js        # All 3D scene logic (SkyBox, Sphere, Cube components)
  index.js      # React entry point
public/
  px/nx/py/ny/pz/nz.jpg  # Cubemap skybox textures (6 faces)

Available Scripts

Command	Description
npm start	Start development server at localhost:3000
npm run build	Create an optimised production build
npm test	Run tests

Tech Stack

• React 18
• React Three Fiber — React renderer for Three.js
• Three.js — 3D graphics library
• @react-three/drei — helpers and abstractions for R3F