技能 threejs-builder

🎮

threejs-builder

Name: threejs-builder
Author: CesarAugustusGroB

安全 ⚙️ 外部命令🌐 网络访问📁 文件系统访问

Crie Aplicações Web 3D com Three.js

A criação de conteúdo 3D para web requer compreensão de WebGL, shaders e programação de gráficos 3D. Esta habilidade gera aplicações Three.js completas com configuração de cena, iluminação, materiais, animações e renderização responsiva usando módulos ES modernos.

支持: Claude Codex Code(CC)

📊 70 充足

下载技能 ZIP

在 Claude 中上传

前往设置 → 功能 → 技能 → 上传技能

开启并开始使用

测试它

正在使用“threejs-builder”。 Create a Three.js scene with floating geometric shapes that respond to mouse movement

预期结果:

Complete HTML file with Three.js CDN imports
Multiple 3D geometries (cubes, spheres, torus shapes)
Smooth mouse-based rotation and position animations
Ambient and directional lighting setup
Responsive canvas that fills the viewport
Modern ES module import structure

正在使用“threejs-builder”。 Build a 3D particle field with a glowing central object

预期结果:

BufferGeometry-based particle system with 1000+ particles
InstancedMesh for efficient rendering
Glowing central object with emissive material
Continuous rotation animation loop
Resize handler for window responsiveness

正在使用“threejs-builder”。 Create an interactive 3D product viewer with orbit controls

预期结果:

OrbitControls for mouse drag rotation and zoom
Smooth damping for natural camera movement
Standard material with realistic lighting
Responsive canvas sizing
Clean code structure with comments

安全审计

安全

v5 • 1/16/2026

This is a documentation-only skill containing Three.js tutorials and code examples. All 140 static findings are false positives. The scanner misidentified JavaScript template literals (backticks) as Ruby/shell backtick execution, GLSL shader code as command execution, and legitimate graphics programming terms (raycaster, loader, copy) as security threats. This skill contains no executable code, no network calls, no file system access, and no security-sensitive operations.

已扫描文件

981

分析行数

发现项

审计总数

风险因素

⚙️ 外部命令 (100)

🌐 网络访问 (15)

references/advanced-topics.md:13 references/advanced-topics.md:14 references/advanced-topics.md:15 references/advanced-topics.md:78 references/advanced-topics.md:79 references/advanced-topics.md:80 references/advanced-topics.md:81 references/advanced-topics.md:211 references/advanced-topics.md:263 references/advanced-topics.md:264 references/advanced-topics.md:394 skill-report.json:6 SKILL.md:51 SKILL.md:221 SKILL.md:222

📁 文件系统访问 (1)

skill-report.json:6

审计者: claude 查看审计历史 →

质量评分

架构

100

可维护性

内容

社区

100

安全

规范符合性

你能构建什么

Criar portfólios 3D

Construa seções hero 3D interativas, vitrines de produtos e fundos animados para portfólios web modernos.

Prototipar interfaces 3D

Visualize e teste rapidamente conceitos de UI 3D, configuradores de produtos e visualizações de dados interativas.

Ensinar conceitos 3D para web

Gere exemplos didáticos e limpos do Three.js para ensinar WebGL, matemática 3D e gráficos interativos.

试试这些提示

Cena 3D Básica

Crie uma aplicação Three.js com um cubo colorido girando, iluminação adequada e design responsivo. Use módulos ES modernos.

Produto Interativo

Crie uma cena Three.js mostrando um produto 3D como um relógio ou sapato com controles de órbita, iluminação realista e materiais suaves.

Sistema de Partículas

Construa uma aplicação Three.js com milhares de partículas animadas formando padrões interessantes com interação do mouse.

Visualização de Dados

Crie um gráfico de barras ou dispersão 3D no Three.js com transições de dados animadas e controles de câmera interativos.

最佳实践

Sempre inclua iluminação adequada, pois a maioria dos materiais requer
Use Math.min(window.devicePixelRatio, 2) para limitar a resolução
Importe controles e carregadores do caminho examples/jsm/
Crie geometrias e materiais uma vez, reutilize para performance

避免

Nunca crie novas geometrias no loop de animação
Evite padrões legados CommonJS ou variável global THREE
Não esqueça de adicionar objetos à cena ou eles não serão renderizados
Nunca pule o listener de evento resize para design responsivo

常见问题

Quais navegadores suportam Three.js?

Qualquer navegador com suporte WebGL, incluindo Chrome, Firefox, Safari e Edge. O Three.js volta para renderização canvas se WebGL estiver indisponível.

Posso usar isso com React ou Vue?

Sim. Para React, considere react-three-fiber. Para Vue, monte o canvas Three.js em um hook de mounted do componente.

Como adiciono isso ao meu site existente?

Copie o HTML gerado ou extraia o JavaScript. Importe Three.js de CDN ou npm antes do seu código customizado.

Three.js é gratuito para uso comercial?

Sim. Three.js usa licença MIT. Você pode usá-lo livremente em projetos comerciais e trabalhos para clientes.

Por que minha cena está preta?

A maioria dos materiais precisa de iluminação. Adicione AmbientLight ou DirectionalLight, ou use MeshBasicMaterial que não requer luzes.

Como posso otimizar a performance?

Reutilize geometrias e materiais, limite a resolução de sombras, use InstancedMesh para muitos objetos e mantenha contagens de triângulos razoáveis.

开发者详情

作者

CesarAugustusGroB

许可证

MIT

仓库

https://github.com/CesarAugustusGroB/SHINOBI-WAY-the-inifinite-tower/tree/main/.claude/skills/threejs-builder

引用

main

文件结构

📁 references/

📄 advanced-topics.md

📄 SKILL.md