前端实现交互式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

实战：手写一个通用Web层鉴权注解，解决水平权限漏洞

实战：手写一个通用Web层鉴权注解，解决水平权限漏洞

实战：手写一个通用Web层鉴权注解，解决水平权限漏洞 * 一、背景：一次渗透测试引发的改造 * 二、需求分析：如何高效修复 * 三、业务模型：用户-公司授权关系 * 四、整体架构设计 * 五、代码实现：一步一步来 * 5.1 注解定义 * 5.2 权限管理服务 * 5.3 AOP切面：核心逻辑 * 六、使用示例 * 6.1 场景1：最简单的用法 * 6.2 场景2：对象属性 * 6.3 场景3：批量操作 * 6.4 场景4：嵌套属性 * 6.5 场景5：类级别默认配置 * 七、
一位过来人的 Web 前端开发全维准备指南

一位过来人的 Web 前端开发全维准备指南

真正拉开开发者差距的，不是敲下第一行代码的速度，而是动笔之前思维框架的深度。 在这个数字化渗透进每个角落的时代，Web 前端开发早已不是当年那个“切图仔”的简单活儿。它是连接用户与数字世界的桥梁，是产品体验的灵魂载体，更是一门融合了艺术感性与工程理性的复杂学科。当无数零基础的学习者怀揣着改变职业轨迹的梦想，准备敲下人生第一个 <html> 标签时，我想邀请你们稍作停留。 本文不急于教你如何写代码，而是希望与你深入探讨：在真正踏上这条充满魅力与挑战的道路之前，我们需要在思维、心态、知识和工具上做哪些准备，才能让这段旅程走得更稳、更远、更具成长性。 一、思维重构：像工程师一样思考 学习前端的第一步，不是下载编辑器，而是启动大脑的“编程思维”模式。这是一种将现实世界的复杂问题，转化为计算机能够理解和执行的逻辑化、结构化思考方式。 抽象能力：从具象到通用 当你面对一个精美的网页时，编程思维会让你下意识地拆解它：这个导航栏可以抽象成一个包含 Logo 和菜单项的组件；这个商品卡片，可以提炼为一个可复用的模板，由图片、标题、价格三个数据槽位构成。

【前端高频面试题】 - TypeScript 篇

【前端高频面试题】 - TypeScript 篇 1. 请解释 TypeScript 是什么？它与 JavaScript 的核心区别是什么？ 面试回答需突出 TS 的核心价值（类型安全）和与 JS 的关键差异，结构清晰： * TypeScript 定义：TS 是 JavaScript 的超集（Superset），在 JS 语法基础上增加了静态类型系统，最终会编译为纯 JS 运行（支持所有 JS 环境），核心目标是提升代码可维护性、减少运行时错误。 * 与 JavaScript 的核心区别（分点对比）： 1. 类型系统：TS 有静态类型（编译阶段检查类型，变量声明时需指定/推断类型）；JS 是动态类型（
【Tauri框架学习】Tauri 与 React 前端集成：通信机制与交互原理详解

【Tauri框架学习】Tauri 与 React 前端集成：通信机制与交互原理详解

Tauri 与 React 前端集成：通信机制与交互原理详解 * Tauri 与 React 前端集成：通信机制与交互原理详解 * **一、Tauri 与 React 的集成基础** * **1. 项目结构** * **2. 环境准备** * **二、Tauri 与 React 的通信机制** * **1. 核心机制：命令调用（Command）** * **2. 事件驱动：事件监听（Event）** * **3. 通信流程** * **三、具体示例：React 与 Rust 交互** * **场景1：React 调用 Rust 命令（文件读取）** * **Step 1：Rust 后端定义命令*