P3d.in Embed API
    Preparing search index...

    Class P3dEmbedApi

    Index

    Constructors

    Methods

    • 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>

    • 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>

    • 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>

    • 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>

    • 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[]>

    • 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[]>

    • 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[]>

    • 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[]>

    • 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[]>

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

      Usage:

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

      Parameters

      Returns void

    • 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

    • 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; z: number }>

    • Activate camera reset animation

      Returns 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

    • 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

    • 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

    • 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

    • Set viewer auto spin state

      Parameters

      • value: boolean

      Returns void

    • Set viewer auto spin rotation angle in degrees

      Parameters

      • value: number

      Returns void

    • Set whether hotspot UI elements are visible or hidden

      Parameters

      • value: boolean

      Returns void

    • Set whether variant UI elements are visible or hidden

      Parameters

      • value: boolean

      Returns void