Communityコーディング&開発github.com

cloudai-x/threejs-fundamentals

Three.jsのシーン設定、カメラ、レンダラー、Object3D階層、座標系を扱います。3Dシーンのセットアップ、カメラ作成、レンダラーの設定、オブジェクト階層の管理、トランスフォーム操作に使用します。

threejs-fundamentals とは?

このスキルは、Three.jsを使用した3Dシーン構築の基礎を網羅的に提供します。シーンのセットアップ、カメラ(パースペクティブ・オーソグラフィック)の作成と設定、レンダラーの構成、そしてObject3Dを中心としたオブジェクト階層と座標変換(位置・回転・スケール)の管理方法を具体的に説明します。開発者はこのスキルを通じて、宣言的かつ効率的に3Dグラフィックスを構築できるようになります。対応プラットフォームはClaude Code、Cursor、Codexなどで、JavaScript/TypeScript環境におけるThree.jsコーディングに直接活用できます。また、ベストプラクティスや一般的なパターンも示されており、初心者から中級者まで幅広く役立つ内容です。このスキルを利用することで、複雑な3Dシーンの初期構築やオブジェクトの動的な制御を、より少ない試行錯誤で実現できます。

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

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

threejs-fundamentals は何をしますか?

Three.jsのシーン設定、カメラ、レンダラー、Object3D階層、座標系を扱います。3Dシーンのセットアップ、カメラ作成、レンダラーの設定、オブジェクト階層の管理、トランスフォーム操作に使用します。

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-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-loaders

Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.

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.

関連スキル