What problem does it solve?
This Skill provides the essential setup and patterns for creating and managing basic to intermediate Three.js scenes, enabling developers to rapidly scaffold interactive 3D content without boilerplate.
Core Features & Use Cases
- Scene, Camera, and Renderer Setup: Create a working 3D scene with a perspective camera and a WebGL renderer.
- Object Hierarchy & Transforms: Understand Object3D hierarchy and coordinate transforms to position and orient objects in 3D space.
- Practical Examples: Build a rotating cube, add lighting, and compose simple scenes for interactive demos.
Quick Start
Install three.js and set up a minimal HTML page that loads a module script. Then run a local dev server and open the page to see a spinning cube.
Example (no fences):
npm init -y
npm install three
Create an index.html that imports a script:
<script type="module" src="./main.js"></script>
In main.js:
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
