This repository demonstrates how to load and use the VIM Web NPM package.
The following is a standalone HTML page illustrating the usage of the vim-web package. The other code in this repository provides a more extensive demonstration of the viewer and its capabilities.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>VIM Web — standalone viewer</title>
<!--
The vim-web viewer ships its UI styles (control bar, panels, modal, etc.)
as a separate CSS file. Without this link the 3D scene still renders but
the UI will be unstyled.
-->
<link
rel="stylesheet"
href="https://unpkg.com/vim-web@1.0.0-beta.2/dist/style.css"
/>
<style>
html, body { height: 100%; margin: 0; background: #1a1a1a; }
/*
The viewer calls createViewer(element) and fills `element` with an
absolutely-positioned canvas + UI layer. Give that element a size or
nothing will be visible.
*/
#viewer { position: relative; width: 100vw; height: 100vh; }
</style>
<!--
vim-web is published to npm as ES modules. An import map lets us write
bare specifiers like `import * as VIM from 'vim-web'` in the browser,
just as we would inside a bundled project. esm.sh serves npm packages
as browser-friendly ES modules and wires the peer-dep versions of
React / ReactDOM so vim-web's internal hooks line up with ours.
-->
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1",
"react/jsx-runtime": "https://esm.sh/react@18.3.1/jsx-runtime",
"react-dom": "https://esm.sh/react-dom@18.3.1",
"react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
"vim-web": "https://esm.sh/vim-web@1.0.0-beta.2?deps=react@18.3.1,react-dom@18.3.1"
}
}
</script>
</head>
<body>
<div id="viewer"></div>
<script type="module">
import * as VIM from 'vim-web';
/*
Any URL to a .vim file works here. The sample below is hosted by
VIM on a public CDN. To load a file next to this HTML instead,
change this to something like './residence.vim' and serve the
folder over HTTP (e.g. `npx http-server .`). Opening the file
with file:// will fail because fetch() cannot read local files.
*/
const VIM_URL = 'https://storage.cdn.vimaec.com/samples/residence.v1.2.75.vim';
async function main () {
// createViewer builds the UI inside the element we pass in and
// returns a handle we use for everything else.
const viewer = await VIM.React.Webgl.createViewer(
document.getElementById('viewer')
);
// Optional niceties: when the user isolates objects, show the rest
// of the model as a transparent ghost so context isn't lost.
viewer.isolation.autoIsolate.set(true);
viewer.isolation.showGhost.set(true);
// Exposed as `viewer` in the browser console so you can poke at
// the API interactively (camera, isolation, sectionBox, ...).
globalThis.viewer = viewer;
// load() kicks off the download + parse and returns a request
// object that reports progress and resolves with a result.
const request = viewer.load({ url: VIM_URL });
const result = await request.getResult();
if (result.isSuccess) {
// Fit the camera around the loaded geometry.
viewer.framing.frameScene.call();
} else {
console.error('Failed to load VIM:', result);
}
}
main().catch(err => console.error(err));
</script>
</body>
</html># check out this repository
npm install
npm run dev
# Open your browser at the URL Vite prints (http://localhost:5173 by default).
# By default, it loads a VIM file from a hard-coded URL.The entry point of the application is under src/main.tsx. Each demo is a
self-contained component under src/{webgl,ultra}/{demo,dev}/, registered in
that folder's pageIndex.tsx.
npm run dev # Start the Vite dev server
npm run build # Type-check (tsc --noEmit) and build to dist/
npm run typecheck # Type-check only
npm run deploy # Build and publish dist/ to the gh-pages branchThe app is deployed to GitHub Pages. Either run npm run deploy locally, or
trigger the "Deploy to GitHub Pages" GitHub Action manually
(.github/workflows/deploy.yml).