P3d.in Embed API

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

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

Or use a script tag:

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

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>

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

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

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

Full API reference

See complete P3dEmbedApi class reference here

Examples

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