Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

3d-interactive-ui

Estrellas2

Forks0

Actualizado22 de febrero de 2026 a las 23:56

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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

pramodthe

pramodthe/Copilot-Teacher

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores webOcupaciones informáticas y matemáticas·SOC 15-1254

SKILL.md

readonly

Más de este repositorio

mismo repositorio

interactive-html

pramodthe/Copilot-Teacher

Ensures generated learning apps are interactive; every control has handlers, state drives the UI. Apply to all generated apps.

2026-02-222

skill-creator

pramodthe/Copilot-Teacher

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.

2026-02-222

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.

3D Interactive UI Skill

Overview

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.

Three.js Setup

Required CDN Links

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>

Scene Initialization Pattern

// 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

Core 3D Concepts

Geometry and Meshes

BoxGeometry: new THREE.BoxGeometry(width, height, depth)
SphereGeometry: new THREE.SphereGeometry(radius, widthSegments, heightSegments)
PlaneGeometry: new THREE.PlaneGeometry(width, height)
CylinderGeometry: new THREE.CylinderGeometry(radiusTop, radiusBottom, height)
TorusGeometry: new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments)
BufferGeometry: Use for custom/complex geometries (more efficient)

Materials

MeshStandardMaterial: Physically-based rendering (PBR), responds to lights
MeshPhongMaterial: Shiny, responds to lights
MeshLambertMaterial: Matte, responds to lights
MeshBasicMaterial: Flat color, ignores lights
MeshPhysicalMaterial: Advanced PBR with clearcoat, sheen, etc.

Best Practice: Use MeshStandardMaterial for realistic 3D objects. Always set metalness and roughness properties.

Lighting Setup

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:

Always include ambient light (30-60% intensity)
Use directional light as main light source
Add point/spot lights for accent lighting
Enable shadows on lights and meshes for depth
Adjust shadow map size based on scene complexity

Interactive Controls

OrbitControls Setup

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();

GUI Controls (dat.GUI)

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);
});

Custom Tailwind GUI Panels

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>

Performance Optimization

Efficient Rendering

Use BufferGeometry: Always prefer BufferGeometry over Geometry for better performance
Frustum Culling: Automatically handled by Three.js (objects outside camera view aren't rendered)
Instancing: Use InstancedMesh for repeated objects (trees, particles, etc.)
Level of Detail (LOD): Use THREE.LOD for objects at different distances
Texture Optimization: Use compressed textures, appropriate sizes (power of 2)
Reduce Draw Calls: Combine geometries, use texture atlases

Animation Loop Best Practices

let 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();

Memory Management

// 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();
        }
    }
});

Common 3D Patterns

Particle Systems

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);

Physics Simulations

For gravity, collisions, and physics:

Use simple Euler integration for basic physics
Calculate forces: force = mass * acceleration
Update velocity: velocity += force * deltaTime
Update position: position += velocity * deltaTime

3D Data Visualization

Use THREE.BarChart patterns with BoxGeometry
Color-code bars by value
Add interactive labels on hover
Animate transitions when data changes

Procedural 3D Generation

Use mathematical functions to generate geometry
Create terrain with Perlin noise
Generate organic shapes with parametric equations
Use THREE.ParametricGeometry for custom surfaces

Code Structure

Organized Three.js Code Pattern

// 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();
});

Responsive Design

Handle Window Resize

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Mobile Optimization

Reduce particle counts on mobile
Lower shadow map resolution
Disable expensive post-processing effects
Use simpler materials (MeshLambertMaterial instead of MeshStandardMaterial)

Best Practices Summary

Always use WebGLRenderer with antialiasing enabled
Enable shadows for depth perception (directional light + shadow casting)
Use OrbitControls for camera interaction
Implement proper lighting (ambient + directional + accent lights)
Use requestAnimationFrame for smooth animations
Handle window resize events
Dispose of resources when removing objects
Use delta time in animations for frame-rate independence
Optimize geometry with BufferGeometry and instancing
Add GUI controls for interactive parameter adjustment

Example: Complete 3D Scene Template

// 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);
});

Critical Requirements for Generated Code

When generating 3D applications, ALWAYS:

Include Three.js and OrbitControls CDN links
Set up scene, camera, and renderer with proper configuration
Add ambient + directional lighting with shadows enabled
Implement OrbitControls for camera interaction
Use requestAnimationFrame for animation loop
Handle window resize events
Use MeshStandardMaterial for realistic rendering
Enable shadow casting/receiving on objects
Add GUI controls (dat.GUI or custom Tailwind panels) for parameter adjustment
Structure code cleanly with clear separation of concerns
Include error handling for WebGL context loss
Optimize for performance (BufferGeometry, efficient rendering)