让你的3D模型动起来：纯前端手势控制3D物体指南

前端

2024-01-15 04:13:27

用 Three.js 和 MediaPipe 踏上 3D 模型操控之旅

准备好了吗？今天，我们将开启一段激动人心的旅程，探索如何仅使用前端技术操控 3D 模型。借助 Three.js 和 MediaPipe 这两大法宝，我们将学会如何让 3D 模型在指尖之下栩栩如生。

Three.js 和 MediaPipe：这对梦之队的威力

Three.js

Three.js 是一款功能强大的 3D 渲染库，它能将你的浏览器变成一个 3D 创作游乐场。它让你能够轻松创建和操控 3D 场景，让你的想象力在虚拟空间中尽情驰骋。

MediaPipe

MediaPipe 是谷歌出品的一款人工智能工具，专注于处理各种姿势检测任务。它可以识别出你的手势，并将其转换为可用于控制其他应用程序的数据。

当 Three.js 和 MediaPipe 联手合作时，它们就能创造出不可思议的效果。我们将会实现两个惊人的应用：

用手势控制 3D 模型上下移动，仿佛拥有了操控模型的超能力。
用手势控制模型缩放，让模型在你的指尖变大变小，尽显模型的动感。

踏上征程：动手打造 3D 模型操控体验

1. 搭建环境

首先，我们需要搭建好我们的开发环境。准备好 node.js、npm、Three.js 和 MediaPipe 等工具，并创建一个新的项目文件夹。

2. 安装依赖项

使用 npm 安装 Three.js 和 MediaPipe 等依赖项。这些依赖项就像我们搭建舞台的道具，有了它们，我们的 3D 表演才能顺利上演。

3. 创建 3D 场景

接下来，我们需要创建一个 3D 场景，就像给我们的 3D 模型搭建一个舞台。在 Three.js 中，我们可以用代码轻松搞定这个任务。

const scene = new THREE.Scene();

4. 添加 3D 模型

现在，是时候让我们的主角登场了！我们将一个 3D 模型引入场景，可以是任何你喜欢的模型，比如一个茶壶、一个球体，甚至是你自己设计的模型。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

5. 整合 MediaPipe

MediaPipe 将帮助我们检测手势，就像一台摄像机，时刻捕捉你的手部动作。我们把 MediaPipe 集成到项目中，它就像一个指挥家，引导着模型的运动。

const hands = new Hands({locateFile: (file) => {
  return `https://unpkg.com/mediapipe/dist/${file}`;
}});

6. 实现手势控制

现在，我们到了激动人心的时刻！通过 MediaPipe，我们可以检测到你的手势，并将其转换为控制模型移动和缩放的信号。这就像赋予了模型生命，让它随着你的手势翩翩起舞。

hands.onResults((results) => {
  const landmarks = results.multiHandLandmarks;
  if (landmarks && landmarks.length > 0) {
    const indexFingerTip = landmarks[0][8];
    const thumbTip = landmarks[0][4];
    const distance = Math.sqrt((indexFingerTip.x - thumbTip.x) ** 2 + (indexFingerTip.y - thumbTip.y) **  2);
    cube.position.y = distance * 10;
    cube.scale.x = distance;
    cube.scale.y = distance;
    cube.scale.z = distance;
  }
});