@plattar/plattar-web

Module for interfacing with the Plattar Embeds and Web Viewers (https://www.plattar.com)

Usage no npm install needed!

<script type="module">
  import plattarPlattarWeb from 'https://cdn.skypack.dev/@plattar/plattar-web';
</script>

README

Plattar Logo

install size Minified MinZipped NPM Codacy Badge License

plattar-web allows embedding and interfacing Plattar viewers into your own website.

Quick Use

// Minified Version ES2015 & ES2019 (Latest)
https://cdn.jsdelivr.net/npm/@plattar/plattar-web/build/es2015/plattar-web.min.js
https://cdn.jsdelivr.net/npm/@plattar/plattar-web/build/es2019/plattar-web.min.js

// Standard Version ES2015 & ES2019 (Latest)
https://cdn.jsdelivr.net/npm/@plattar/plattar-web/build/es2015/plattar-web.js
https://cdn.jsdelivr.net/npm/@plattar/plattar-web/build/es2019/plattar-web.js

Installation

  • Install using npm
npm install @plattar/plattar-web

Examples

Plattar is restricted to run correctly on HTTPS. Other protocols are not guaranteed to work.

  • Embed your Plattar Scene as a 3D Viewer into your website.
<plattar-viewer scene-id="your-scene-id"></plattar-viewer>
  • Embed your Plattar Scene as a WebXR experience into your website. WebXR works with Google Chrome and requires an ARCore supported mobile device.
<plattar-webxr scene-id="your-scene-id"></plattar-webxr>
  • Embed your Plattar Scene as a Face Tracking experience into your website. Face Tracking requires camera access.
<plattar-facear scene-id="your-scene-id"></plattar-facear>
  • Embed your Plattar Scene as an 8th Wall experience into your website. 8th Wall works with Google Chrome and IOS Safari on a mobile device.
<plattar-8wall scene-id="your-scene-id"></plattar-8wall>
  • Embed your Plattar Scene as a read-only Editor into your website. The Editor allows customizing an existing Scene by adding, removing or moving objects around.
<plattar-editor scene-id="your-scene-id"></plattar-editor>
  • Embed your Plattar Scene as a read-only Studio into your website. The Studio allows recording videos and movies of an existing scene.
<plattar-studio scene-id="your-scene-id"></plattar-studio>