CommunityImagemgithub.com

cloudai-x/threejs-loaders

Carregamento de assets Three.js - GLTF, texturas, imagens, modelos, padrões assíncronos. Utilize ao carregar modelos 3D, texturas, ambientes HDR ou gerenciar o progresso de carregamento.

O que é threejs-loaders?

Este skill para agentes de IA fornece funcionalidades para carregamento eficiente de assets Three.js, incluindo modelos GLTF, texturas, imagens e ambientes HDR. Ele é útil para desenvolvedores que trabalham com visualização 3D, realidade virtual ou aumentada, e aplicações web interativas. O skill abstrai os padrões complexos de carregamento assíncrono e oferece suporte para gerenciamento de progresso, tornando o código mais limpo e previsível. Compatível com agentes como Claude Code, Cursor e Codex, ele pode ser invocado durante a criação de cenas 3D para otimizar a experiência do usuário e evitar gargalos de carregamento. Sua documentação SKILL.md orienta o uso correto, incluindo exemplos de código e boas práticas.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cloudai-x/threejs-skills/tree/main/skills/threejs-loaders

Installed? Explore more Imagem skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que threejs-loaders faz?

Carregamento de assets Three.js - GLTF, texturas, imagens, modelos, padrões assíncronos. Utilize ao carregar modelos 3D, texturas, ambientes HDR ou gerenciar o progresso de carregamento.

Descrição

Este pacote oferece uma interface simplificada para carregar diversos tipos de assets Three.js, como modelos GLTF, texturas, imagens e ambientes HDR. Ele gerencia o carregamento assíncrono, fornece callbacks de progresso e facilita a integração com cenas Three.js.

Como usar

import { loadGLTF, loadTexture, loadHDR } from 'cloudai-x/threejs-loaders';

// Carregar um modelo GLTF
const model = await loadGLTF('path/to/model.gltf');
scene.add(model.scene);

// Carregar uma textura
const texture = await loadTexture('path/to/texture.jpg');

// Carregar um ambiente HDR
const envMap = await loadHDR('path/to/environment.hdr');

Gerencie o Progresso

import { loadGLTF } from 'cloudai-x/threejs-loaders';

const model = await loadGLTF('model.gltf', {
  onProgress: (progress) => {
    console.log(`Carregando: ${Math.round(progress * 100)}%`);
  }
});

Plataformas Suportadas

  • Claude Code: Suportado via integração com ferramentas de IA.
  • Cursor: Compatível com comandos naturais.
  • Codex: Pode ser utilizado com prompts específicos.

Licença

MIT

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

cloudai-x/threejs-animation

Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

cloudai-x/threejs-fundamentals

Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.

cloudai-x/threejs-geometry

Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.

cloudai-x/threejs-interaction

Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

cloudai-x/threejs-lighting

Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.

cloudai-x/threejs-materials

Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.

cloudai-x/threejs-postprocessing

Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

cloudai-x/threejs-shaders

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

cloudai-x/threejs-textures

Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.

Habilidades Relacionadas