threejs by mrgoonie/claudekit-skills
npx skills add https://github.com/mrgoonie/claudekit-skills --skill threejs使用 Three.js 构建高性能的 3D Web 应用程序——一个跨浏览器的 WebGL/WebGPU 库。
在以下场景中使用:
references/00-fundamentals.md - 基础references/01-getting-started.md - 场景设置、基础几何体、材质、灯光、渲染循环references/02-loaders.md - GLTF、FBX、OBJ、纹理加载器references/03-textures.md - 类型、映射、包裹、过滤广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
references/04-cameras.mdreferences/05-lights.md - 类型、阴影、辅助工具references/06-animations.md - 剪辑、混合器、关键帧references/07-math.md - 向量、矩阵、四元数、曲线references/18-geometry.md - 内置形状、BufferGeometry、自定义几何体、实例化references/11-materials.md - PBR、基础、Phong、Lambert、物理、卡通、法线、深度、原始、着色器材质、材质属性references/08-interaction.md - 光线投射、拾取、变换references/09-postprocessing.md - 通道、辉光、SSAO、SSRreferences/10-controls.md - 轨道、变换、第一人称references/11-materials-advanced.md - PBR、自定义着色器references/12-performance.md - 实例化、LOD、批处理、剔除references/13-node-materials.md - 着色器图、计算references/14-physics-vr.md - Ammo、Rapier、Jolt、VR/XRreferences/15-specialized-loaders.md - SVG、VRML、特定领域references/16-webgpu.md - 现代后端、计算着色器references/17-shader.md - GLSL、ShaderMaterial、uniforms、自定义效果// 1. 场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. 添加对象
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 3. 添加灯光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));
// 4. 动画循环
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
每周安装数
438
代码仓库
GitHub 星标数
1.9K
首次出现
Jan 21, 2026
安全审计
安装于
opencode364
gemini-cli342
codex334
claude-code329
cursor302
github-copilot295
Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.
Use when working with:
references/00-fundamentals.md - Fundamentalsreferences/01-getting-started.md - Scene setup, basic geometries, materials, lights, rendering loopreferences/02-loaders.md - GLTF, FBX, OBJ, texture loadersreferences/03-textures.md - Types, mapping, wrapping, filteringreferences/04-cameras.md - Perspective, orthographic, controlsreferences/05-lights.md - Types, shadows, helpersreferences/06-animations.md - Clips, mixer, keyframesreferences/07-math.md - Vectors, matrices, quaternions, curvesreferences/18-geometry.md - Built-in shapes, BufferGeometry, custom geometry, instancingreferences/11-materials.md - PBR, basic, phong, lambert, physical, toon, normal, depth, raw, shader materials, material propertiesreferences/08-interaction.md - Raycasting, picking, transformsreferences/09-postprocessing.md - Passes, bloom, SSAO, SSRreferences/10-controls.md - Orbit, transform, first-personreferences/11-materials-advanced.md - PBR, custom shadersreferences/12-performance.md - Instancing, LOD, batching, cullingreferences/13-node-materials.md - Shader graphs, computereferences/14-physics-vr.md - Ammo, Rapier, Jolt, VR/XRreferences/15-specialized-loaders.md - SVG, VRML, domain-specificreferences/16-webgpu.md - Modern backend, compute shadersreferences/17-shader.md - GLSL, ShaderMaterial, uniforms, custom effects// 1. Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. Add Objects
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 3. Add Lights
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));
// 4. Animation Loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
Weekly Installs
438
Repository
GitHub Stars
1.9K
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode364
gemini-cli342
codex334
claude-code329
cursor302
github-copilot295
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
2,800 周安装