前端实现交互式3D人体肌肉解剖图：基于 Three.js + React Three Fiber 的完整方案

优质文章学习记录

— 5 min read

本文将详细介绍如何在前端实现一个交互式的3D人体肌肉解剖展示工具，用户可以旋转、缩放模型，点击任意肌肉查看中英文名称。

为什么要做这个？

传统的肌肉解剖学习通常依赖静态图片或昂贵的3D软件。作为健身爱好者，我希望能有一个免费、易用的在线工具来学习肌肉解剖知识。于是我决定自己动手，基于开源的 Z-Anatomy 项目，在浏览器中实现一个交互式的3D肌肉解剖图。

如果你想先体验效果，可以试试这个在线的3D肌肉功能解剖工具。

技术架构概览

┌─────────────────────────────────────────────────────────────┐ │ 用户浏览器 │ ├─────────────────────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ GLB 模型 │ -> │ Three.js │ -> │ React Three │ │ │ │ (Draco) │ │ 场景渲染 │ │ Fiber 组件 │ │ │ └─────────────┘ └─────────────┘ └─────────────────┘ │ │ │ │ │ ┌──────────────────┼──────────────────┐ │ │ v v v │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ 射线检测 │ │ 肌肉高亮 │ │ i18n 翻译 │ │ │ │ Raycaster │ │ 材质切换 │ │ 中英文名称 │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ └─────────────────────────────────────────────────────────────┘

模型来源与处理

Z-Anatomy 开源项目

Z-Anatomy 是一个开源的人体解剖学 Blender 项目，包含完整的人体肌肉、骨骼、器官等结构。原始文件约 300MB，包含 1000+ 个独立的 mesh 对象。

模型导出与压缩

为了在 Web 端使用，我们需要将 Blender 文件导出为 GLB 格式，并使用 Draco 压缩：

# export_cli.py - Blender 命令行导出脚本import bpy # 选择所有肌肉相关的对象 muscle_keywords =['muscle','deltoid','bicep','tricep','pectoralis',...]for obj in bpy.data.objects:if obj.type=='MESH': name_lower = obj.name.lower()ifany(keyword in name_lower for keyword in muscle_keywords): obj.select_set(True)# 导出为 GLB，启用 Draco 压缩 bpy.ops.export_scene.gltf( filepath='muscle-anatomy.glb', export_format='GLB', use_selection=True, export_draco_mesh_compression_enable=True, export_draco_mesh_compression_level=6,)

导出后的模型从 300MB 压缩到约 6.8MB，非常适合 Web 加载。

核心实现

1. 场景搭建 (React Three Fiber)

// muscle-scene.tsx import { Canvas } from '@react-three/fiber'; import { OrbitControls, Environment } from '@react-three/drei'; export function MuscleScene({ onMuscleClick, onMuscleHover, hoveredMuscle, selectedMuscle }) { return ( <Canvas camera={{ position: [1.5, 0.3, 2], fov: 50 }}> {/* 环境光照 */} <ambientLight intensity={0.6} /> <directionalLight position={[5, 5, 5]} intensity={0.8} /> {/* 3D 模型 */} <Suspense fallback={null}> <MuscleModel onMuscleClick={onMuscleClick} onMuscleHover={onMuscleHover} hoveredMuscle={hoveredMuscle} selectedMuscle={selectedMuscle} /> </Suspense> {/* 轨道控制器 */} <OrbitControls enablePan={false} minDistance={1} maxDistance={5} target={[0, 0.5, 0]} /> {/* 环境贴图 */} <Environment preset="studio" /> </Canvas> ); }

2. 模型加载与肌肉识别

// muscle-model.tsx import { useGLTF } from '@react-three/drei'; import * as THREE from 'three'; // 肌肉识别关键词 const muscleKeywords = [ 'muscle', 'deltoid', 'bicep', 'tricep', 'pectoralis', 'latissimus', 'trapezius', 'rectus', 'oblique', 'gluteus', 'quadricep', 'vastus', 'hamstring', 'gastrocnemius', 'soleus', // ... 更多关键词 ]; // 需要隐藏的非肌肉对象 const HIDDEN_KEYWORDS = [ 'region', 'fascia', 'bursa', 'ligament', 'membrane', '.j', '.t', // Z-Anatomy 的标签后缀 ]; function isMuscle(name: string): boolean { const lowerName = name.toLowerCase(); return muscleKeywords.some(keyword => lowerName.includes(keyword)) && !HIDDEN_KEYWORDS.some(keyword => lowerName.includes(keyword)); } export function MuscleModel({ onMuscleClick, onMuscleHover, hoveredMuscle, selectedMuscle }) { const { scene } = useGLTF('/models/muscle-anatomy.glb'); // 克隆场景并处理材质 const clonedScene = useMemo(() => { const clone = scene.clone(true); clone.traverse((child) => { if (child instanceof THREE.Mesh) { if (shouldHide(child.name)) { child.parent?.remove(child); return; } if (isMuscle(child.name)) { // 为肌肉设置红色系材质 child.material = child.material.clone(); child.material.color = new THREE.Color(0xc44d4d); child.material.roughness = 0.7; child.material.metalness = 0.1; } } }); return clone; }, [scene]); return ( <primitive object={clonedScene} position={[0, -0.84, 0]} onPointerOver={handlePointerOver} onPointerOut={handlePointerOut} onClick={handleClick} /> ); }

