@vertexvis/poc-viewer

The Vertex SDK (POC) for viewing models.

latest

npm

Version: 0.4.0

Version published: 5 years ago

Maintainers: 5

Created: 5 years ago

Source

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.

Getting Started

Script Tag

To get started, add a <script> tag to your HTML file that references our published JS bundle.

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@vertexvis/poc-viewer@0.4.0/dist/viewer/viewer.css"
    />
    <script
      type="module"
      src="https://unpkg.com/@vertexvis/poc-viewer@0.4.0/dist/viewer/viewer.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/@vertexvis/poc-viewer@0.4.0/dist/viewer.js"
    ></script>
  </head>
</html>

Node Modules

You can also install our components as an NPM dependency to your project.

Run npm install my-component --save
Put a script tag similar to this <script src='node_modules/my-component/dist/mycomponent.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

Usage

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@vertexvis/poc-viewer@0.4.0/dist/viewer/viewer.css"
    />
    <script
      type="module"
      src="https://unpkg.com/@vertexvis/poc-viewer@0.4.0/dist/viewer/viewer.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/@vertexvis/poc-viewer@0.4.0/dist/viewer.js"
    ></script>

    <script>
      window.addEventListener('DOMContentLoaded', () => {
        main();
      });

      function main() {
        const viewer = document.querySelector('#viewer');
        viewer.addEventListener('pick', event => {
          console.log('picked parts', event.details.hitResults);
        });
      }
    </script>
  </head>
  <body>
    <vertex-viewer
      id="viewer"
      credentials-client-id="client-id"
      credentials-token="token"
      model="urn:vertexvis:eedc:scenestate:123"
    >
      <vertex-viewer-toolbar data-viewer="viewer"></vertex-viewer-toolbar>
    </vertex-viewer>
  </body>
</html>

FAQs

What is @vertexvis/poc-viewer?

Is @vertexvis/poc-viewer well maintained?

Package last updated on 28 Aug 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install