将代码粘贴到文本编辑器（例如记事本）中，并将文件名保存为“index.html”。当您在浏览器中打开保存的文件时，代码将运行。

使用网络摄像头捕捉到的人体动作被映射到狗的形状并绘制出来。狗的头、腿和尾巴根部都经过适当的绘制，以再现狗的身体形状。

您可以使用网络摄像头运动来模拟狗的骨骼。

现在，狗似乎站在地面上，并且根据网络摄像头镜头的骨骼估计来模拟狗形机器人的运动。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>犬型ロボットの骨格描画（前足を地面に近づけて固定）</title>
  <!-- TensorFlow.jsとPoseNetの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
  <!-- Three.jsの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.135.0/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.135.0/examples/js/controls/OrbitControls.js"></script>

  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; background-color: green; }
  </style>
</head>
<body>
  <!-- カメラ映像を非表示で取得するビデオ要素 -->
  <video id="video" width="640" height="480" autoplay style="display:none;"></video>
  
  <script>
    let scene, camera, renderer;

    // Three.jsの初期化
    function initThreeJS() {
      // シーンの作成
      scene = new THREE.Scene();
      // カメラの設定 (視野角, アスペクト比, 近接クリップ距離, 遠方クリップ距離)
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      // レンダラーの設定
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // カメラの位置を設定し、犬型ロボットが見えるようにカメラの視点を設定
      camera.position.set(0, 3, 5);
      camera.lookAt(0, 1, 0);

      // 照明の設定
      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(0, 5, 5).normalize();
      scene.add(light);

      // マウスで視点を回転できるようにするコントロールの追加
      const controls = new THREE.OrbitControls(camera, renderer.domElement);
    }

    // 犬型骨格を描画（前足を地面に近づけるように）
    function drawDogSkeleton(keypoints) {
      // keypoints（関節座標）を部位ごとにアクセスしやすい形式に変換
      const keypointsMap = keypoints.reduce((map, kp) => (map[kp.part] = kp, map), {});

      // 骨格ラインのペア定義（接続する部位の組み合わせ）
      const limbPairs = [
        ['leftShoulder', 'leftElbow'], ['leftElbow', 'leftWrist'], // 左前足
        ['rightShoulder', 'rightElbow'], ['rightElbow', 'rightWrist'], // 右前足
        ['leftHip', 'leftKnee'], ['leftKnee', 'leftAnkle'], // 左後足
        ['rightHip', 'rightKnee'], ['rightKnee', 'rightAnkle'], // 右後足
        ['leftShoulder', 'leftHip'], ['rightShoulder', 'rightHip'] // 胴体
      ];

      // スケールとオフセット（全体の表示位置を調整）
      const scale = 0.02;
      const yOffset = -1.5;

      // 前足の手首の位置をさらに下に設定
      const frontFootY = -2.0;

      // 前足の手首のY位置を地面に近づけるための関数
      const adjustYPosition = (point, isFrontLeg) => {
        // 前足の場合は固定高さをさらに下げて表示
        return isFrontLeg ? frontFootY : yOffset - (point.position.y - video.height / 2) * scale;
      };

      // 前のラインと点をすべて削除
      const existingObjects = scene.children.filter(child => child.type === 'Line' || (child.type === 'Mesh' && child.geometry.type === 'SphereGeometry'));
      existingObjects.forEach(obj => scene.remove(obj));

      // 各部位間のラインを描画
      limbPairs.forEach(([partA, partB]) => {
        const start = keypointsMap[partA];
        const end = keypointsMap[partB];
        if (start && end && start.score > 0.5 && end.score > 0.5) {
          // 太い青いラインで描画
          const material = new THREE.LineBasicMaterial({ color: 0x0000ff, linewidth: 5 });
          // 各ラインの始点と終点を設定
          const geometry = new THREE.BufferGeometry().setFromPoints([
            new THREE.Vector3(
              (start.position.x - video.width / 2) * scale, 
              adjustYPosition(start, partA.includes('Wrist')), 
              0
            ),
            new THREE.Vector3(
              (end.position.x - video.width / 2) * scale, 
              adjustYPosition(end, partB.includes('Wrist')), 
              0
            )
          ]);
          const line = new THREE.Line(geometry, material);
          scene.add(line);
        }
      });

      // 鼻の位置に赤い球を描画（頭の目印）
      const nose = keypointsMap['nose'];
      if (nose && nose.score > 0.5) {
        const { x, y } = nose.position;
        const geometry = new THREE.SphereGeometry(0.15, 32, 32);
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        const sphere = new THREE.Mesh(geometry, material);
        sphere.position.set((x - video.width / 2) * scale, yOffset - (y - video.height / 2) * scale, 0);
        scene.add(sphere);
      }
    }

    // アニメーションループ（再描画を行う）
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }

    // カメラの映像を取得してPoseNetで骨格推定を行う
    async function startPoseNet() {
      const video = document.getElementById('video');

      // ユーザーのカメラ映像を取得
      navigator.mediaDevices.getUserMedia({
        video: true
      }).then(stream => {
        video.srcObject = stream;
      });

      // PoseNetモデルの読み込み
      const net = await posenet.load();

      // カメラ映像の準備ができたらPoseNetで定期的に骨格推定を行う
      video.onloadeddata = async () => {
        setInterval(async () => {
          // 現在のフレームの骨格を推定
          const pose = await net.estimateSinglePose(video, {
            flipHorizontal: false
          });

          // 推定結果の骨格を描画
          drawDogSkeleton(pose.keypoints);
        }, 100); // 0.1秒間隔で更新
      };
    }

    // 初期化とアニメーション開始
    initThreeJS();
    animate();
    startPoseNet();
  </script>
</body>
</html>

使用网络摄像头捕捉到的人体动作被映射到狗的形状并绘制出来。 狗的头、腿和尾巴根部都经过适当的绘制，以再现狗的身体形状。

使用网络摄像头捕捉到的人体动作被映射到狗的形状并绘制出来。狗的头、腿和尾巴根部都经过适当的绘制，以再现狗的身体形状。