3. 交互高亮效果

// 高亮颜色配置 const HIGHLIGHT_COLOR = new THREE.Color(0x5ac57a); // 薄荷绿 - 悬停 const SELECTED_COLOR = new THREE.Color(0x4caf50); // 深绿 - 选中 // 更新高亮效果 useEffect(() => { clonedScene.traverse((child) => { if (child instanceof THREE.Mesh && isMuscle(child.name)) { const material = child.material as THREE.MeshStandardMaterial; const muscleId = getMuscleIdFromModelName(child.name); const isHovered = muscleId === hoveredMuscle; const isSelected = muscleId === selectedMuscle; if (isSelected) { material.emissive = SELECTED_COLOR; material.emissiveIntensity = 0.5; } else if (isHovered) { material.emissive = HIGHLIGHT_COLOR; material.emissiveIntensity = 0.3; } else { material.emissive = new THREE.Color(0x000000); material.emissiveIntensity = 0; } } }); }, [hoveredMuscle, selectedMuscle, clonedScene]);

4. 肌肉名称映射与多语言

Z-Anatomy 的命名格式是 Muscle name.l（左侧）/ Muscle name.r（右侧），我们需要将其映射到标准的肌肉 ID：

// muscles.tsconst muscleAliases: Record<string,string[]>={'pectoralis_major':['pectoralis major','sternocostal head of pectoralis major','clavicular head of pectoralis major',],'biceps_brachii':['biceps brachii','long head of biceps brachii','short head of biceps brachii',],// ... 更多映射};exportfunctiongetMuscleIdFromModelName(modelName:string):string|undefined{const cleanName = modelName .replace(/\.(l|r|el|er)$/i,'')// 移除左右后缀.toLowerCase().trim();for(const[muscleId, aliases]of Object.entries(muscleAliases)){if(aliases.some(alias => cleanName.includes(alias))){return muscleId;}}returnundefined;}

多语言翻译存储在 i18n 模块中：

// locales/zh/muscle-anatomy.tsexportconst muscleAnatomy ={ muscles:{ pectoralis_major:'胸大肌', biceps_brachii:'肱二头肌', triceps_brachii:'肱三头肌', latissimus_dorsi:'背阔肌', rectus_abdominis:'腹直肌', gluteus_maximus:'臀大肌', quadriceps_femoris:'股四头肌', gastrocnemius:'腓肠肌',// ... 150+ 肌肉翻译},};

性能优化

1. 模型压缩

  • 使用 Draco 压缩，模型从 300MB 压缩到 6.8MB
  • 在 Blender 中使用 Decimate Modifier 降低面数

2. 动态加载

// 使用 Next.js 动态导入，禁用 SSR const MuscleScene = dynamic( () => import('./muscle-scene').then((mod) => mod.MuscleScene), { ssr: false } );

3. 材质优化

  • 克隆材质避免全局修改
  • 使用 emissive 属性实现高亮，避免重新创建材质

应用场景

这套技术方案可以应用于多种场景：

  1. 健身教育：帮助健身爱好者了解肌肉位置和名称
  2. 医学教学：辅助医学生学习人体解剖
  3. 康复指导：展示特定肌肉群的位置
  4. 游戏开发：角色肌肉系统参考

如果你对健身相关的工具感兴趣，可以看看这些在线计算器：

总结

本文介绍了如何在前端使用 Three.js + React Three Fiber 实现交互式3D人体肌肉解剖展示。核心技术点包括：

  1. 模型处理：从 Z-Anatomy 导出并压缩 GLB 模型
  2. 场景搭建：使用 React Three Fiber 构建 3D 场景
  3. 交互实现：射线检测 + 材质高亮
  4. 多语言支持：肌肉名称中英文翻译

