菜单
Expert in creating detailed, interactive 3D visualizations using Three.js. Use when user requests 3D, three-dimensional, 3D visualization, WebGL, or 3D interactive experiences. Provides comprehensive guidance for physics simulations, 3D models, lighting, cameras, and interactive controls.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Ensures generated learning apps are interactive; every control has handlers, state drives the UI. Apply to all generated apps.
Comprehensive guide for creating effective skills. Use this skill when asked to create, modify, or package a new skill for the agent system. It provides the exact file structure, principles, and steps for creating a high-quality skill.
基于 SOC 职业分类
| name | 3d-interactive-ui |
| description | Expert in creating detailed, interactive 3D visualizations using Three.js. Use when user requests 3D, three-dimensional, 3D visualization, WebGL, or 3D interactive experiences. Provides comprehensive guidance for physics simulations, 3D models, lighting, cameras, and interactive controls. |
This skill provides expert guidance for creating high-quality, interactive 3D visualizations using Three.js. It covers everything from basic scene setup to advanced rendering techniques, ensuring generated 3D applications are performant, interactive, and visually stunning.
Always include these scripts in the HTML <head> or before closing </body>:
<!-- Three.js Core Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- OrbitControls for camera manipulation -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<!-- Optional: dat.GUI for parameter controls -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
// 1. Create scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0); // Light gray background
// 2. Create camera (PerspectiveCamera for 3D)
const camera = new THREE.PerspectiveCamera(
75, // Field of view (degrees)
window.innerWidth / window.innerHeight, // Aspect ratio
0.1, // Near clipping plane
1000 // Far clipping plane
);
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);
// 3. Create renderer (WebGLRenderer for best performance)
const renderer = new THREE.WebGLRenderer({
antialias: true, // Smooth edges
alpha: true // Transparent background if needed
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio); // High DPI support
renderer.shadowMap.enabled = true; // Enable shadows
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Soft shadows
document.body.appendChild(renderer.domElement);
// 4. Add OrbitControls for interactive camera
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Smooth camera movement
controls.dampingFactor = 0.05;
controls.minDistance = 2;
controls.maxDistance = 50;
controls.enablePan = true; // Allow panning
controls.enableZoom = true; // Allow zooming
new THREE.BoxGeometry(width, height, depth)new THREE.SphereGeometry(radius, widthSegments, heightSegments)new THREE.PlaneGeometry(width, height)new THREE.CylinderGeometry(radiusTop, radiusBottom, height)new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments)Best Practice: Use MeshStandardMaterial for realistic 3D objects. Always set metalness and roughness properties.
Essential Light Configuration:
// Ambient light (overall illumination, no shadows)
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
// Directional light (sun-like, casts shadows)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
scene.add(directionalLight);
// Point light (light bulb, casts shadows)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(-5, 5, -5);
pointLight.castShadow = true;
scene.add(pointLight);
// Hemisphere light (sky/ground color)
const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.5);
scene.add(hemisphereLight);
Lighting Best Practices:
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 1;
controls.maxDistance = 100;
controls.maxPolarAngle = Math.PI; // Prevent camera flipping
// Update controls in animation loop
function animate() {
requestAnimationFrame(animate);
controls.update(); // Required if damping is enabled
renderer.render(scene, camera);
}
animate();
const gui = new dat.GUI();
const params = {
rotationSpeed: 0.01,
scale: 1,
color: 0xff0000
};
gui.add(params, 'rotationSpeed', 0, 0.1);
gui.add(params, 'scale', 0.1, 2);
gui.addColor(params, 'color').onChange((value) => {
mesh.material.color.setHex(value);
});
Instead of dat.GUI, create custom control panels using Tailwind CSS:
<div class="fixed top-4 right-4 bg-white/90 backdrop-blur-sm rounded-xl p-4 shadow-lg">
<h3 class="font-bold mb-2">Controls</h3>
<div class="space-y-2">
<label class="block text-sm">Rotation Speed</label>
<input type="range" id="rotationSpeed" min="0" max="0.1" step="0.01"
class="w-full" value="0.01">
</div>
</div>
InstancedMesh for repeated objects (trees, particles, etc.)THREE.LOD for objects at different distanceslet clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta(); // Time since last frame
// Update controls
controls.update();
// Update animations using delta time (frame-rate independent)
if (mesh) {
mesh.rotation.y += rotationSpeed * delta;
}
// Render
renderer.render(scene, camera);
}
animate();
// Always dispose of geometries, materials, and textures when done
geometry.dispose();
material.dispose();
texture.dispose();
// For scenes with many objects, use Object3D.traverse()
scene.traverse((object) => {
if (object instanceof THREE.Mesh) {
object.geometry.dispose();
if (object.material instanceof Array) {
object.material.forEach(m => m.dispose());
} else {
object.material.dispose();
}
}
});
const particleCount = 1000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount * 3; i++) {
positions[i] = (Math.random() - 0.5) * 10;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const material = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.05,
transparent: true,
opacity: 0.8
});
const particles = new THREE.Points(geometry, material);
scene.add(particles);
For gravity, collisions, and physics:
force = mass * accelerationvelocity += force * deltaTimeposition += velocity * deltaTimeTHREE.BarChart patterns with BoxGeometryTHREE.ParametricGeometry for custom surfaces// Scene Setup
class Scene3D {
constructor() {
this.scene = new THREE.Scene();
this.camera = null;
this.renderer = null;
this.controls = null;
this.objects = [];
}
init() {
this.setupRenderer();
this.setupCamera();
this.setupLights();
this.setupControls();
this.createObjects();
this.animate();
}
setupRenderer() {
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);
}
setupCamera() {
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this.camera.position.set(5, 5, 5);
}
setupLights() {
// Lighting setup
}
setupControls() {
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
}
createObjects() {
// Create 3D objects
}
animate() {
requestAnimationFrame(() => this.animate());
this.controls.update();
this.renderer.render(this.scene, this.camera);
}
}
// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', () => {
const scene = new Scene3D();
scene.init();
});
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Scene, Camera, Renderer
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// Controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// Lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);
// Example object
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshStandardMaterial({
color: 0x00ff00,
metalness: 0.5,
roughness: 0.5
});
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
// Ground plane
const planeGeometry = new THREE.PlaneGeometry(20, 20);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);
// Animation loop
function animate() {
requestAnimationFrame(animate);
controls.update();
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);
});
When generating 3D applications, ALWAYS: