Class P3dEmbedApi

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,
  },
});
Copy

Get current camera location and target

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

Get whether viewer auto spin is active

You can for example toggle spin state by:

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

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);
});
Copy

Get array of all model animations.

Using via then() callback:

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

Or in async function:

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

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();
  }
});
Copy

Or in async function:

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

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';
  });
});
Copy

Or in async function:

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

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;
  });
});
Copy

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;
});
Copy

Get array of all model variant sets and their variants.

Using via then() callback:

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

Or in async function:

const variantSets = await p3d.listVariants();
Copy

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);
  });
});
Copy

Set a callback function that fires when hotspot selection changes.

Usage:

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

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);
Copy

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');
});
Copy

Activate camera reset animation

Set if single click on model surface re-centers camera towards that point (default)

Disabling this can be useful when implementing custom onclick behavior.

Set in which situations user is allowed to trigger camera reset (double click)

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);
Copy

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);
Copy

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');
Copy

Set viewer auto spin state

Set viewer auto spin rotation angle in degrees

Set whether hotspot UI elements are visible or hidden

Set whether variant UI elements are visible or hidden