@ expofp/ resanderer (韩语)

交互式平面图渲染器 反应 三发。 。 。 .

建筑

• 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 或者说 省略其默认值,或选项对象.

<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拉入 主块.

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

建议延期

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

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

运行单元测试

运行 nx test @expofp/renderer 通过 维特。 。 。 .

已出版软件包的限度

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答案是工人的规格 并运行反应编译器,所以 上面的问题都一样.