Options
All
  • Public
  • Public/Protected
  • All
Menu

Class P3dEmbedApi

Hierarchy

  • P3dEmbedApi

Index

Constructors

constructor

Methods

addHotspot

  • Add a new hotspot with given parameters

    // Get location to put the hotspot at
    const location = await targetObject.getSceneLocation();
    // Add hotspot with defined properties
    p3d.addHotspot({
      title: 'Hello',
      description: 'World',
      // Set location
      location: location,
      // Make camera point to the target location when hotspot is selected
      cameraTransform: {
        target: location,
      },
    });
    

    Parameters

    Returns Promise<P3dHotspot>

getCamera

  • Get current camera location and target

    p3d.getCamera().then((resp) => {
      // Log response
      console.log('Camera location', resp.location);
      console.log('Camera target', resp.target);
    });
    

    Returns Promise<P3dCameraResponse>

getSpin

  • getSpin(): Promise<boolean>
  • Get whether viewer auto spin is active

    You can for example toggle spin state by:

    p3d.getSpin().then((value) => {
      p3d.setSpin(!value);
    });
    

    Returns Promise<boolean>

getSpinAngle

  • getSpinAngle(): Promise<number>
  • Get viewer auto spin rotation angle in degrees.

    You can for example increment spin amount by:

    p3d.getSpinAngle().then((value) => {
      // Rotate model spin state by 20 degrees
      p3d.setSpinAngle(value + 20);
    });
    

    Returns Promise<number>

listAnimations

  • Get array of all model animations.

    Using via then() callback:

    p3d.listAnimations().then((animations) => {
      // Log number of animations
      console.log(animations.length);
    });
    

    Or in async function:

    const animations = await p3d.listAnimations();
    // Log number of animations
    console.log(animations.length);
    

    Returns Promise<P3dAnimation[]>

listHotspots

  • Get array of all model hotspots.

    Using via then() callback:

    p3d.listHotspots().then((hotspots) => {
      // Select first hotspot if any
      if (hotspots.length) {
         hotspots[0].select();
      }
    });
    

    Or in async function:

    const hotspots = await p3d.listHotspots();
    // Select first hotspot if any
    if (hotspots.length) {
       hotspots[0].select();
    }
    

    Returns Promise<P3dHotspot[]>

listMaterials

  • Get array of all model materials.

    Using via then() callback:

    p3d.listMaterials().then((materials) => {
      // Change baseColor of all materials green
      materials.forEach((material) => {
        material.baseColor = '0f0';
      });
    });
    

    Or in async function:

    const materials = await p3d.listMaterials();
    // Change baseColor of all materials green
    materials.forEach((material) => {
      material.baseColor = '0f0';
    });
    

    Returns Promise<P3dMaterial[]>

listObjects

  • Get array of all model objects.

    Using via then() callback:

    p3d.listObjects().then((objects) => {
      // Move Y coordinate of all objects by 0.5 units
      objects.forEach((object) => {
        object.locationY += 0.5;
      });
    });
    

    Or in async function:

    const objects = await p3d.listObjects();
    // Move Y coordinate of all objects by 0.5 units
    objects.forEach((object) => {
      object.locationY += 0.5;
    });
    

    Returns Promise<P3dObject[]>

listVariants

  • Get array of all model variant sets and their variants.

    Using via then() callback:

    p3d.listVariants().then((variantSets) => {
      ...
    });
    

    Or in async function:

    const variantSets = await p3d.listVariants();
    

    With the variantSets array you can access all sets and variants:

    // Iterate through sets
    variantSets.forEach((set) => {
      console.log('Set name', set.name);
      // Iterate through set variants
      set.variants.forEach((variant) =>  {
         console.log('Variant name', variant.name);
      });
    });
    

    Returns Promise<P3dVariantSet[]>

onHotspotSelected

  • Set a callback function that fires when hotspot selection changes.

    Usage:

    p3d.onHotspotSelected((selectedHotspot) => {
       // Log selected hotspot
       console.log(selectedHotspot);
    });
    

    Parameters

    Returns void

onVariantSelected

  • Trigger callback every time a variant is selected by user.

    const variantSelectedOptions = {
         returnInitial: true,  // Return initially selected variant configuration immediately
         includeThumbnail: true, // Include active configuration thumbnail url
     };
    p3d.onVariantSelected(function(response) {
       // Log active variant name of each set
       response.activeVariants.forEach((variant) => {
            console.log(variant.name);
       });
       // And thumbnail url
       console.log(response.activeThumbnail);
    }, variantSelectedOptions);
    

    Parameters

    Returns void

projectToScreen

  • projectToScreen(x: number, y: number, z: number): Promise<{ x: number; y: number }>
  • Project x, y and z coordinates from 3D space to screen x and y coordinates

    p3d.projectToScreen(0, 0, 0).then((resp) => {
      console.log('3D scene center is at', resp.x, resp.y, 'pixels');
    });
    

    Parameters

    • x: number
    • y: number
    • z: number

    Returns Promise<{ x: number; y: number }>

resetCamera

  • resetCamera(): void
  • Activate camera reset animation

    Returns void

setAllowCameraRecenter

  • setAllowCameraRecenter(value: boolean): void
  • Set if single click on model surface re-centers camera towards that point (default)

    Disabling this can be useful when implementing custom onclick behavior.

    Parameters

    • value: boolean

    Returns void

setAllowCameraReset

  • setAllowCameraReset(value: "always" | "never" | "if-outside"): void
  • Set in which situations user is allowed to trigger camera reset (double click)

    Parameters

    • value: "always" | "never" | "if-outside"

      Define when camera reset is allowed:

      • always User can reset camera at any time
      • if-outside Camera resets if user clicks outside of the model, but not if user clicks on top of the model. This can be useful when implementing custom onclick behavior.
      • never User is not able to reset camera manually

    Returns void

setCamera

  • Navigate camera to a new location.

    For example move camera to a new location:

    const options = {
      // Move camera to 10 units away from origin in z coordinate
      location: {
         x: 0,
         y: 0,
         z: 10
      },
      // Look at origin
      target: {
         x: 0,
         y: 0,
         z: 0
      }
    };
    p3d.setCamera(options);
    

    Or just change the direction camera is looking at without moving camera itself:

    const options = {
      // Look at origin
      target: {
         x: 0,
         y: 0,
         z: 0
      }
    };
    p3d.setCamera(options);
    

    Parameters

    Returns void

setShadingMode

  • setShadingMode(value: "smooth" | "wireonsmooth" | "clean" | "wireonclean" | "shadeless" | "wireonshadeless" | "xray" | "wireonxray" | "wire"): void
  • Set viewer shading mode using same format strings as shading mode url parameters

    You can for example change viewer shading mode to "x-ray":

    p3d.setShadingMode('xray');
    

    Parameters

    • value: "smooth" | "wireonsmooth" | "clean" | "wireonclean" | "shadeless" | "wireonshadeless" | "xray" | "wireonxray" | "wire"

    Returns void

setSpin

  • setSpin(value: boolean): void
  • Set viewer auto spin state

    Parameters

    • value: boolean

    Returns void

setSpinAngle

  • setSpinAngle(value: number): void
  • Set viewer auto spin rotation angle in degrees

    Parameters

    • value: number

    Returns void

showHotspotUI

  • showHotspotUI(value: boolean): void
  • Set whether hotspot UI elements are visible or hidden

    Parameters

    • value: boolean

    Returns void

showVariantUI

  • showVariantUI(value: boolean): void
  • Set whether variant UI elements are visible or hidden

    Parameters

    • value: boolean

    Returns void

Generated using TypeDoc