前端实现交互式 3D 人体肌肉解剖图:基于 Three.js + React Three Fiber 方案
为什么要做这个?
传统的肌肉解剖学习通常依赖静态图片或昂贵的 3D 软件。为提供免费的在线工具,基于开源 Z-Anatomy 项目,在浏览器中实现一个交互式的 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()
if any(keyword in name_lower for keyword muscle_keywords):
obj.select_set()
bpy.ops.export_scene.gltf(
filepath=,
export_format=,
use_selection=,
export_draco_mesh_compression_enable=,
export_draco_mesh_compression_level=,
)

