skills.rest
cognitedata
cognitedataOFFICIAL
Explore all skills by this author →
WebsiteGitHub

reveal-3d

Integrate a Cognite Reveal 3D CAD viewer into Flows apps.

5|1|Updated Mar 4, 2026
Search Tags:#react#visualization#browser#3d#viewer#cad
One-click install
npx skills add https://github.com/cognitedata/builder-skills --skill reveal-3d
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reveal-3d
Source: https://github.com/cognitedata/builder-skills/tree/main/skills/reveal-3d
Command: npx skills add https://github.com/cognitedata/builder-skills --skill reveal-3d

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @cognite/reveal, @cognite/sdk, @tanstack/react-query, three, process, util, assert, ajv, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill enables users to add a Cognite Reveal 3D viewer into their Flows application, allowing interactive visualization of CDF CAD models with model browsing and direct ID input.

Core Features & Use Cases

  • 3D Visualization: Integrate a high-performance CAD viewer supporting asset browsing and direct model/revision loading.
  • Model Browsing: Load and display multiple CAD models retrieved from CDF, with camera control and fitting.
  • Use Case: A user wants to embed a CAD viewer within their internal app to preview models linked to assets, enhancing collaborative workflows.

Quick Start

Copy the code bundle into your app, install the required dependencies, and render RevealCanvas with RevealProvider wrapping your viewer components.

Frequently Asked Questions about reveal-3d

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed an interactive 3D CAD viewer into my React app?▼

To embed a 3D CAD viewer into your React app, copy the code bundle, install dependencies like @cognite/reveal and three, then render RevealCanvas wrapped inside RevealProvider for stable component integration.

Can I load and browse multiple 3D CAD models directly from CDF in the browser?▼

Yes, you can browse and load multiple 3D CAD models directly from CDF in the browser. The viewer supports model browsing, direct ID input, and camera control for fitting loaded models within your application.

What dependencies do I need to configure Vite for a 3D CAD visualization component?▼

You need to configure Vite for modular imports when setting up the 3D CAD visualization component. Required dependencies include @cognite/reveal, @cognite/sdk, three, and @tanstack/react-query for data fetching and rendering.

Does this 3D CAD viewer support asset browsing and model revision loading?▼

Yes, the 3D CAD viewer supports asset browsing and model revision loading. It is tailored for asset managers and engineers needing to preview CAD models linked to assets, enhancing collaborative workflows.

Why does my 3D CAD viewer component fail to render without RevealProvider?▼

The 3D CAD viewer component requires RevealProvider as a stable wrapper around RevealCanvas to render correctly. Without proper provider placement, the viewer components lack the necessary context to initialize and display models.

Related Skills

Explore More Design & Creative Skills→
jubscodesjubscodes
49

gsp-scaffold

Set up Next.js, Vite, or React Native projects with Tailwind and shadcn/ui, then verify the build.

Community
Advanced
autonomous-aiautonomous-ai
41

cad-viewer

Open and review CAD models in 3D with multiple file format support.

Official
Advanced
afterworkafterwork

building-storefronts

Plan and develop Medusa storefront features using the Medusa SDK and React Query.

Official
Advanced
alexzhang1030alexzhang1030

threejs-fundamentals

Configure Three.js scenes, cameras, renderers, and object transforms.

Community
Intermediate