Menu
Create interactive 3D visualizations using Three.js with orbit controls, lighting, and animation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | preview-threejs |
| description | Create interactive 3D visualizations using Three.js with orbit controls, lighting, and animation |
| user-invocable | true |
| commands | ["preview-threejs"] |
Interactive Three.js 3D visualization viewer with pre-configured scene, camera, lighting, and orbit controls.
When the user asks to create a 3D visualization, write the Three.js code and pipe it to the script. Use the Bash tool to execute this skill's run.sh script:
# Pipe Three.js code
cat scene.js | ./run.sh
# Or from a file
./run.sh model.threejs
The script handles all HTML generation and automatically opens the result in the browser. Do NOT open the file manually to avoid duplicate tabs.
# Preview a Three.js visualization file
/preview-threejs solar-system.threejs
# Or use .3d extension
/preview-threejs model.3d
# Pipe Three.js code (preferred for temporary content)
cat visualization.js | /preview-threejs
echo "const cube = new THREE.Mesh(...);\nscene.add(cube);" | /preview-threejs
Best Practice: For temporary or generated 3D scenes, prefer piping over creating temporary files. This avoids cluttering your filesystem and the content is automatically cleaned up.
The script works with sensible defaults but supports these flags for flexibility:
-o, --output PATH - Custom output path--no-browser - Skip browser, output file path onlyUse this skill when the user wants to:
Your code should:
scenescene.userData.customAnimate for animationYour code runs with these variables ready to use:
const THREE = THREE; // Three.js library (r160)
const scene = scene; // Scene object (ready)
const camera = camera; // PerspectiveCamera at (0, 0, 5)
const renderer = renderer; // WebGLRenderer (configured)
Lighting already configured:
Orbit controls enabled:
// Create a simple cube
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
color: 0x00ff00,
metalness: 0.3,
roughness: 0.7,
});
const cube = new THREE.Mesh(geometry, material);
// Add to scene
scene.add(cube);
// Optional: Add animation
scene.userData.customAnimate = function () {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
};
// Sphere
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(1, 32, 32),
new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
scene.add(sphere);
// Cylinder
const cylinder = new THREE.Mesh(
new THREE.CylinderGeometry(0.5, 0.5, 2, 32),
new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(cylinder);
// Torus
const torus = new THREE.Mesh(
new THREE.TorusGeometry(1, 0.3, 16, 100),
new THREE.MeshStandardMaterial({ color: 0x0000ff })
);
scene.add(torus);
// Standard (responds to lighting) - RECOMMENDED
const standard = new THREE.MeshStandardMaterial({
color: 0xff0000,
metalness: 0.5,
roughness: 0.5,
});
// Basic (no lighting)
const basic = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// Wireframe
const wireframe = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireframe: true,
});
// Phong (shiny)
const phong = new THREE.MeshPhongMaterial({
color: 0x0000ff,
shininess: 100,
});
const group = new THREE.Group();
group.add(mesh1);
group.add(mesh2);
group.position.set(0, 1, 0);
group.rotation.y = Math.PI / 4;
scene.add(group);
scene.userData.customAnimate = function () {
// Called every frame (~60fps)
object.rotation.y += 0.01;
object.position.x = Math.sin(Date.now() * 0.001) * 3;
// Can access objects via scene
scene.children.forEach((child) => {
if (child.isMesh) {
child.rotation.x += 0.005;
}
});
};
// Position (x, y, z)
object.position.set(0, 2, 0);
object.position.x = 1;
object.position.y = 2;
object.position.z = 3;
// Rotation (in radians)
object.rotation.set(0, Math.PI / 4, 0);
object.rotation.y = Math.PI / 2; // 90 degrees
// Scale
object.scale.set(2, 2, 2); // Double size
// Sun
const sun = new THREE.Mesh(
new THREE.SphereGeometry(1, 32, 32),
new THREE.MeshBasicMaterial({ color: 0xffff00 })
);
scene.add(sun);
// Earth
const earth = new THREE.Mesh(
new THREE.SphereGeometry(0.3, 32, 32),
new THREE.MeshStandardMaterial({ color: 0x0000ff })
);
scene.add(earth);
// Moon
const moon = new THREE.Mesh(
new THREE.SphereGeometry(0.1, 32, 32),
new THREE.MeshStandardMaterial({ color: 0xcccccc })
);
scene.add(moon);
// Animation
scene.userData.customAnimate = function () {
const time = Date.now() * 0.001;
// Earth orbits sun
earth.position.x = Math.cos(time) * 4;
earth.position.z = Math.sin(time) * 4;
earth.rotation.y = time;
// Moon orbits earth
moon.position.x = earth.position.x + Math.cos(time * 4) * 0.8;
moon.position.z = earth.position.z + Math.sin(time * 4) * 0.8;
};
customAnimate() called every framecustomAnimate to see motionscene.add(object)object.scale.set(2, 2, 2)camera.position.z = 10scene.userData.customAnimate is defined as a function.threejs, .3dThe skill generates a standalone HTML file at:
.preview-skills/threejs/{filename}.html
This skill is standalone and includes all dependencies:
lib/templates/To modify the skill:
config.sh for configurationtemplates/scripts/threejs-renderer.js for behaviortemplates/styles/threejs.css for stylingrun.sh to test changesRender and preview CSV files in browser with interactive sorting, filtering, and column statistics
Create interactive 2D data visualizations using D3.js with zoom, pan, and custom rendering
Git diff preview tool with GitHub-style formatting and interactive features
Render and preview JSON files in browser with syntax highlighting, collapsible tree view, and search
Create interactive maps with markers, routes, and geographic data using Leaflet
Render and preview Markdown files in browser with GitHub-flavored formatting and syntax highlighting