القائمة
Create interactive 3D visualizations using Three.js with orbit controls, lighting, and animation
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/veelenga/preview-skills --skill preview-threejsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Render 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
| 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. = () {
time = .() * ;
earth.. = .(time) * ;
earth.. = .(time) * ;
earth.. = time;
moon.. = earth.. + .(time * ) * ;
moon.. = earth.. + .(time * ) * ;
};
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 changes