Example of Vertex SDK APIs.

examples.js

// This example uses the `ColorMaterial` and `Vector3` export from the
// `@vertexvis/viewer` and `@vertexvis/geometry` packages. If you're using the
// CDN, you can use ESM imports.
//
// <script type="module">
//   import { ColorMaterial } from 'https://unpkg.com/@vertexvis/viewer@latest/dist/viewer/index.esm.js';
//   import { Vector3 } from 'https://unpkg.com/@vertexvis/geometry@latest'
// </script>
import { ColorMaterial } from '@vertexvis/viewer';
import { Vector3 } from '@vertexvis/geometry';

async function example() {
  const viewer = document.querySelector('#viewer');

  // This examples demonstrates how to use the Raycaster which is used for hit
  // detection. Given an (x, y) position, the raycaster can give you information
  // about a scene item at that location.
  //
  // When used with the `tap` event, this becomes the entrypoint to perform user
  // interactions on scene items. It can also be handy for querying about items
  // in the scene.
  viewer.addEventListener('tap', async event => {
    const scene = await viewer.scene();
    const result = await scene.raycaster().hitItems(event.details.position);

    result.hits.forEach(hit => {
      console.group('hit');
      console.log('itemId', hit.itemId); // The unique Vertex ID given to this part.
      console.log('itemSuppliedId', hit.itemSuppliedId); // The ID given to this part by the customer during import.
      console.log('hitNormal', hit.hitNormal); // A `Vector3` of the hits normal position.
      console.log('hitPoint', hit.hitPoint); // A `Vector3` of the hit position in 3D world space.`
      console.groupEnd();
    });
  });

  // This section demonstrates how to execute operations on the items in the
  // scene. To perform a scene operation, you need to supply a query that
  // describes the items you want to operate on, and the operation to perform.
  // Examples of operations include: show, hide, change material color.
  //
  // The following example shows a simple example of how to define and execute a
  // scene operation.
  //
  // Use the `scene.items()` method to return a builder for the operation. The
  // function that is passed to `items()` is used to define the query for the
  // operation. In this case, we query for an item that matches the given ID.
  //
  // After defining the query, specify the operation you want to perform, in this
  // case `hide()`. Finally, call `execute()` to perform the operation which will
  // render a new image.
  const scene = await viewer.scene();
  scene
    .items(op => op.where(query => query.withItemId('item-id')).hide())
    .execute();

  // We can also query for items using a customer supplied ID.
  scene.items(op => op.where(q => q.withSuppliedId('supplied-id')));

  // And, we can define conditionals to our queries to operate on multiple items.
  scene.items(op =>
    op
      .where(q =>
        q
          .withItemId('1')
          .or()
          .withItemId('2')
          .or()
          .withItemId('3')
      )
      .hide()
  );

  // Or, if you want to operate on all items in the scene.
  scene.items(op => op.where(q => q.all()).hide()).execute();

  // You can also specify multiple operation that are executed as a single batch.
  // The following, will hide all items in the scene except for the item with
  // ID=1.
  scene
    .items(op => [
      op.where(q => q.all()).hide(),
      op.where(q => q.withItemId('1')).show(),
    ])
    .execute();

  // The following examples demonstrate all the possible operations you can perform
  // on a scene in combination with the queries outlined above.
  const color = ColorMaterial.fromHex('#ff0000');

  scene.items(op => op.where(q => q.withItemId('1')).hide()).execute(); // hide
  scene.items(op => op.where(q => q.withItemId('1')).show()).execute(); // show
  scene
    .items(op => op.where(q => q.withItemId('1')).materialOverride(color))
    .execute(); // set color
  scene
    .items(op => op.where(q => q.withItemId('1')).clearMaterialOverrides())
    .execute(); // reset color
  scene.items(op => op.where(q => q.all()).hide()).execute(); // hide all
  scene.items(op => op.where(q => q.all()).show()).execute(); // show all
  scene.items(op => op.where(q => q.all()).materialOverride(color)).execute(); // color all
  scene.items(op => op.where(q => q.all()).clearMaterialOverrides()).execute(); // reset all colors

  // The following section describes how to manipulate the camera in the scene, as
  // well as helpers to zoom to specific parts.
  const camera = scene.camera();

  // Sets a specific camera position, and requests a new rendering. This returns
  // a promise that completes when the image rendered and returned to the client.
  const done = camera
    .update({
      position: Vector3.create(0, 0, 100),
      lookAt: Vector3.origin(),
      up: Vector3.up(),
    })
    .render();
  await done; // block until frame is received.

  // Offsets the camera a given delta.
  camera.moveBy(Vector3.up()).render();

  // Rotate the camera around an axis, in this case 1 degree around the vertical
  // axis.
  camera.rotateAroundAxis((1 * Math.PI) / 180, Vector3.up()).render();

  // Fun way to rotate a model :)
  function rotate(degrees, rate) {
    setTimeout(async () => {
      await camera
        .rotateAroundAxis((degrees * Math.PI) / 180, Vector3.up())
        .render();
      rotate(degrees, rate);
    }, rate);
  }
  rotate(1, 1000 / 30); // 1 degree at 30fps

  // Positions the camera to fit to a bounding box. This can be useful for zooming
  // to a particular part.
  const boundingBox = {
    min: Vector3.create(-1, -1, -1),
    max: Vector3.create(1, 1, 1),
  };
  camera.fitToBoundingBox(boundingBox).render();

  // Returns the normalized view vector, as defined by the vector of the camera
  // position to its look at point.
  const vv = camera.viewVector();

  // Returns the current camera position in world space.
  const p = camera.position();

  // Returns the normalized up vector.
  const up = camera.up();
}