スキル threejs-skills
📦

threejs-skills

安全

Three.jsで3Dグラフィックスとインタラクティブなシーンを作成

3Dウェブ体験の構築には、シーン設定、照明、レンダリングパターンの理解が必要です。このスキルは、パフォーマンスの高いインタラクティブな3Dコンテンツを作成するための体系的なThree.jsパターンを提供します。

対応: Claude Codex Code(CC)
🥉 72 ブロンズ
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「threejs-skills」を使用しています。 クリック時に色が変化する回転する球体を持つ3Dシーンを作成

期待される結果:

  • Three.js r128 CDNインポートを含む完全なHTMLファイル
  • z=5に配置されたカメラでのシーン初期化
  • 滑らかな外観のための32セグメントを持つSphereGeometry
  • 初期色を持つMeshStandardMaterial
  • アンビエントおよび指向性照明のセットアップ
  • x軸とy軸で球体を回転させるアニメーションループ
  • クリック検出のためのレイキャストの実装
  • 交差時にマテリアル色を変更するイベントリスナー
  • レスポンシブキャンバスのウィンドウリサイズハンドラー

「threejs-skills」を使用しています。 カメラに向かって流れるパーティクルフィールドを構築

期待される結果:

  • Float32Arrayを使用した2000パーティクルのBufferGeometry
  • 3D空間に分散されたランダムな初期位置
  • 白色とサイズ0.02のPointsMaterial
  • 各フレームでz位置を更新するアニメーションループ
  • パーティクルがカメラ閾値を通過した時の位置リセット
  • クリーンアップのための適切な disposeパターン
  • スムーズな60fpsパフォーマンス最適化

セキュリティ監査

安全
v1 • 2/25/2026

This skill contains documentation-only content (SKILL.md) teaching Three.js 3D graphics development. All 82 static analysis findings are false positives: backtick characters are Markdown code block delimiters, not shell execution; URLs are CDN resource references for the Three.js library; cryptographic warnings are pattern mismatches on version numbers and documentation text. No executable code, no network calls, no command injection vectors exist in this educational content.

1
スキャンされたファイル
655
解析された行数
0
検出結果
1
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
34
コミュニティ
100
セキュリティ
96
仕様準拠

作れるもの

インタラクティブな商品ビジュアライゼーション

ユーザーがブラウザ内で回転、ズーム、探索できる3D商品ディスプレイを作成します。

データ可視化ダッシュボード

複雑なデータセットを没入型の3Dチャート、グラフ、空間表現に変換します。

教育用3Dコンテンツ

解剖学、天文学、建築、または工学の概念を教えるためのインタラクティブなモデルを構築します。

これらのプロンプトを試す

基本的な3Dシーンセットアップ 
回転する立方体を含む基本的なThree.jsシーンを作成します。シーンセットアップ、カメラ、アンチエイリアス付きレンダラー、色付き立方体ジオメトリ、照明、アニメーションループを追加します。ウィンドウリサイズ処理を実装してください。
マウスコントロール付きインタラクティブ球体 
マウス移動に反応するインタラクティブな3D球体を構築します。OrbitControlsを使わずにカスタムカメラコントロール（ドラッグで回転、スクロールでズーム）を実装します。適切な照明でMeshStandardMaterialを使用してください。
パーティクルシステムアニメーション 
BufferGeometryを使用して1000以上のパーティクルを持つパーティクルシステムを生成します。パーティクルが時間とともに移動または回転するアニメーションを追加します。ジオメトリとマテリアルの破棄などの適切なパフォーマンスプラクティスを含めてください。
レイキャストオブジェクト選択 
3Dオブジェクト上的マウスクリックとホバーを検出するためのレイキャストを実装します。ホバー時にオブジェクトをスケールし、カーソルスタイルを変更します。クリック時にオブジェクトの色を変更します。クリック可能なオブジェクトの配列を含めてください。

ベストプラクティス

  • アーティファクト互換性のために常にThree.js r128 CDNを使用し、機能可用性を確認
  • カメラのアスペクト比とレンダラー尺寸を更新するためにウィンドウリサイズハンドラーを追加
  • メモリリークを防ぐためにオブジェクト削除時にジオメトリ、マテリアル、テクスチャを破棄

回避

  • r128 CDNで利用できないOrbitControlsやアドオンインポートの使用
  • r142以降のバージョンが必要なCapsuleGeometryの使用
  • MeshStandardMaterialなどのライティングマテリアル使用時に照明を追加し忘れること

よくある質問

なぜこのスキルはThree.js r128 specificallyを使用しますか？
r128バージョンはアーティファクト環境と互換性のある最も安定したCDNリリースです。新機能にはnpmビルドツールが必要です。
このセットアップでOrbitControlsを使用できますか？
いいえ、OrbitControlsはCDNでは利用できないexamplesフォルダからインポートする必要があります。このスキルでは代わりにカスタムカメラコントロールの実装を教えています。
GLTFファイルなどのカスタム3Dモデルを追加するには？
GLTF読み込みにはnpmのGLTFLoaderアドオンが必要です。CDN専用プロジェクトでは、BufferGeometryまたはプリミティブ形状を使用してプログラム的にジオメトリを作成します。
なぜ私の3Dシーンが黒い画面を表示していますか？
一般的な原因には：オブジェクトがシーンに追加されていない、カメラの位置が正しくない、renderer.render()の呼び出しがない、ライトなしでライティングマテリアルを使用していること。
どのくらいの最大パーティクル数を使用すべきですか？
スムーズな60fpsパフォーマンスのため1000〜5000パーティクルから始めます。フレームレートが低下した場合はターゲットデバイスでテストして数を減らしてください。
3Dオブジェクトをよりリアルに見せるには？
適切な照明セットアップでMeshStandardMaterialを使用し、rendererのアンチエイリアスを有効にし、shadowMap.enabledでシャドウを追加し、適切なトーンンマッピングを適用します。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-skills

参照

main

ファイル構成

📄 SKILL.md