# @expofp/renderer 中文文档

规范地址：https://npmcn.com/package/%40expofp/renderer/

版本：3\.49\.2
npm 元数据更新时间：2026-11-13T16:01:50.510Z
中文译文更新时间：2026-11-14T05:43:34.759Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40expofp/renderer
原文对照：https://npmcn.com/package/%40expofp/renderer/?lang=original
项目主页：https://developer.expofp.com/
源码仓库：https://github.com/expofp/efp-app

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

- 包体积（解压后）：1.5 MB，290 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：12 个
- peer 依赖：debug ^4\.4\.3，react ^19\.2\.8，react-dom ^19\.2\.8
- 首次发布：2025-11-25T19:24:55.424Z
- 最新版本发布：2026-11-13T16:01:49.920Z
- 近 30 天下载量：8633（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：113（近 12 个月 113 个）

## 中文简介

内部 : WebGL 平面图渲染器

## 安装

```sh
npm install @expofp/renderer
```

也可以使用：`pnpm add @expofp/renderer`、`yarn add @expofp/renderer`、`bun add @expofp/renderer`

## README

# @ expofp/ resanderer (韩语)

交互式平面图渲染器 [反应 三发](https://r3f.docs.pmnd.rs/)。 。 。 .

## 建筑

-   **`Renderer`** (单位:千美元)`src/Renderer.tsx`)——公入:挂R3F `Canvas` 和现场`controls/`, (中文(简体) ), `lighting/`, (中文(简体) ), `batch/`) (中文(简体) ). 过 `debug` 改为 启用调试覆盖 .
-   **场景主题** 住在自己的文件夹中(`batch/`, (中文(简体) ), `controls/`, (中文(简体) ), `lighting/`, ; 添加新的渲染功能作为兄弟姐妹主题文件夹.
-   **`debug/`** ——调试覆盖(lil-gui面板+stats-gl覆盖),已装入 通过单一动态 `import()` 内 `Renderer`。 。 `debug/` (和它的更重的道具, lil-gui + stats-gl) 被代码分割成一个懒散的 已装入块 **从未获取 `debug` 关闭**添加新调试 块到 `debug/index.tsx` 於是他们同舟共济.

## 导航

`RendererProps` 携带两种不同的东西:

-   **相机限制** —— 说 `minZoom` 编号 : `maxZoom` 编号 : `minPitch` 编号 : `maxPitch`,宣布为 `CameraProps` 内 `src/space/Camera.tsx`它们会限制相机本身,所以 他们坚持一个方案性的行动,就像一个被拖走的行动. `Camera` 写入 并且默认它们, 除了剪接飞机 由同样的 数字; `maxPitch` 默认和上限均为 `MAX_PITCH` (度,单位:百万分之一) `clipping.ts`),渲染器中每个深度计算的角度大小 反对.
-   **`controls`** - 痷琌 _用户_ 也许吧 每个处理器都用 `false`, (中文(简体) ), `true` 或者说 省略其默认值,或选项对象.

```tsx
<Renderer
  scene={scene}
  minZoom={0.1}
  maxZoom={100}
  minPitch={0}
  maxPitch={85}
  controls={{
    pan: { inertia: { durationMs: 600 } },
    zoom: true,
    roll: { threshold: 25 },
    pitch: false,
  }}
/>
```

泛并缩放默认值; **仅在开发时才滚动和投出默认值 构建**,所以这个软件包的故事本和dev服务器有它们和一个制作 计划要等一个打电话的人问 明确的价值总是赢.

每个处理器都是在 `src/controls/handlers/`,镜像 绝对制造器 `ui/handlers/`,并拥有自己的配置类型和默认值. 挂载是启用的: 处理器声称其鼠标并触摸挂载和 让他们返回卸载状态, 控件会随着每个动作的切换而建立 关闭。 要添加手势,请在 `ControlsConfig`。 。 。 .

`Camera` 将限制写入两个效果——投出限制和框架 (距离限制,远平面, 和保持放大跨度变化的多莉), 这是一次交易,因为多莉必须遵循限制.

控制有两种方式,没有其他方式: `useCameraControls()` 读取 他们,和 `useControlsEffect(effect)` 一旦他们出现,就会对他们产生影响 存在,将其交出来作为论据。 React 编译器拒绝指派给 (单位:千美元) _字段_ 钩子的回取值——一种方法召唤它,或者把它传给一个 函数执行指定,是精细的——所以有字段可写入的组件 或通过帮助器或使用 `useControlsEffect`二指头 手势结束 `useGesture(type, handler)`。 。 。 .

