SuperAPI AI 工具集

reveal-3d

前端与建站

查看项目

更新于 10-16 08:35

技能介绍

用途:把 Cognite Reveal 3D 查看器嵌入 Dune 应用,用于展示 CDF 中的 3D/CAD 内容。不适用于静态图、图可视化或无关的 Three.js 场景。

前提:应用使用 React + TypeScript 并由 @cognite/dune 认证包裹;具备 @tanstack/react-query 的 QueryClientProvider;CDF 项目有 3D 模型或已提供模型/修订 ID;FDM 关联需经 Core DM(CogniteVisualizable.object3D -> CogniteCADNode)。

集成流程:先检查目标应用的 package.json、vite.config.ts、src/main.tsx 及目录/别名约定;用应用包管理器安装缺失依赖并复用已有版本;把 skills/reveal-3d/code/reveal/ 下所有文件复制到应用本地功能目录(如 src/features/reveal-3d/),从本地目录导入而非技能目录或旧外部包;按 vite-config.md 配置 Vite 的 process polyfill、process/util/assert 别名、three 别名、dedupe 与 worker.format: 'es';选择实现模式,默认用 Pattern B(模型浏览器或直接模型 ID),除非已有 DMInstanceRef 且确认 Core DM 3D 关联;保持 provider 位置稳定,CacheProvider 与 RevealKeepAlive 始终挂载,RevealProvider 仅在选中或关联模型时条件挂载;最后运行类型检查与构建并修复导入或依赖问题。

依赖(建议版本,应用已固定兼容版本时以应用为准):@cognite/reveal ^4.30.0、@cognite/sdk ^10.0.0、@tanstack/react-query ^5.90.21、three ^0.180.0、process/util/assert、ajv ^8、@types/three。示例安装:pnpm add @cognite/reveal @cognite/sdk @tanstack/react-query three process util assert ajv;pnpm add -D @types/three。不要安装 vite-plugin-node-polyfills。

关键规则:ViewerContent 只含 RevealCanvas 与 Reveal3DResources;resources 用 useMemo 记忆;回调用 useCallback;传给 RevealProvider 的 SDK 以 client.project 为键用 useMemo;RevealCanvas 填满父容器,父容器需显式高度;路由页面用 React.lazy + Suspense 懒加载。

验证:文件已复制到应用本地目录、导入指向本地目录、未从旧外部包导入、依赖齐全、main.tsx 首行 process polyfill、Vite 配置正确、provider 挂载方式正确、容器有显式高度、类型检查与构建通过。更多 API 见 code/README.md,实现见 references/implementation.md,Vite 与排错见 references/vite-config.md。