这套方案完全在浏览器端运行，无需后端服务，非常适合构建教育类的3D可视化应用。

相关链接：

Read more

【花雕学编程】Arduino BLDC 驱动方案 —— MimiClaw（迷你小龙虾）+ ESP32 嵌入式组合机器人

【花雕学编程】Arduino BLDC 驱动方案 —— MimiClaw（迷你小龙虾）+ ESP32 嵌入式组合机器人

这是一套面向无刷电机（BLDC）、高度集成、可快速开发、支持本地智能的机器人开发组合。它将 ESP32 高性能主控 + MimiClaw 智能控制框架 + Arduino 生态易用性 + BLDC 无刷电机驱动 融为一体，是目前创客、实验室、竞赛、小型机器人领域最实用、最稳定、性价比极高的嵌入式机器人方案。 一、核心定义（专业版一句话解释） MimiClaw（迷你小龙虾）+ ESP32是一套基于 Arduino 开发环境、面向 BLDC 无刷电机控制、支持本地智能决策的嵌入式机器人控制系统。它以 ESP32 为硬件核心，以 MimiClaw 为控制大脑，实现无刷电机驱动、传感器融合、自主决策、无线通信、多关节机器人控制一体化。 简单说：ESP32 = 身体与算力MimiClaw = 思考与逻辑BLDC 无刷驱动 = 动力系统Arduino
介绍终身机器人学习的数据集LIBERO

介绍终身机器人学习的数据集LIBERO

1 LIBERO的作用 LIBERO是一个用于研究多任务和终身机器人学习中知识迁移的综合基准测试平台，LIBERO是基于robosuite框架构建的。它专注于机器人操作任务，这些任务需要两类知识： 1. 陈述性知识：关于物体和空间关系的知识 2. 程序性知识：关于运动和行为的知识 2 核心原理 任务生成与基准设计 LIBERO提供了一个程序化生成管道，原则上可以生成无限数量的操作任务。系统包含130个任务，分为四个任务套件，每个套件都有受控的分布偏移： * LIBERO-Spatial/Object/Goal：专注于特定类型知识的迁移 * LIBERO-100：包含需要迁移纠缠知识的100个操作任务 学习框架 系统采用模仿学习作为主要学习方法，因为任务使用稀疏奖励函数（任务完成时获得+1奖励）。LIBERO提供高质量的人类遥操作演示数据集用于训练。 算法与策略架构 LIBERO实现了三种视觉运动策略网络： * bc_rnn_policy：基于RNN的行为克隆策略 * bc_transformer_policy：基于Transformer的行为克隆策略
Chrome 开发者工具（DevTools）快速入门——前端必备技能

Chrome 开发者工具（DevTools）快速入门——前端必备技能

在前端开发中，Chrome 开发者工具（DevTools） 是我们排查问题、优化性能、理解浏览器行为最强大的助手之一。无论是想快速定位页面样式异常、分析接口请求，还是调试 JavaScript 逻辑，DevTools 都能提供直观高效的方式帮助我们“看清代码背后发生了什么”。 这篇笔记将带你快速入门，从最基本的面板功能到常用调试技巧，让你能在实战中灵活运用它，提升开发效率与问题解决能力。 1. 打开方式与放大缩小 1. 快捷键： * Windows/Linux：F12 或 Ctrl + Shift + I * macOS：Command + Option + I 1. 右键打开：在页面任意元素上右键 → “检查 (Inspect)” 2. 菜单打开：点击右上角 ⋮ → “更多工具” → “开发者工具” 在使用 Chrome 开发者工具时，可以通过 鼠标滚轮 快速调整界面缩放。

Flutter-WebRTC 鸿蒙平台使用指南

1. 插件介绍 fluttertpc_flutter_webrtc 是一个专为开源鸿蒙(HarmonyOS)平台适配的 Flutter WebRTC 插件，基于官方的 flutter_webrtc 项目进行定制修改，提供了完整的 WebRTC 功能支持，包括实时音视频通信、设备管理、屏幕共享等核心能力。 主要功能特性 * 设备管理：支持枚举、选择音频/视频输入输出设备 * 媒体流处理：获取摄像头、麦克风媒体流，支持自定义分辨率和帧率 * 对等连接：实现完整的 WebRTC 信令流程和媒体协商 * 屏幕共享：支持获取屏幕共享媒体流 * 数据通道：支持点对点数据传输 2. 插件安装与配置 2.1 Git 依赖引入 由于这是一个专为鸿蒙平台定制的修改版本，需要通过 Git 方式引入依赖。在 Flutter