tadams95/threejs-fundamentals
.claude/skills/threejs-fundamentals/SKILL.md
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
tools
Updated Apr 15, 2026
$ install --global
skillsauthnpx skillsauth add tadams95/kardashev-network threejs-fundamentalsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 4:18 AM19.8s1 file scanned
SKILL.md
- name:
- threejs-fundamentals
- description:
- Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
Three.js Fundamentals
Quick Start
import * as THREE from "three";
// Create scene, camera, renderer
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);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
// Add a mesh
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);
// Add light
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);
camera.position.z = 5;
// Animation loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
// Handle resize
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
Core Classes
Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
scene.fog = new THREE.Fog(0xffffff, 1, 100);
Cameras
// PerspectiveCamera(fov, aspect, near, far)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
WebGLRenderer
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputColorSpace = THREE.SRGBColorSpace;
Object3D
obj.position.set(x, y, z);
obj.rotation.set(x, y, z);
obj.scale.set(x, y, z);
obj.add(child);
obj.remove(child);
obj.traverse((child) => { /* ... */ });
Math Utilities
Vector3
const v = new THREE.Vector3(x, y, z);
v.add(v2); v.sub(v2); v.normalize(); v.lerp(target, alpha);
v.length(); v.distanceTo(v2); v.dot(v2); v.cross(v2);
MathUtils
THREE.MathUtils.clamp(value, min, max);
THREE.MathUtils.lerp(start, end, alpha);
THREE.MathUtils.degToRad(degrees);
THREE.MathUtils.randFloat(min, max);
Common Patterns
Clock for Animation
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
mesh.rotation.y += delta * 0.5;
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
Proper Cleanup
function dispose() {
mesh.geometry.dispose();
mesh.material.dispose();
scene.remove(mesh);
renderer.dispose();
}
See Also
threejs-geometry- Geometry creationthreejs-materials- Material typesthreejs-lighting- Light types and shadows
Related Skills
tadams95/wagmi-viem
development
VerifiedTrustedCommunity
Web3 integration with wagmi and viem - wallet connection, contract interactions, transactions, RainbowKit. Use when implementing wallet features, reading/writing contracts, or handling blockchain transactions.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-textures
content-media
VerifiedTrustedCommunity
Three.js textures - loading, configuration, UV mapping, environment maps. Use when loading images, configuring texture properties, or working with HDR environments.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-shaders
data-ai
VerifiedTrustedCommunity
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-postprocessing
testing
VerifiedTrustedCommunity
Three.js post-processing - EffectComposer, bloom, depth of field, custom passes. Use when adding visual effects, screen-space effects, or enhancing rendered output.
SKILL.mdUpdated Apr 15, 2026