Gathering detailed insights and metrics for @vertexvis/viewer
Gathering detailed insights and metrics for @vertexvis/viewer
Installations
npm install @vertexvis/viewerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.15.1
NPM Version
lerna/4.0.0/node@v16.15.1+x64 (linux)
Releases
72
Languages
5
TypeScript
CSS
Shell
JavaScript
HTML
TypeScript (96.17%)
CSS (2.98%)
Shell (0.46%)
JavaScript (0.29%)
HTML (0.1%)
Developer
Vertexvis
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
12 Stars
652 Commits
3 Forks
4 Watchers
20 Branches
26 Contributors
Updated on Jul 09, 2025
Maintainers
4
Package Meta Information
Latest Version
0.23.5
Package Id
@vertexvis/viewer@0.23.5
Unpacked Size
80.33 MB
Size
8.07 MB
File Count
1,626
NPM Version
lerna/4.0.0/node@v16.15.1+x64 (linux)
Node Version
16.15.1
Published on
Jun 03, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
26
@improbable-eng/grpc-web@stencil/core@vertexvis/frame-streaming-protos@vertexvis/geometry@vertexvis/html-templates@vertexvis/scene-tree-protos@vertexvis/scene-view-protos@vertexvis/stream-api@vertexvis/utils@vertexvis/web-workerscamel-caseclassnamesdate-fnsfast-deep-equalfast-pnggoogle-protobufjwt-decodelongparam-caseprotobufjsreglregl-shaperequestidlecallback-polyfillresize-observerthreadstslib
Dev Dependencies
23
@stencil/react-output-target@stencil/vue-output-target@types/chance@types/google-protobuf@types/jest@types/jsonwebtoken@vertexvis/eslint-config-vertexvis-typescript@vertexvis/rollup-plugin-web-workers@vertexvis/typescript-config-vertexvis@vertexwebsdk/buildabortcontroller-polyfillchanceeslinteslint-plugin-reactjestjsonwebtokenrolluprollup-plugin-commonjsrollup-plugin-node-resolvets-jestts-toolbelttypedoctypescript
Vertex Web Viewer SDK
This project contains Vertex's 3D Viewer SDK. Vertex is a cloud platform for rendering large 3D models. See Vertex's website for more information.
Our 3D viewer is distributed as a set of standards-based web components that can run in any browser supporting the Custom Elements v1 specification. For browsers that do not support the Custom Elements v1 spec, a polyfill will automatically be used.
Installation
Script Tag
The easiest way to get started is by including a <script> tag in your HTML
file that references our published JS bundles from a CDN.
1<html> 2 <head> 3 <link 4 rel="stylesheet" 5 href="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.23.5/dist/viewer/viewer.css" 6 /> 7 <script 8 type="module" 9 src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.23.5/dist/viewer/viewer.esm.js" 10 ></script> 11 </head> 12 13 <body> 14 <vertex-viewer id="viewer" src="urn:vertex:stream-key:123" client-id="123"></vertex-viewer> 15 </body> 16</html>
This package also provides a set of utilities for use with its API. These utilities can be imported from a CDN as shown below:
1<!-- CDN --> 2<html> 3 <head> 4 </head> 5 <body> 6 <script type="module"> 7 import { ColorMaterial } from 'https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.23.5/dist/esm/index.mjs'; 8 9 function main() { 10 const color = ColorMaterial.fromHex('#ff0000'); 11 } 12 </script> 13 </body> 14</html>
If you want to interact with a web component via JavaScript, you should ensure
the browser has registered the custom elements prior to calling the elements
methods. You can use
window.customElements.whenDefined
to check if the component has been loaded.
1async function main() { 2 const viewer = document.querySelector('#viewer'); 3 4 // Wait for the component to be registered. 5 await customElements.whenDefined('vertex-viewer'); 6 viewer.load("urn:vertex:stream-key:123") 7}
NPM Dependency
Our components support being installed as an NPM dependency and packaged through
a bundler such as Webpack or Rollup. First, add @vertexvis/viewer as an NPM
dependency to your package.json:
1{ 2 "dependencies": { 3 "@vertexvis/viewer": "^0.23.5" 4 } 5}
Next, import defineCustomElements from the loader included as part of the
package. Using the loader will self lazy-load the components used in your
application.
Note: Certain bundler settings may have issues with using the self lazy-loading strategy. See Manually Registering Components for an alternative to register components.
1import { defineCustomElements } from '@vertexvis/viewer/loader'; 2 3async function main() { 4 await defineCustomElements(); 5 6 const viewer = document.querySelector("viewer"); 7 await viewer.load("urn:vertex:stream-key:123"); 8 console.log("Loaded!"); 9} 10 11main();
Manually Registering Components
We recommended using self lazy-loading to load components, which helps keep bundle sizes to a minimum and only loads components as they're needed. However, some bundler configurations may have problems with this option.
You can manually register components by importing them and registering them with the browser.
1import { VertexViewer, VertexViewerDefaultToolbar } from '@vertexvis/viewer'; 2 3customElements.define('vertex-viewer', VertexViewer); 4customElements.define('vertex-viewer-default-toolbar', VertexViewerDefaultToolbar);
If a component depends on other components, you'll need to register each one
individually. As this can be tedious, we export a defineCustomElements()
method to register all components. Note: this will add all components to
your bundle.
1import { defineCustomElements } from '@vertexvis/viewer'; 2 3defineCustomElements();
Interacting With Component Properties
Some of our components provide default values for properties that can be used
once the component is ready. Before interacting with these properties, the
componentOnReady method must be awaited to ensure the property is defined.
1function main() { 2 await defineCustomElements(); 3 4 const sceneTree = document.querySelector("scene-tree"); 5 await sceneTree.componentOnReady(); 6 7 sceneTree.controller.stateChanged(state => { 8 console.log(`Scene Tree Row Count: ${state.totalRows}`); 9 }); 10}
Polyfills
If you plan on targeting IE11 or Edge <= 18, you'll also need to supply polyfills for the Web Component APIs (Custom Elements, Shadow DOM, CSS Variables, etc).
To include the polyfills, import applyPolyfills from the loader.
1import { applyPolyfills, defineCustomElements } from '@vertexvis/viewer/loader'; 2 3function main() { 4 await applyPolyfills(); 5 await defineCustomElements(); 6 7 console.log("Loaded!"); 8}
Examples
Check out our examples directory and Examples page on our Dev Portal to get an idea of what you can do with Vertex's Viewer component.
Documentation
Each component provided by the @vertexvis/viewer package also exposes
its own component-level README with additional examples and property definitions.
See below for the list of components and links to their READMEs:
- <vertex-viewer>
- <vertex-viewer-walk-mode-tool>
- <vertex-viewer-view-cube>
- <vertex-viewer-transform-widget>
- <vertex-viewer-toolbar>
- <vertex-viewer-toolbar-group>
- <vertex-viewer-teleport-tool>
- <vertex-viewer-spinner>
- <vertex-viewer-pin-tool>
- <vertex-viewer-pin-label>
- <vertex-viewer-pin-label-line>
- <vertex-viewer-pin-group>
- <vertex-viewer-measurement-precise>
- <vertex-viewer-measurement-overlays>
- <vertex-viewer-measurement-line>
- <vertex-viewer-measurement-distance>
- <vertex-viewer-measurement-details>
- <vertex-viewer-markup>
- <vertex-viewer-markup-tool>
- <vertex-viewer-markup-freeform>
- <vertex-viewer-markup-circle>
- <vertex-viewer-markup-arrow>
- <vertex-viewer-layer>
- <vertex-viewer-icon>
- <vertex-viewer-hit-result-indicator>
- <vertex-viewer-dom-renderer>
- <vertex-viewer-dom-group>
- <vertex-viewer-dom-element>
- <vertex-viewer-default-toolbar>
- <vertex-viewer-button>
- <vertex-viewer-box-query-tool>
- <vertex-viewer-annotation-callout>
- <vertex-scene-tree>
No vulnerabilities found.
Reason
19 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
all changesets reviewed
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/Vertexvis/.github/SECURITY.md:1
- Info: Found linked content: github.com/Vertexvis/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/Vertexvis/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/Vertexvis/.github/SECURITY.md:1
Reason
SAST tool is run on all commits
Details
- Info: all commits (30) are checked with a SAST tool
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/branch.yml:1
- Warn: no topLevel permission defined: .github/workflows/master.yml:1
- Warn: no topLevel permission defined: .github/workflows/testing.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:70: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:99: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:107: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:111: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/branch.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/branch.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:103: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:111: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:117: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:137: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:139: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:147: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:153: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/master.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/master.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/testing.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/testing.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/testing.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/testing.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/testing.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/testing.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/testing.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/testing.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/testing.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/testing.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/testing.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/testing.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/testing.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/testing.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/testing.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/Vertexvis/vertex-web-sdk/testing.yml/master?enable=pin
- Info: 0 out of 40 GitHub-owned GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
28 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-hxwm-x553-x359
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-h755-8qp9-cq85
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Score
6.2
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More