我用Gemini3pro 造了个手控全息太阳系

想象一下，挥挥手就能旋转整个太阳系，捏合手指就能拉近观察土星的光环。这听起来像是科幻电影《少数派报告》中的场景，但通过现代 Web 技术，我们完全可以在浏览器中实现这种体验。

今天，我要向大家介绍我的最新项目------Holographic Solar System 。这是一个结合了 Three.js 强大的 3D 渲染能力和 MediaPipe 先进手势识别技术的互动 Web 应用。

🚀 项目概览

项目源码地址：公众号 知识浅谈 回复 手控太阳系

这个项目的核心目标是创建一个沉浸式的、可通过手势控制的 3D 太阳系模型。用户不仅可以欣赏到带有辉光特效的逼真天体，还可以通过摄像头捕捉的手势来与场景进行实时交互。请看VCR

核心特性

沉浸式 3D 场景：完整的太阳系模型，包含太阳及八大行星，拥有真实的轨道、自转动画以及星空背景。
视觉特效 ：使用了 Three.js 的后处理技术（Post-processing），特别是 UnrealBloomPass，为太阳和明亮物体添加了炫目的辉光效果，增强了科幻感。
手势交互 (AI 驱动) ：集成了 Google 的 MediaPipe Hands ，无需任何穿戴设备，仅凭普通摄像头即可识别手部动作。
- 左手控制缩放：通过拇指和食指的捏合距离来控制相机的远近。
- 右手控制旋转：通过食指在空中的位置来控制整个太阳系的旋转角度。
信息标注：使用 CSS2DRenderer 为每个行星添加了始终面向屏幕的文本标签。

🛠️ 技术栈

Three.js: WebGL 3D 引擎，用于构建场景、相机、灯光和所有 3D 物体。
MediaPipe Hands: 高性能的手部追踪机器学习方案，用于实时捕捉手部骨骼关键点。
Vite: 下一代前端构建工具，提供极速的开发体验。

💡 实现亮点

1. 打造科幻感宇宙

为了让场景看起来不那么单调，我使用了 EffectComposer 和 UnrealBloomPass。这能让太阳看起来真的在"发光"，而不是一个黄色的球体。

javascript 复制代码

// 辉光效果配置
const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight), 
    1.5, 0.4, 0.85
);
bloomPass.threshold = 0.2;
bloomPass.strength = 1.5; // 强烈的辉光
bloomPass.radius = 0.5;

2. 手势控制逻辑

交互是这个项目的灵魂。在 HandTracker.js 中初始化 MediaPipe 后，我们将识别到的关键点数据传递给 SolarSystemScene.js 进行处理。

缩放 (左手)：计算拇指 (点 4) 和食指 (点 8) 之间的欧几里得距离。距离越小，相机越近；距离越大，相机越远。为了体验平滑，使用了线性插值 (Lerp)。

javascript 复制代码

// 左手捏合缩放
const distance = Math.sqrt(
    Math.pow(thumb.x - index.x, 2) +
    Math.pow(thumb.y - index.y, 2)
);
// 映射距离到相机 Z 轴位置
const targetZ = 60 - (distance * 200);
this.camera.position.z += (clampedZ - this.camera.position.z) * 0.2; // 平滑过渡

旋转 (右手)：追踪食指指尖 (点 8) 在屏幕归一化坐标系中的位置。当手指偏离中心时，根据偏离方向和距离计算旋转速度。

javascript 复制代码

// 右手位置控制旋转
if (x < 0.5 - deadzone) velY = (0.5 - deadzone - x) * sensitivity;
// ... 其他方向判断
this.solarSystemGroup.rotation.y += this.currentRotationVelocity.y;

🌟 结语

这个项目展示了 Web 前端技术的无限可能。通过结合图形学和 AI 视觉技术，我们可以创造出突破传统鼠标键盘限制的全新交互体验。

如果你对代码感兴趣，或者想亲自体验一下"手握星辰"的感觉，欢迎查看项目源码！

项目源码地址：公众号 知识浅谈 回复 手控太阳系