Experimental Web Component for rendering USDZ 3d format. Built on the experimental work and efforts of github.com/autodesk-forks/USD/tree/release
npm install usd-viewerThe current WASM binary is compiled with Emscripten pthreads support, which requires
SharedArrayBuffer.
Browsers only expose SharedArrayBuffer on cross-origin isolated pages,
so the following response headers must be set by your server:
"Cross-Origin-Embedder-Policy": "require-corp"
"Cross-Origin-Opener-Policy": "same-origin"Note: Using
"Cross-Origin-Embedder-Policy": "credentialless"instead of"require-corp"is less restrictive and still enablesSharedArrayBuffer. It allows cross-origin resources to load without requiring aCross-Origin-Resource-Policyheader on each resource. Supported in Chrome 96+ and Firefox 119+.
The WASM binary (emHdBindings.wasm) declares shared memory (flags=0x03) at the WebAssembly level.
This is a hard constraint enforced by the browser engine — the binary cannot be instantiated without
SharedArrayBuffer-backed memory. The threading support is used for USD scene parsing and Hydra
rendering via Emscripten pthreads (Web Workers + shared memory).
This requirement cannot be removed by modifying JavaScript alone. The WASM binary must be recompiled without pthreads to eliminate the header requirement entirely. See BUILDING.md for details on producing a single-threaded build.
If you cannot configure server response headers (e.g., on static hosting without header support), you can use coi-serviceworker to inject the headers client-side via a Service Worker. Note that this requires a page reload on first visit.
To load the Wasm dependencies in the browser copy them from the node_modules into your host env.
cpy node_modules/usd-viewer/wasm/**/* dist/wasm
To change the default path (./wasm) of the Wasm resources add the following meta tag to the document.
<meta name="usd-viewer:wasm" content="custom-path/wasm" />The WASM files in wasm/ are built from the Autodesk USD fork. To rebuild them
(for example when picking up upstream fixes):
npm run build:wasm # Docker-based reproducible build (recommended)
npm run build:wasm:local # Local build using emsdkSee BUILDING.md for details, version pinning, and troubleshooting.
<script type="module">
import 'usd-viewer/include.js';
</script>
<usd-viewer src="./usd/perseverance.usdz" alt="Perseverance Mars Rover"></usd-viewer>| Property | Attribute | Type | Description |
|---|---|---|---|
src |
src |
string | source path for usd/usdz file |
alt |
alt |
string | alt descriptive text |
controls |
conrols |
boolean | enable or disable model touch/mouse controls |
fileName |
file-name |
boolean | enable or disable display of file name |
autoRotate |
auto-rotate |
boolean | enable or disable auto rotation of model |
autoRotateSpeed |
auto-rotate-speed |
number | adjust speed of rotations of model |
minDistance |
min-distance |
number | minimum zoom distance of model |
maxDistance |
max-distance |
number | maximum zoom distance of model |
zoom |
zoom |
number | default zoom level of camera relative to model |
This project uses pnpm and Vite. The demo site is built with NVIDIA Elements web components for its UI.
pnpm install # install dependencies
pnpm dev # start the Vite dev server (basic / interactive / multiple examples)
pnpm build # build the demo site (dist) and the publishable library (dist/lib)
pnpm preview # preview the production build
pnpm deploy # deploy the demo site to Firebase hostingThe demo pages live at the project root (index.html, single.html,
multi.html) with their entry points under demo/. The interactive example
uses nve-page, nve-page-panel, and Elements form controls for its control
panel.
The Web Component of this project is MIT licensed, however refer to the following external dependencies and explicitly marked file headers. For additional license details see: