# @file-viewer/renderer-3d 中文文档

规范地址：https://npmcn.com/package/%40file-viewer/renderer-3d/

版本：3\.3\.3
npm 元数据更新时间：2026-10-31T11:12:17.480Z
中文译文更新时间：2026-11-14T17:42:22.509Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40file-viewer/renderer-3d
原文对照：https://npmcn.com/package/%40file-viewer/renderer-3d/?lang=original
项目主页：https://doc.file-viewer.app/guide/on-demand-renderers
源码仓库：https://github.com/flyfish-dev/file-viewer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.3 MB，92 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：jszip 3\.10\.2，esbuild ^0\.28\.2，web-ifc 0\.0\.77，@giro3d/giro3d 2\.0\.5，@thatopen/fragments 3\.6\.0，@thatopen/components 3\.6\.0
- 首次发布：2026-06-23T06:20:57.042Z
- 最新版本发布：2026-10-31T11:12:17.133Z
- 近 30 天下载量：35654（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：57（近 12 个月 57 个）

## 中文简介

由Tree.js加载器和轨道控制器驱动的文件查看器独立3D模型渲染器插件.

## 安装

```sh
npm install @file-viewer/renderer-3d
```

也可以使用：`pnpm add @file-viewer/renderer-3d`、`yarn add @file-viewer/renderer-3d`、`bun add @file-viewer/renderer-3d`

## README

# @file-viewer/renderer-3d

[English](https://github.com/flyfish-dev/file-viewer/blob/main/packages/renderers/3d/README.md) · [简体中文](https://github.com/flyfish-dev/file-viewer/blob/main/packages/renderers/3d/README.zh-CN.md)

Flyfish File Viewer 的独立 3D 模型 renderer。它使用 Three.js、OrbitControls 和按格式异步加载的 loader，在浏览器内预览 GLB / GLTF、OBJ、STL、PLY、FBX、DAE、3DS、3MF、AMF、USD、KMZ、PCD、VRML、XYZ、VTK 等模型；STEP / STP、IGES / IGS 和 BREP 则通过本地 OCCT Worker 完成真实几何解析和渲染。

## 用法

```ts
import FileViewer from '@file-viewer/vue3'
import { modelRenderer } from '@file-viewer/renderer-3d'

const options = {
  rendererMode: 'replace',
  renderers: modelRenderer,
  model: {
    workerUrl: '/viewer-assets/wasm/model/occt-worker.js',
    runtimeUrl: '/viewer-assets/wasm/model/occt-import-js.js',
    wasmUrl: '/viewer-assets/wasm/model/occt-import-js.wasm',
    workerTimeoutMs: 120_000,
  },
}
```

也可以把 `modelRenderer` 与 CAD 等 renderer 组合，或直接使用已经聚合它的 `@file-viewer/preset-all`。full 包和 `@file-viewer/vite-plugin` 会准备默认离线资产；只安装 renderer 时，需要自行托管 OCCT Worker、runtime、WASM 和两个许可证文件。

专用能力继续通过显式子路径按需安装：IFC 使用 `@file-viewer/renderer-3d/ifc`，LAS / LAZ / COPC / GeoTIFF / COG / CityJSON / 3D Tiles / 3TZ 使用 `@file-viewer/renderer-3d/geo3d`。普通 3D 入口不会导入这两个子入口，Full preset 也不会隐式加入它们。安装、自托管运行时资源和配置分别见 `IFC.md` 与 `GEO3D.md`。

默认路径为：

-   `wasm/model/occt-worker.js`
-   `wasm/model/occt-import-js.js`
-   `wasm/model/occt-import-js.wasm`

部署在子路径或独立资产域名时，通过 `options.model.workerUrl`、`runtimeUrl`、`wasmUrl` 传入最终 URL。不要使用运行时 CDN 回退。严格 CSP 需要在 `worker-src`、`script-src` 和 `connect-src` 中允许对应来源；部分浏览器还需要 `script-src 'wasm-unsafe-eval'`。

## 能力边界

-   STEP / STP、IGES / IGS、BREP：在 Worker 中使用 `occt-import-js` / OpenCascade 三角化，保留装配层级、实例、法线和面颜色，再构建 Three.js 场景。
-   通用模型：支持 WebGL 轨道控制、适配视图、网格、坐标轴、线框和自动旋转。`gltf` / `dae` / `fbx` 的外部贴图或二进制资源继续以原始 `url` 目录为基准加载。
-   全局统一缩放：renderer 注册标准缩放 provider，因此外层工具栏的放大、缩小、比例重置和适配视图会直接控制相机；滚轮、触控板和捏合缩放也会同步更新全局比例状态。
-   IFC 可通过显式的 `@file-viewer/renderer-3d/ifc` 专用入口启用；LAS / LAZ / COPC / GeoTIFF / COG / CityJSON / 3D Tiles / 3TZ 可通过 `@file-viewer/renderer-3d/geo3d` 启用。3DM 仍需专门的 `rhino3dm` renderer。
-   `@file-viewer/core` 不内置 Three.js 或几何内核。需要模型预览时请显式安装本包、相应 preset，或 full 包。

## 常见问题

### @file-viewer/renderer-3d 是什么？

由Tree\.js加载器和轨道控制器驱动的文件查看器独立3D模型渲染器插件\.

### 如何安装 @file-viewer/renderer-3d？

在项目目录运行 npm install @file-viewer/renderer-3d，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 file-viewer-ifc-assets、file-viewer-geo3d-assets，可以用 npx file-viewer-ifc-assets 直接运行。

### @file-viewer/renderer-3d 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @file-viewer/renderer-3d 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @file-viewer/renderer-3d 可以商用吗？

@file-viewer/renderer-3d 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @file-viewer/renderer-3d 的下载量有多少？

根据 npm 官方下载统计，@file-viewer/renderer-3d 在 2026/10/15 – 2026/11/13 这 30 天内被下载 35,654 次，日均约 1,188 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @file-viewer/renderer-3d 还在维护吗？

最新版本 3\.3\.3 发布于 2026/10/31（14 天前）；至今共发布 57 个版本，其中过去 12 个月发布了 57 个；首次发布于 2026/06/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。