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

速通前端篇 —— CSS

速通前端篇 —— CSS

找往期文章包括但不限于本期文章中不懂的知识点： 个人主页：我要学编程程(ಥ_ಥ)-ZEEKLOG博客 所属专栏：速通前端 目录 CSS的介绍 基本语法规范 CSS选择器 标签选择器 class选择器  id选择器  复合选择器  通配符选择器 CSS常见样式  颜色 color 字体大小 font-size  边框 border  宽度 与 高度  内边距 外边距  CSS的介绍 CSS(Cascading Style Sheet)，层叠样式表，用于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。简单理解，CSS就是类似于对页面进行"化妆"，让页面变得更加好看。 基本语法规范 选择器+{一条/N条声明} 1、

前端团队协作最佳实践：让团队效率飞起来

前端团队协作最佳实践：让团队效率飞起来 毒舌时刻 团队协作？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便开几个会就能提高团队效率？别做梦了！到时候你会发现，会议时间比开发时间还多，团队效率反而下降了。 你以为使用Git就能解决所有协作问题？别天真了！Git的冲突解决能让你崩溃，分支管理能让你晕头转向。还有那些所谓的协作工具，看起来高大上，用起来却各种问题。 为什么你需要这个 1. 提高开发效率：良好的团队协作可以减少沟通成本，提高开发效率。 2. 减少错误：团队协作可以帮助你发现和修复代码中的错误，减少生产环境中的问题。 3. 知识共享：团队协作可以促进知识共享，提高团队整体水平。 4. 项目管理：良好的团队协作可以帮助你更好地管理项目，确保项目按时完成。 5. 团队凝聚力：良好的团队协作可以增强团队凝聚力，提高团队成员的工作积极性。 反面教材 // 1. 代码冲突 // 开发者A修改了文件 function getUser(id) { return fetch(`/api/users/${id}

从零开始微调Qwen3-VL模型｜借助Qwen3-VL-WEBUI极速落地

从零开始微调Qwen3-VL模型｜借助Qwen3-VL-WEBUI极速落地 @[toc] 引言：为什么需要微调多模态大模型？ 随着视觉-语言任务的复杂化，通用预训练模型在特定场景下的表现逐渐显现出局限性。例如，在工业质检、医疗影像分析或教育内容生成等垂直领域，模型不仅需要“看懂”图像，还需理解行业语义并输出结构化结果。 Qwen3-VL-4B-Instruct 作为阿里通义千问系列中最新一代的多模态大模型，具备强大的图文理解与生成能力。而通过 Qwen3-VL-WEBUI 镜像工具，开发者无需深入底层代码即可完成从环境搭建到部署推理的全流程操作——尤其适合希望快速验证业务逻辑的技术团队。 本文将带你： - ✅ 搭建基于 Qwen3-VL-WEBUI 的本地开发环境 - ✅ 准备符合规范的多模态微调数据集 - ✅ 使用 ms-swift 框架进行 LoRA 微调 - ✅ 将微调后模型集成至 Web UI 实现交互式推理 💡 本文适用于具备基础 Python 和深度学习知识的工程师，建议使用至少 24GB 显存的 GPU（如 RTX 4090）

前端模块化开发：从面条代码到结构化代码的蜕变

前端模块化开发：从面条代码到结构化代码的蜕变 毒舌时刻 模块化开发？不就是把代码分成几个文件嘛，有什么大不了的？我见过很多所谓的模块化代码，其实就是把一堆函数随便塞进不同的文件里，根本没有任何结构可言。 你以为把代码分成模块就万事大吉了？别天真了！如果你的模块设计不合理，反而会让代码变得更加混乱。比如那些互相依赖的模块，就像一团乱麻，让你根本理不清头绪。 为什么你需要这个 1. 代码可维护性：模块化代码结构清晰，易于理解和维护，当需要修改某个功能时，只需要修改对应的模块即可。 2. 代码复用：模块化可以让你在不同的项目中复用相同的代码，减少重复开发的工作量。 3. 团队协作：模块化可以让不同的开发者负责不同的模块，减少代码冲突和沟通成本。 4. 性能优化：模块化可以帮助你实现代码分割，减少初始加载时间，提高应用的性能。 反面教材 // 这是一个典型的面条代码 let users = []; let products = []; function fetchUsers() { fetch('https://api.example.com/