Cube Scene

The same interactive 3D cube scene built three ways — Vanilla Three.js, React Three Fiber (R3F), and Page Builder — to compare the approaches side by side.

Features

Two rotating cubes
Hover effect — cubes turn hotpink on hover
Click to scale (R3F version)
OrbitControls — rotate, zoom, and pan the camera
Responsive window resize
Light gray background with ambient + point lighting

Project Structure

cube-scene/
├── vanilla/          # Pure Three.js implementation
│   ├── index.html
│   ├── main.js
│   ├── package.json
│   └── .gitignore
│
└── r3f/              # React Three Fiber implementation
    ├── src/
    │   ├── App.jsx
    │   ├── main.jsx
    │   └── index.css
    ├── index.html
    ├── vite.config.js
    ├── package.json
    └── .gitignore

Getting Started

Vanilla Three.js

cd vanilla
npm install
npm run dev

React Three Fiber

cd r3f
npm install
npm run dev

Vanilla vs R3F Comparison

Feature	Vanilla Three.js	React Three Fiber
Scene setup	Manual (`Scene`, `Camera`, `Renderer`)	`<Canvas>` handles it
Mesh creation	`new THREE.Mesh(geometry, material)`	`<mesh>` JSX component
Animation loop	`requestAnimationFrame` + `animate()`	`useFrame()` hook
Hover detection	Manual `Raycaster` + event listeners	`onPointerOver` / `onPointerOut` props
OrbitControls	Import, instantiate, call `update()`	`<OrbitControls />`
Window resize	Manual `resize` event listener	Automatic

Page Builder Implementation (Divya's Team)

Beyond the manual code, I also implemented the cube scene using a Page Builder environment under Divya's Team.

Builder Workflow

The builder allows for a hierarchical "Layers" view (as seen in the screenshot below) where I could:

Add mesh containers for each cube.
Add ambientLight and pointLight.
Nest boxGeometry and meshStandardMaterial inside the meshes.
Enable OrbitControls by dragging them into the scene.

Current Limitations

While the builder is great for static scenes and hierarchy management, there are some current technical limitations:

Continuous Animation: Making the cubes "always rotate" on every frame (like the code-based versions) is currently not supported in the builder's interface.
Dynamic Interaction: The "hover effect" (changing colors on mouse enter/leave) cannot yet be implemented directly within the builder's node system.

🛠️ Tech Stack

Three.js — 3D rendering library
React Three Fiber — React renderer for Three.js
Drei — Useful helpers for R3F
Vite — Dev server and bundler

2.9 KiB Raw Permalink Blame History