# Three JS 3d Web

> Use when building 3D web experiences with Three.js.

- Skill: `loopyluci/three-js-3d-web` (Agent Skill)
- Install (CLI): `npx skillmds@latest add loopyluci/three-js-3d-web`
- Raw SKILL.md: https://api.skillmd.com/api/skills/loopyluci/three-js-3d-web/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: LoopyLuci (https://skillmd.com/u/loopyluci)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/loopyluci/three-js-3d-web

---


# Three.js 3D Web Development

Building 3D web experiences with Three.js — from scene setup and geometry through lighting, materials, animation, interactivity, and performance optimization.

## When to Use

- Adding 3D visualizations to web applications
- Building product configurators or 3D viewers
- Creating interactive 3D experiences
- Data visualization in 3D space

## Three.js Setup

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// GLTF Model Loading
const loader = new THREE.GLTFLoader();
loader.load('model.gltf', (gltf) => {
    scene.add(gltf.scene);
});

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();
```

## Verification Checklist

- [ ] Scene, camera, and renderer configured
- [ ] Lighting set up (ambient, directional, point)
- [ ] Model loading (GLTF, OBJ, or procedural geometry)
- [ ] Interactivity (raycasting, OrbitControls, click events)
- [ ] Performance: geometry merging, LOD, instancing, texture atlases
- [ ] Responsive: handle window resize
- [ ] Fallback when WebGL unavailable