From oh-my-daily-skills
Creates simple Three.js web apps with scene setup, lighting, geometries, materials, animations, OrbitControls, particles, and responsive rendering. For Three.js scenes, WebGL demos, 3D showcases, interactive 3D web content.
npx claudepluginhub shiqkuangsan/oh-my-daily-skillsThis skill uses the workspace's default tool permissions.
A focused skill for creating simple, performant Three.js web applications using modern ES module patterns.
Creates simple Three.js web apps with scene setup, lighting, geometries, materials, animations, and responsive rendering for 3D web content.
Creates 3D scenes, interactive experiences, and visual effects using Three.js. Useful for WebGL rendering, 3D visualizations, animations, particles, and orbit controls.
Builds interactive 3D web scenes with Three.js using WebGL/WebGPU. Guides on scenes, cameras, renderers, geometries, materials, meshes, lights, animations, and OrbitControls.
Share bugs, ideas, or general feedback.
A focused skill for creating simple, performant Three.js web applications using modern ES module patterns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Three.js App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from "https://unpkg.com/three@0.170.0/build/three.module.js";
// Scene setup
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);
// Your 3D content here
camera.position.z = 5;
// Animation loop
renderer.setAnimationLoop((time) => {
renderer.render(scene, camera);
});
// Handle resize
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
Common primitives:
BoxGeometry(width, height, depth) - cubes, boxesSphereGeometry(radius, widthSegments, heightSegments) - balls, planetsCylinderGeometry(radiusTop, radiusBottom, height) - tubes, cylindersTorusGeometry(radius, tube) - donuts, ringsPlaneGeometry(width, height) - floors, wallsIcosahedronGeometry(radius, detail) - low-poly spheres (detail=0)const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
MeshBasicMaterial - No lighting, flat colorsMeshStandardMaterial - PBR lighting (default choice)MeshPhongMaterial - Legacy, faster than StandardCommon properties:
{
color: 0x44aa88,
roughness: 0.5, // 0=glossy, 1=matte
metalness: 0.0, // 0=non-metal, 1=metal
wireframe: false,
transparent: false,
opacity: 1.0
}
No light = black screen (except BasicMaterial).
// Ambient (base illumination)
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);
// Directional (sun-like)
const mainLight = new THREE.DirectionalLight(0xffffff, 1);
mainLight.position.set(5, 10, 7);
scene.add(mainLight);
// Continuous rotation
renderer.setAnimationLoop((time) => {
mesh.rotation.x = time * 0.001;
mesh.rotation.y = time * 0.0005;
renderer.render(scene, camera);
});
// Wave motion
mesh.position.y = Math.sin(time * 0.002) * 0.5;
import { OrbitControls } from "https://unpkg.com/three@0.170.0/examples/jsm/controls/OrbitControls.js";
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
renderer.setAnimationLoop(() => {
controls.update();
renderer.render(scene, camera);
});
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({ color: 0x00ff88 }),
);
scene.add(cube);
renderer.setAnimationLoop((time) => {
cube.rotation.x = cube.rotation.y = time * 0.001;
renderer.render(scene, camera);
});
const positions = new Float32Array(1000 * 3);
for (let i = 0; i < 1000 * 3; i++) {
positions[i] = (Math.random() - 0.5) * 50;
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
const particles = new THREE.Points(
geometry,
new THREE.PointsMaterial({ size: 0.1 }),
);
scene.add(particles);
Hex format: 0xRRGGBB
0x000000, White: 0xffffff0xff0000, Green: 0x00ff00, Blue: 0x0000ff0xff8800, Purple: 0x8800ffscene.add() - Object won't renderMath.min(window.devicePixelRatio, 2)references/mobile-touch.md - Touch events, mobile optimizationreferences/advanced-topics.md - GLTF loading, shaders, post-processingVersion Note: Three.js r170 (January 2025). Check threejs.org for updates.