基于 Three.js + React Three Fiber 实现交互式3D人体肌肉解剖图

导出后的模型从 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',
];

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.ts
const 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'
  ],
};

export function getMuscleIdFromModelName(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;
    }
  }
  return undefined;
}

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

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

性能优化

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. 游戏开发：角色肌肉系统参考

总结

核心技术点包括：

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

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

相关链接

• Z-Anatomy 开源项目
• React Three Fiber 文档