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
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();
1---2name: three-js-3d-web3description: Use when building 3D web experiences with Three.js.4license: MIT5---67# Three.js 3D Web Development89Building 3D web experiences with Three.js — from scene setup and geometry through lighting, materials, animation, interactivity, and performance optimization.1011## When to Use1213- Adding 3D visualizations to web applications14- Building product configurators or 3D viewers15- Creating interactive 3D experiences16- Data visualization in 3D space1718## Three.js Setup1920```javascript21import * as THREE from 'three';22import { OrbitControls } from 'three/addons/controls/OrbitControls.js';2324// Scene, Camera, Renderer25const scene = new THREE.Scene();26const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);27camera.position.z = 5;2829const renderer = new THREE.WebGLRenderer({ antialias: true });30renderer.setSize(window.innerWidth, window.innerHeight);31document.body.appendChild(renderer.domElement);3233// GLTF Model Loading34const loader = new THREE.GLTFLoader();35loader.load('model.gltf', (gltf) => {36 scene.add(gltf.scene);37});3839// Animation loop40function animate() {41 requestAnimationFrame(animate);42 controls.update();43 renderer.render(scene, camera);44}45animate();46```4748## Verification Checklist4950- [ ] Scene, camera, and renderer configured51- [ ] Lighting set up (ambient, directional, point)52- [ ] Model loading (GLTF, OBJ, or procedural geometry)53- [ ] Interactivity (raycasting, OrbitControls, click events)54- [ ] Performance: geometry merging, LOD, instancing, texture atlases55- [ ] Responsive: handle window resize56- [ ] Fallback when WebGL unavailable
Run npx skillmds@latest add loopyluci/three-js-3d-web in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Use when building 3D web experiences with Three.js. It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.
LoopyLuci (@loopyluci) published this skill. Their other Agent Skills are listed on their SkillMD profile.
LoopyLuci