快速开始

这一章介绍开始使用 Cornerstone3D 之前需要了解的背景信息。

如果你是第一次接触这个库，建议按下面的顺序读：

1. 概述 —— 先看这个库能做什么。渲染、影像操作、标注、分割、 视口同步这几块能力各是什么样子，本页都有说明和动图。
2. 项目范围 —— 搞清边界。这一点很重要：Cornerstone3D 不负责 影像加载和 DICOM 元数据解析，这两件事要通过注册加载器和元数据提供者来接入。 不少上手时的困惑都源于没弄清这条边界。
3. 相关库 —— 它与旧版 cornerstone、vtk.js、OHIF Viewer 分别是什么关系。
4. 安装 —— npm / yarn / pnpm 的安装命令。
5. React、Vue、Angular 等框架 —— 实际接入时的打包配置。 Vite 和 Webpack 的配置差异、编解码器 WASM 文件的定位方式都在这里。

装好之后，可以到教程一章从渲染第一组影像开始动手。

📄️安装

用 npm、yarn 或 pnpm 安装 Cornerstone3D 相关包，包括 @cornerstonejs/core、tools、dicom-image-loader、nifti-volume-loader，以及多态分割转换器所需的额外依赖。

📄️概述

Cornerstone3D 是一个用于在现代浏览器中可视化医学影像的轻量级 JavaScript 库。本文概览它的渲染、影像操作、标注、分割与视口同步能力，以及整套中文文档的结构。

📄️相关库

Cornerstone3D 的来历及其与周边库的关系，包括旧版 cornerstone-core 与 cornerstone-tools、react-vtkjs-viewport、用于三维渲染的 vtk.js，以及基于它构建的 OHIF Viewer。

📄️项目范围

Cornerstone3D 负责医学影像的渲染与缓存，不负责影像加载和 DICOM 元数据解析——后两者通过注册加载器和元数据提供者接入。本文说明项目边界、TypeScript 支持、浏览器要求与 monorepo 结构。

📄️React、Vue、Angular 等框架

在 React、Vue、Angular、Next.js 等前端框架中接入 Cornerstone3D 的完整配置指南，涵盖 Vite 与 Webpack 配置、编解码器 WASM 文件的定位方式、子路径部署，以及常见报错的排查方法。