magicleap / prismatic

Prismatic is a declarative JS library for creating 3D content for the Helio browser.

Prismatic

Prismatic is a declarative JS library for creating 3D content for the Helio browser. Using simple HTML tags with inline attributes and CSS styling, you can easily render 3D content that pops off of the page and you can grab and place into your environment.

Installing

If you use npm, run npm i @magicleap/prismatic. Otherwise, you can download the latest release from the developer portal.

To add the minified version:

<script src="https://unpkg.com/@magicleap/prismatic"></script>

The source code for Prismatic is also hosted in a repository on GitHub.

See our Prismatic documentation.

For more information and guides are available on Magic Leap's Developer Portal.

For live samples and code snippets, highlighting the Web Platform's core features, checkout the Developer Samples website here.

What's new in Release v2.0.6

• Use new event model introduced in Helio for Lumin OS 0.98.20. Prismatic library has to be updated to v2.0.6 maintain Extraction functionality.

Features of Prismatic v2

• Faster model loading
• Model instancing
• Models scroll with page
• Models can be extracted with raycast: Users no longer have to be interacting with the parent element on the page to extract them.
• Extract 3D models from regular HTML elements.
• Add instances of a 3D node on the fly.
• <stage> tag: Devs can specify how much space their experience will take up.
• Stage size can be updated via JS.

prismatic's Issues

On latest lumin version browserWidth is not a function

Hello, I downloaded latest lumin OS for Magic Leap and I had the code described here: https://magicleaphelio.com/WebAPI/docs/prism-size.html

But js console threw error that browserWidth, browserHeight, browserBreadth are not functions, and indeed changing them to:

var width = window.mlWorld.browserWidth;
var height = window.mlWorld.browserHeight;
var breadth = window.mlWorld.browserBreadth;

works without problems. Maybe documentation should be updated?

How to run examples like on https://magicleaphelio.com/devsamples/

I keep getting the error:

Uncaught ReferenceError: mlWorld is not defined
    at HTMLElement.render (prismatic.min.js:1)
    at HTMLElement.attributeChangedCallback (prismatic.min.js:1)

When trying to run the intermediate sample from here: https://developer.magicleap.com/learn/guides/prismatic-positioning-quads-and-scrollable-content

Or any of the samples from this repo.