Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including aframe-supercraft-loader with all npm packages installed. Try it out:

var aframeSupercraftLoader = require("aframe-supercraft-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

aframe-supercraft-loader v1.1.3

Supercraft loader for A-Frame.

aframe-supercraft-loader

Loader for scenes and objects created with Supercraft, an in-VR creation tool built with WebVR and A-Frame.

Supercraft

API

supercraft-loader

Load a Supercraft object into an A-Frame scene.

Use either src or name to point to a Supercraft asset.

PropertyDescriptionDefault Value
includeEnvironmentWhether to include environment (sky, ground, lights).true
includeShadowsWhether the mesh should receive and cast shadows. Alternatively, just set the shadow component.true
nameName of Supercraft asset hosted on server. For example, if the site was at https://supermedium.com/craft/hello-world, then set supercraft-loader="name: hello-world".''
srcSelector to <a-asset-item> or URL to Supercraft JSON.''

supercraft-visualizer

Similar to supercraft-loader, but loads shapes in over time, visualizing the creation process over a set duration. Really cool!

PropertyDescriptionDefault Value
autoplayWhether to start visualizing immediately.false
durDuration of visualization in millseconds.2000
deprioritizeThingsComma-separated list of IDs of Supercraft Things to load last at the end to control the visualization process. (e.g., thing45).''
prioritizeThingsComma-separated list of IDs of Supercraft Things to load first at the beginning to control the visualization process. (e.g., thing25).''
nameName of Supercraft asset hosted on server. For example, if the site was at https://supermedium.com/craft/hello-world, then set supercraft-loader="name: hello-world".''
srcSelector to <a-asset-item> or URL to Supercraft JSON.''

To trigger the visualization, emit supercraftvisualizerstart.

Getting the JSON

Supercraft sites are stored in Amazon S3. Download from the URL:

https://supercraftsite.s3-us-west-2.amazonaws.com/<SITE_NAME>

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-supercraft-loader/dist/aframe-supercraft-loader.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity supercraft-loader="name: wealthy-dock"></a-entity>

    <a-entity supercraft-visualizer="name: icky-snake"></a-entity>

    <!-- OR. -->

    <a-assets>
      <a-asset-item id="supercraft" src="supercraft.json"></a-asset-item>
    </a-assets>
    <a-entity supercraft-loader="src: #supercraft"></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-supercraft-loader

Then register and use.

require('aframe');
require('aframe-supercraft-loader');
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free