CKEditor MlImport Guide

Project Summary

This is a guide to our ckeditor plugin to assist with the importation and editing of magicleap objects alongside my understanding of the prismatic api.

Project Details

Overview

The mlimport plugin is designed to allow for the easy importation and manipulation of ml-model objects for insertion into a page.

Clicking the button located in the wysiwyg
 

opens up the plugin:

 

There are four tabs that contain attributes for the ml-model:

  • Basic - contains basic information about the ml-model and quick access to commonly changed attributes
  • Style - contains attributes related to basic css styling  and ml-model specific styling to alter the location, size, and color of the model.
  • Static Transforms - contains transformation attributes that are applied when the model is initialized, such as an initial rotation.
  • Animated Transforms - contains transformation attributes that are applied over time, like the spinning of a model over a set duration.
Basic Tab

The basic tab includes some of the required attributes and a lot of attributes that are frequently changed.

The attributes include:

  • Name - If an image thumbnail is not selected, the name is inserted:
    
     <ml-model> name </ml-model>
    this is to allow for the easy selection/deletion of the ml-model and to mark where on the page the model is located.
  • Id - The Id, when used in conjunction with the raycast boolean, identifies the object for use in a node raycast event
    
    <ml-model
      id="balloon"
      src="balloon.fbx"
      style="width: 300px; height: 300px; position: absolute; right: 50%; top: 50%;"
      raycast="true">
    </ml-model>
    
    <script>
      balloon.addEventListener('node-raycast', function (e) {
        ...
      });
    </script> 
  • Source URL - this is the source that will be displayed in the ml-model. Currently supported file formats are .fbx and .glb . Clicking the browse server button allows for navigation through projects and assets for selection of the source url.
  • Image Thumbnail URL - This property overrides the name for use in allowing the easy selection/deletion of the ml-model and marking of where the model is located on the page.
  • Visible - this checkbox allows the toggling of the 'visibility' attribute. When checked, visibility is set to 'visible' and when unchecked visibilty is set to 'hidden'
  • Scrollable - this checkbox allows the toggling of the 'scrollable' attribute. The 'scrollable' attribute only renders model when scrolling through the viewport when set. Disabled by default. Ml-models with "scrollable='true'" are only rendered when they are currently in the viewport and they stick to where they are at on the page. With "scrollable='false'" the ml-model will scroll with the viewport.
  • Raycast - this checkbox is used in conjunction with the id attribute. See https://creator.magicleap.com/learn/guides/prismatic-raycast for more details
  • Extractable - this checkbox is a boolean that enables the model to be pulled out of the page and placed in the user's environment. Checked: true, unchecked: false.
  • Extractable Scale - The extracted scale is a number which allows the user to pass in a multiplier with the extracted model that will scale the model once extracted.
Style Tab

The style tab contains attributes related to basic css styling and ml-model specific styling to alter the location, size, and color of the model.

Attributes:

  • Width - css attribute controlling the size along the x-axis.
  • Height - css attribute controlling the size along the y-axis.
  • Breadth - ml-model attribute controlling the size along the z-axis. If there is no breadth specified the model matches the size along the x-axis. The value of breadth could be in pixels (px), centimeters (cm) or millimeters (mm) units.
  • Left, Right, Top, Bottom, Position - all css attributes controlling the location of the model.
  • Z-offsetControls how far off the page the model will appear. By default, models are positioned 250px forward on the z-axis. You should provide a:
    • positive value to position the model more towards the user
    • negative value to position the model away from the user

The value of z-offset supports pixels (px), centimeters (cm) or millimeters (mm) CSS measurement units.

  • RGBA - This allows you to set the red-green-blue-alpha value for the ml-model. RGB values range from 0-255 and the alpha value should be a float from 0 to 1. Red goes in rgba R, green in rgba G, and so on.
CSS Attribute Notes
width/height supports any CSS measurement units
position support any CSS measurement units
top/bottom/left/right use negative values to offset from page
Static Transforms Tab

The static transforms tab contains transformation attributes that are applied when the model is initialized, such as an initial rotation. Each attribute contains an X,Y, and Z value.

Attributes:

  • Model-scale - Sets the model scale within the Prism. By default model scale is calculated to be the maximum size of the Prism.
  • Model-positionSets the model position within the Prism. By default the model position is set to 0, 0, 0.

  • Prism-rotation Rotate the prism by a specified amount of degrees.

  • RotationSets the model rotation within the Prism using Euler Angles.

Animated Transforms Tab

The animated transforms tab contains transformation attributes that are applied over time, like the spinning of a model over a set duration. Each attribute has an x,y,z property, duration property, and track property.

Tracks

Tracks allow you to queue your animations.

  • If you want your animated transforms to run sequentially, place them on the same track (for example, track 1).
  • If you want your animations to run simultaneously, place them on separate tracks (for example, track 1, track 2, and so on).

Attributes:

  • move-to - Move the model within the Prism to the specified position (x,y,z) over the set duration.
  • move-by Move the model within the Prism by the specified position (x,y,z) over the set duration.
  • rotate-by-anglesRotates the model over time by the specified angles.
  • scale-to - scales the model over time by the specified scalar over the duration.
  • spin - spins the model on the axes specified with a 1. If you want to spin relative to the y-axis, "x y z" would be "0 1 0". My understanding is that the degrees is the amount of degrees spun per second.
Attribute Name Parameters Usage
move-to offset, duration, track move-to="offset: 200px 100px -100px; duration: 5s; track: 1;"
move-by axes, duration, track move-by="axes: 0 90px 300px; duration: 5s; track: 1;"
scale-to axes, duration, track scale-to="axes: 0.5 0.5 0.5; duration: 3s; track: 1;"
spin axes, angle, duration, track spin="axes: 1 1 1; angle: 360deg; duration: 3s; track: 1;"
rotate-by-angles angles in radians, duration, track rotate-by-angles="angles: 0 1.57 0; duration: 5s; track: 1;"
rotate-by-angles angles in degrees, duration, track rotate-by-angles="angles: 0 90deg 0; duration: 5s; track: 1;"
     
Editing

When an ml-model is placed on the page, you are able to right click it to edit any attributes you wish. The mlimport plugin will be populated with the same attributes as before and if they are changed a new ml-model will be inserted in its place.

 

 

Helpful links:

Prismatic API reference: https://creator.magicleap.com/learn/reference/public/v0.16.0/UIKit/index.html

Prismatic guide: https://creator.magicleap.com/learn/guides/prismatic-positioning-quads-and-scrollable-content

Average (0 Votes)

Assets
Related Assets
Remote Assets