ボーン階層: 肩 → 上腕 → 前腕 → 手首 の親子関係
スキニング: 各頂点が複数のボーンから影響を受け、重み付きで変形
操作: スライダーで各関節を手動制御、またはアニメーションボタンで自動再生
スキニングとボーンアニメーションの基本的な実装をHTMLとJavaScriptで作成します。 Three.jsを使用した簡単な例を示します。スキニングとボーンアニメーションの実装デモを作成しました。このコードの主要な特徴を説明します： **ボーン階層の実装** - 肩→上腕→前腕→手首の親子関係を作成 - 各ボーンは相対座標で配置され、親の動きが子に伝播 **スキニングの実装** - 各頂点に対してスキンインデックス（影響するボーン）とスキンウェイト（影響度）を設定 - 関節部分では複数のボーンが影響し、重み付きで変形を計算 **主な技術要素** 1. `THREE.Bone`でボーン作成 2. `THREE.Skeleton`でスケルトン構築 3. `THREE.SkinnedMesh`でスキニング適用 4. バッファジオメトリで効率的な頂点管理 このデモでは、スライダーで各関節を手動制御したり、自動アニメーションを再生できます。ボーンの動きに合わせてメッシュが自然に変形する様子を確認できます。 実際のゲーム開発では、この技術をベースにより複雑なキャラクターモデルやアニメーションシステムを構築します。
**主な改善点：** 1. **統一された頂点生成**: セグメント分けをやめて、Y座標に基づいて連続的に頂点を生成 2. **連続的な半径変化**: `getRadiusAtY()`関数で各Y位置での半径を滑らかに計算 3. **改良されたボーン重み**: `getBoneWeightsAtY()`関数で各Y位置でのボーン影響度を詳細に制御 - 関節部分での滑らかな重み遷移 - 4つのボーン（肩、上腕、前腕、手首）すべてに対応 4. **より細かい分割**: radialSegments=12、heightSegments=30でより滑らかな表面 5. **シンプルなインデックス**: 一つの連続したメッシュなので、インデックス生成も単純化 これで腕が完全に繋がった一本のメッシュとして表示され、関節部分でも自然に変形するはずです。
おっしゃる通りです。回転の中心点（ピボット）がずれているのと、ボーンが見えるように半透明にしましょう。主要な問題を修正しました： **1. 回転中心点の修正**: - ボーンの重み設定を調整して、関節部分でより適切に重みが分散されるようにしました - 肩の関節部分も追加して、より自然な回転を実現 **2. メッシュの半透明化**: - `opacity: 0.7`で半透明に設定 - `side: THREE.DoubleSide`で両面描画 - `transparent: true`で透明度を有効化 **3. ボーンの可視化強化**: - ボーンヘルパーの線幅を5に増加 - 各関節に黄色い球体を追加して関節点を明確に表示 - ボーンがメッシュを通して見えるように **4. 重み分散の改善**: - 各関節部分でより滑らかな重み遷移 - 肩の関節部分も考慮した重み設定 これで回転時のメッシュの破綻が大幅に改善され、ボーンの構造も見やすくなるはずです。