About

P3d.in embed API allows you to control embedded models with javascript.

It is possible to edit materials, alter viewer options or even trigger animations, hotspots or variants. This allows building custom web applications or user interfaces on top of p3d.in embeds.

Ember API is available for Plus and Premium accounts.

Installing

Install using NPM:

npm install @p3d/embed-api
Copy

// Import in javascript or typescript project
import P3dEmbedApi from '@p3d/embed-api';
Copy

Or use a script tag:

<script src="https://cfstatic.p3d.in/embed-api/v2/p3d-embed-api.js"></script>
Copy

Usage

First you need to add the embed iframe element of your model. Embed API is available on Plus accounts.

Note the +api parameter at the end of the url. This is will activate the API functionality:

<iframe id="p3d-embed" src="https://p3d.in/e/Xo4BQ+load+api" allowfullscreen="" width="640" height="480"></iframe>
Copy

You can then initialize embed API by constructing the P3dEmbedApi class.

Provide the iframe HTML element in the first argument:

const p3d = new P3dEmbedApi(document.getElementById("p3d-embed"));

// Then use the api by activating model auto spinning
p3d.setSpin(true);
Copy

Note that commands are queued and executed only when model has finished loading.

So if you query model materials it will not resolve until model has loaded:

p3d.listMaterials().then((materials) => {
  // This will only fire when / if model has finished loading
  console.log(materials);
});
Copy

Alternatively you can place your code inside the onload callback:

const p3d = new P3dEmbedApi(document.getElementById("p3d-embed"), {
  onload: function () {
    // This will only fire when / if model has finished loading
    console.log('onload');
  },
});
Copy

Full API reference

See complete P3dEmbedApi class reference here

Examples

For detailed examples on how to use p3d.in embed API see:

• https://p3d.in/faq/embed-api
• https://p3d.in/faq/embed-api-examples