## 从组件中添加图形界面控制

`debug/gui-context.ts` 曝光情况 `useGui()`。它返回活动的 lil-gui 实例,或 `null` 当覆盖被禁用或仍在装入时,请注意: 非数值. `useGui` 从微小处导入 `gui-context` 模块(a) 仅类型 lil- gui 导入),如此耗用 **没有** 把 l拉入 主块.

```tsx
function MyThing() {
  const gui = useGui();
  useEffect(() => {
    if (!gui) return;
    const folder = gui.addFolder('My thing');
    folder.add(/* … */);
    return () => folder.destroy();
  }, [gui]);
  // …
}
```

## 建议延期

两个浏览器扩展使渲染器绘制的可以检查的东西:

-   **[三.js DevTools软件](https://chromewebstore.google.com/detail/threejs-devtools/jechbjkglifdaldbdbigibihfaclnkbo)** 添加一个 DevTools 标签, 显示现场景树 —— 最快的查看方式 Defs 转换为 3.js 对象. 上面挂着一个网,突出它 计上几何.
-   **[光谱JS](https://spector.babylonjs.com/)** 列出每个 WebGL 绘图调用 一个捕捉到的相框, 中间画布状态在它们之间。 它需要一个 小曲轴: 勾选 **显示屏幕外显示布** 显示画布 (这项工作不一致——关闭和重新开放扩展a) 通常两次到那里,从画布上取出 **选择 画布..** 与其尺寸相匹配后下降,然后按下红色 **记录** 按钮。 在调试模式下, 抓取会立即打开, 因为现场 重卸每个相框; 没有它, 您必须先触发相框, 大多数 轻而易举地用平面或缩放.

## 运行单元测试

运行 `nx test @expofp/renderer` 通过 [维特](https://vitest.dev/)。 。 。 .

## 已出版软件包的限度

**`dist` 在此寄存器之外不支持。 它甚至不能解决问题.** `dist/objects/images/worker/client.js` 持有 `import AtlasWorker from './atlas-worker?worker&inline'`,以及 `dist/index.js` 到达文件。 这个 `?worker&inline` 描述器是维特指令 所以 只有维特能回答 任何其他消费者—— 不同的捆绑器,平地节点, 一个装入文件的浏览器 —— 无法解析导入和停止 在这里。 包裹里没有东西,所以没有小部分掉下来 继续.

这个包裹没有捆绑器。 内容 `build` 目标为普通 `tsc`这样 `dist` 实值 文件每个模块 TypeScript 输出, 没有其它任何内容运行在它上. `tsc` 副本 通过未变换的描述符,即断开的导入来源. 同样的没有捆绑器意味着 React 编译器从不运行 `dist` 要么,所以那里的组件 船没有优化.

这个寄存器中没有任何东西受到影响, 因为这个寄存器中没有任何东西 消耗量 `dist`。生成器则取而代之自其来源. Floorplan 浏览器构建到达 `src` 通过 `@expofp/source` 条件 内 `vite.config.mts`,所以Vite回答 指定词和内含工人 脚本入捆;地板平面图也应用了自己的React Compiler pass. 此软件包的单位测试和故事本导入 `src` 通过相对路径,所以 维特也为他们回答 : 故事本运行开始真实 工作,单位测试驱动 协议与假的。 路径调查 仅导入类型,在发送时被去除。 离线CLI副本 地板图的浏览器捆绑 而不是导入任何东西.

要解除限制, 请给此包一个形状为 Vite 的库 地板已经使用。 保留 `build` 这些类型。 添加 `build-browser` (Vite)为捆. 来个 `browser` 以上出口图中的条件 `import`答案是工人的规格 并运行反应编译器,所以 上面的问题都一样.

## 常见问题

### @expofp/renderer 是什么？

内部 : WebGL 平面图渲染器

### 如何安装 @expofp/renderer？

在项目目录运行 npm install @expofp/renderer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：debug（^4\.4\.3）、react（^19\.2\.8）、react-dom（^19\.2\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @expofp/renderer 支持 TypeScript 吗？

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

### @expofp/renderer 支持 ESM 还是 CommonJS？

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

### @expofp/renderer 可以商用吗？

@expofp/renderer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @expofp/renderer 的下载量有多少？

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

### @expofp/renderer 还在维护吗？

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