OpenHuman Viewer

React and Three.js anatomy viewer components for OpenHuman Atlas.

Install

npm install @medhuelabs/openhuman-viewer

Quick Start

import {
  AtlasViewer,
  DEFAULT_ATLAS_TEXTURE_QUALITY,
  createAtlasPerformanceProfile,
  getRuntimeSystemBundlePath,
  getRuntimeSystemTextureManifestPath,
  type AtlasViewerSystem,
} from "@medhuelabs/openhuman-viewer";

const assetBasePath = "/openhuman/atlas";

const systems: AtlasViewerSystem[] = [
  {
    bundleUrl: getRuntimeSystemBundlePath("skeletal", {
      basePath: assetBasePath,
    }),
    systemId: "skeletal",
    textureManifestUrl: getRuntimeSystemTextureManifestPath("skeletal", {
      basePath: assetBasePath,
    }),
    textureQuality: DEFAULT_ATLAS_TEXTURE_QUALITY,
    visible: true,
  },
].filter((system): system is AtlasViewerSystem => Boolean(system.bundleUrl));

export function AnatomyScene() {
  return (
    <AtlasViewer
      bodyPosition="anatomical"
      colorScheme="light"
      performanceProfile={createAtlasPerformanceProfile()}
      selectedObjectId={null}
      systems={systems}
    />
  );
}

Hosted Assets

The package does not bundle the full OpenHuman Atlas runtime GLB and texture payload. Serve atlas runtime files from your app, CDN, or a MedHue-hosted asset endpoint, then pass that base path to the runtime path helpers.

For hosted MedHue assets, use createOpenHumanAtlasAssetResolver with the asset host base URL and route viewer asset paths through that resolver.

License

Apache-2.0