reveal-3d

The reveal-3d skill integrates a local Cognite Reveal 3D CAD viewer bundle into Flows apps by copying app-local source code rather than depending on an external package. It renders CAD models from Cognite Data Fusion (CDF), with support for model browsing, direct model and revision IDs, or FDM-linked assets, and is the right choice when a user wants to embed an interactive Reveal viewer for CDF 3D/CAD content. It is explicitly not for static diagrams, graph visualizations, or unrelated custom Three.js scenes. Prerequisites include a React plus TypeScript app wrapped in @cognite/dune (Flows) auth with a QueryClientProvider from @tanstack/react-query, and either existing CDF 3D models or supplied model/revision IDs; FDM-linked 3D requires linkage through Core DM (CogniteVisualizable.object3D to CogniteCADNode).

The documented integration workflow proceeds in order: inspect the target app's package.json, vite.config.ts, src/main.tsx, and alias conventions; install missing dependencies while reusing existing pinned versions; copy every file from skills/reveal-3d/code/reveal/ into an app-local feature folder such as src/features/reveal-3d/; import from that local folder rather than the skill directory or the old external package; configure Vite and main.tsx per the vite-config reference, applying the process polyfill, manual process/util/assert aliases, a three alias, dedupe settings, and worker.format set to 'es'; choose an implementation pattern (Pattern B, the model browser or direct model ID, unless a DMInstanceRef with confirmed Core DM 3D linkage is available); keep provider placement stable; and run typecheck and build, fixing copied-import or dependency issues. CacheProvider and RevealKeepAlive are always mounted at page or app level, while RevealProvider is conditional, only when a model is selected or linked.

A set of critical rules governs correct usage: ViewerContent contains only RevealCanvas and Reveal3DResources with no providers; the resources array must be memoized with useMemo; callbacks like onModelsLoaded and onSelect must be memoized with useCallback; the SDK passed to RevealProvider must be memoized with useMemo keyed on client.project; RevealCanvas fills its parent so the parent needs an explicit height; and canvas-heavy content should be lazy-loaded with React.lazy and Suspense. Suggested dependency versions (such as @cognite/reveal ^4.30.0 and three ^0.180.0) are starting points that defer to the app's existing pins, and the skill warns against installing vite-plugin-node-polyfills in favor of explicit Vite aliases. A verification checklist confirms the copy, local imports, dependencies, polyfill ordering, provider placement, container height, and passing typecheck and build.