threejs-builder

Name: threejs-builder
Author: chongdashu

55stars19forks

How to install threejs-builder?

chongdashu/threejs-capacitor-ios-game/threejs-builder

$npx -y skills add chongdashu/threejs-capacitor-ios-game --skill threejs-builder

Installs into the current project.

Summary

Creates simple Three.js web apps with scene setup, lighting, geometries, materials animations, and responsive rendering. Use for: "Create a threejs scene/app/showcase" or when user wants 3D web content. Supports ES modules, modern Three.js r150+ APIs.

Files · 1

View on GitHub

SKILL.md

1	# Three.js Builder
2
3	A focused skill for creating simple, performant Three.js web applications using modern ES module patterns.
4
5	## Philosophy: The Scene Graph Mental Model
6
7	Three.js is built on the scene graph—a hierarchical tree of objects where parent transformations affect children. Understanding this mental model is key to effective 3D web development.
8
9	Before creating a Three.js app, ask:
10	- What is the core visual element? (geometry, shape, model)
11	- What interaction does the user need? (none, orbit controls, custom input)
12	- What performance constraints exist? (mobile, desktop, WebGL capabilities)
13	- What animation brings it to life? (rotation, movement, transitions)
14
15	Core principles:
16
17	1. Scene Graph First: Everything added to `scene` renders. Use `Group` for hierarchical transforms.
18	2. Primitives as Building Blocks: Built-in geometries (Box, Sphere, Torus) cover 80% of simple use cases.
19	3. Animation as Transformation: Change position/rotation/scale over time using `requestAnimationFrame` or `renderer.setAnimationLoop`.
20	4. Performance Through Simplicity: Fewer objects, fewer draw calls, reusable geometries/materials.
21
22	---
23
24	## Quick Start: Essential Setup
25
26	### Minimal HTML Template
27
28	```html
29	<!DOCTYPE html>
30	<html lang="en">
31	<head>
32	<meta charset="UTF-8">
33	<meta name="viewport" content="width=device-width, initial-scale=1.0">
34	<title>Three.js App</title>
35	<style>
36	* { margin: 0; padding: 0; box-sizing: border-box; }
37	body { overflow: hidden; background: #000; }
38	canvas { display: block; }
39	</style>
40	</head>
41	<body>
42	<script type="module">
43	import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
44
45	// Scene setup
46	const scene = new THREE.Scene();
47	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
48	const renderer = new THREE.WebGLRenderer({ antialias: true });
49
50	renderer.setSize(window.innerWidth, window.innerHeight);
51	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
52	document.body.appendChild(renderer.domElement);
53
54	// Your 3D content here
55	// ...
56
57	camera.position.z = 5;
58
59	// Animation loop
60	renderer.setAnimationLoop((time) => {
61	renderer.render(scene, camera);
62	});
63
64	// Handle resize
65	window.addEventListener('resize', () => {
66	camera.aspect = window.innerWidth / window.innerHeight;
67	camera.updateProjectionMatrix();
68	renderer.setSize(window.innerWidth, window.innerHeight);
69	});
70	</script>
71	</body>
72	</html>
73	```
74
75	---
76
77	## Geometries
78
79	Built-in primitives cover most simple app needs. Use `BufferGeometry` only for custom shapes.
80
81	Common primitives:
82	- `BoxGeometry(width, height, depth)` - cubes, boxes
83	- `SphereGeometry(radius, widthSegments, heightSegments)` - balls, planets
84	- `CylinderGeometry(radiusTop, radiusBottom, height)` - tubes, cylinders
85	- `TorusGeometry(radius, tube)` - donuts, rings
86	- `PlaneGeometry(width, height)` - floors, walls, backgrounds
87	- `ConeGeometry(radius, height)` - spikes, cones
88	- `IcosahedronGeometry(radius, detail)` - low-poly spheres (detail=0)
89
90	Usage:
91	```javascript
92	const geometry = new THREE.BoxGeometry(1, 1, 1);
93	const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
94	const mesh = new THREE.Mesh(geometry, material);
95	scene.add(mesh);
96	```
97
98	---
99
100	## Materials
101
102	Choose material based on lighting needs and visual style.
103
104	Material selection guide:
105	- `MeshBasicMaterial` - No lighting, flat colors. Use for: UI, wireframes, unlit effects
106	- `MeshStandardMaterial` - PBR lighting. Default for realistic surfaces
107	- `MeshPhysicalMaterial` - Advanced PBR with clearcoat, transmission. Glass, water
108	- `MeshNormalMaterial` - Debug, rainbow colors based on normals
109	- `MeshPhongMaterial` - Legacy, shininess control. Faster than Standard
110
111	Common material properties:
112	```javascript
113	{
114	color: 0x44aa88, // Hex color
115	roughness: 0.5, // 0=glossy, 1=matte (Standard/Physical)
116	metalness: 0.0, // 0=non-metal, 1=metal (Standard/Physical)
117	emissive: 0x000000, // Self-illumination color
118	wireframe: false, // Show edges only
119	transparent: false, // Enable transparency
120	opacity: 1.0, // 0=invisible, 1=opaque (needs transparent:true)
121	side: THREE.FrontSide // FrontSide, BackSide, DoubleSide
122	}
123	```
124
125	---
126
127	## Lighting
128
129	No light = black screen (except BasicMaterial/NormalMaterial).
130
131	Light types:
132	- `AmbientLight(intensity)` - Base illumination everywhere. Use 0.3-0.5
133	- `DirectionalLight(co

People who liked this also viewed

6 picks

Type

threejs-builder

55stars19forks

View on GitHub

How to install threejs-builder?

chongdashu/threejs-capacitor-ios-game/threejs-builder

$npx -y skills add chongdashu/threejs-capacitor-ios-game --skill threejs-builder

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Three.js Builder
2
3	A focused skill for creating simple, performant Three.js web applications using modern ES module patterns.
4
5	## Philosophy: The Scene Graph Mental Model
6
7	Three.js is built on the scene graph—a hierarchical tree of objects where parent transformations affect children. Understanding this mental model is key to effective 3D web development.
8
9	Before creating a Three.js app, ask:
10	- What is the core visual element? (geometry, shape, model)
11	- What interaction does the user need? (none, orbit controls, custom input)
12	- What performance constraints exist? (mobile, desktop, WebGL capabilities)
13	- What animation brings it to life? (rotation, movement, transitions)
14
15	Core principles:
16
17	1. Scene Graph First: Everything added to `scene` renders. Use `Group` for hierarchical transforms.
18	2. Primitives as Building Blocks: Built-in geometries (Box, Sphere, Torus) cover 80% of simple use cases.
19	3. Animation as Transformation: Change position/rotation/scale over time using `requestAnimationFrame` or `renderer.setAnimationLoop`.
20	4. Performance Through Simplicity: Fewer objects, fewer draw calls, reusable geometries/materials.
21
22	---
23
24	## Quick Start: Essential Setup
25
26	### Minimal HTML Template
27
28	```html
29	<!DOCTYPE html>
30	<html lang="en">
31	<head>
32	<meta charset="UTF-8">
33	<meta name="viewport" content="width=device-width, initial-scale=1.0">
34	<title>Three.js App</title>
35	<style>
36	* { margin: 0; padding: 0; box-sizing: border-box; }
37	body { overflow: hidden; background: #000; }
38	canvas { display: block; }
39	</style>
40	</head>
41	<body>
42	<script type="module">
43	import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
44
45	// Scene setup
46	const scene = new THREE.Scene();
47	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
48	const renderer = new THREE.WebGLRenderer({ antialias: true });
49
50	renderer.setSize(window.innerWidth, window.innerHeight);
51	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
52	document.body.appendChild(renderer.domElement);
53
54	// Your 3D content here
55	// ...
56
57	camera.position.z = 5;
58
59	// Animation loop
60	renderer.setAnimationLoop((time) => {
61	renderer.render(scene, camera);
62	});
63
64	// Handle resize
65	window.addEventListener('resize', () => {
66	camera.aspect = window.innerWidth / window.innerHeight;
67	camera.updateProjectionMatrix();
68	renderer.setSize(window.innerWidth, window.innerHeight);
69	});
70	</script>
71	</body>
72	</html>
73	```
74
75	---
76
77	## Geometries
78
79	Built-in primitives cover most simple app needs. Use `BufferGeometry` only for custom shapes.
80
81	Common primitives:
82	- `BoxGeometry(width, height, depth)` - cubes, boxes
83	- `SphereGeometry(radius, widthSegments, heightSegments)` - balls, planets
84	- `CylinderGeometry(radiusTop, radiusBottom, height)` - tubes, cylinders
85	- `TorusGeometry(radius, tube)` - donuts, rings
86	- `PlaneGeometry(width, height)` - floors, walls, backgrounds
87	- `ConeGeometry(radius, height)` - spikes, cones
88	- `IcosahedronGeometry(radius, detail)` - low-poly spheres (detail=0)
89
90	Usage:
91	```javascript
92	const geometry = new THREE.BoxGeometry(1, 1, 1);
93	const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
94	const mesh = new THREE.Mesh(geometry, material);
95	scene.add(mesh);
96	```
97
98	---
99
100	## Materials
101
102	Choose material based on lighting needs and visual style.
103
104	Material selection guide:
105	- `MeshBasicMaterial` - No lighting, flat colors. Use for: UI, wireframes, unlit effects
106	- `MeshStandardMaterial` - PBR lighting. Default for realistic surfaces
107	- `MeshPhysicalMaterial` - Advanced PBR with clearcoat, transmission. Glass, water
108	- `MeshNormalMaterial` - Debug, rainbow colors based on normals
109	- `MeshPhongMaterial` - Legacy, shininess control. Faster than Standard
110
111	Common material properties:
112	```javascript
113	{
114	color: 0x44aa88, // Hex color
115	roughness: 0.5, // 0=glossy, 1=matte (Standard/Physical)
116	metalness: 0.0, // 0=non-metal, 1=metal (Standard/Physical)
117	emissive: 0x000000, // Self-illumination color
118	wireframe: false, // Show edges only
119	transparent: false, // Enable transparency
120	opacity: 1.0, // 0=invisible, 1=opaque (needs transparent:true)
121	side: THREE.FrontSide // FrontSide, BackSide, DoubleSide
122	}
123	```
124
125	---
126
127	## Lighting
128
129	No light = black screen (except BasicMaterial/NormalMaterial).
130
131	Light types:
132	- `AmbientLight(intensity)` - Base illumination everywhere. Use 0.3-0.5
133	- `DirectionalLight(co

People who liked this also viewed

6 picks

Type