Class P3dEmbedApi

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

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

You can for example toggle spin state by:

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

You can for example increment spin amount by:

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

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

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

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

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

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

Usage:

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

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

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

Disabling this can be useful when implementing custom onclick behavior.

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

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

p3d.setShadingMode('xray');