我用 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。这能让太阳看起来真的在“发光”，而不是一个黄色的球体。

// 辉光效果配置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)。

// 左手捏合缩放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) 在屏幕归一化坐标系中的位置。当手指偏离中心时，根据偏离方向和距离计算旋转速度。

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

🌟 结语

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

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

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