生化实验室 3D 仪器组件库

如何在任意网页中嵌入仪器

只需一个挂载容器 + 三行代码，仪器自动处理建模、交互与动画

<!-- 1. 引入 three.js（如尚未引入） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<!-- 2. 引入组件库核心 -->
<script src="lab-instruments.js"></script>

<!-- 3. 引入你要使用的仪器模块 -->
<script src="instruments/centrifuge/index.js"></script>

<!-- 4. 创建挂载容器 -->
<div id="lab-stage" style="width:100%;height:500px;"></div>

<script>
  // 5. 实例化组件库
  const lab = new LabInstruments({
    mountNode: document.getElementById('lab-stage'),
    orbitControls: true   // 是否启用旋转/缩放控制
  });

  // 6. 载入仪器（可多次载入多个仪器）
  const centrifuge = lab.load('centrifuge');
  // 或载入显微镜（需先加载 Microscope3D.js + instruments/microscope/index.js）
  // const microscope = lab.load('microscope', { ui: true });
</script>

仪器自动处理建模、交互、动画；你只需要一个挂载容器和 new LabInstruments(...)。

仪器目录

如何在任意网页中嵌入仪器