Skip to content

Instantly share code, notes, and snippets.

Last active January 13, 2021 23:29
What would you like to do?
Complete AnchorPositioning.js script that creates an AR anchor in Amazon Sumerian, based on the upcoming scripting API.
// Import Sumerian scripts
import * as s from 'module://sumerian-common/api';
import * as si from 'module://sumerian-common/internal';
export default class AnchorPositioning extends s.Action {
static get PROPERTIES() {
return {
// Optional property to set the owner of the AR anchor
anchorEntity: {
// Property should be a reference to another entity in the scene
type: s.type.Entity,
// Description for the Amazon Sumerian web UI
description: 'Attach Anchor to this Entity'
start(ctx) {
// Setting up global communication
// -------------------------------------------------------------------
// Create / establish reference to global placeMode setting variable.
// This should be accessible by all components in the scene, so that
// others can for example pause their animations while the user is
// re-positioning the object.
// All variables created with this are stored in this object instance
// and are therefore persisted and accessible from other functions in
// this class.
this.placeMode ='placeMode');
// Initially, set the place mode to false.
// Get a reference to the WorldPlaced event.
// This is also a global (world) event. This script will emit the
// event once the user finished placing the scene contents.
this.worldPlacedEvent ='WorldPlaced');
// Check entity that will get the anchor component
// -------------------------------------------------------------------
// Allow providing a specific entity in Sumerian where
// the anchor should be located in the scene hierarchy.
if (!this.anchorEntity) {
// Fallback: if the developer didn't set an entity in the editor,
// use this object (self).
console.log("no anchor entity provided - use self");
this.anchorEntity = ctx.entity;
// World reference
// -------------------------------------------------------------------
// The world is essentially the loaded scene. It allows interacting
// with the scene contents and reading / setting several properties
// of it.
const publicWorld =;
// Same as before, we actually need the more powerful internal world
// class, not the "normal" one.
this.internalWorld = si.World.forPublicWorld(publicWorld);
// Amazon Sumerian AR System
// -------------------------------------------------------------------
// Retrieve the ArSystem of Amazon Sumerian. Note that this is only
// available if running on a platform that supports AR.
// So, you can't really test your code on the PC.
this.arSystem = this.internalWorld.getSystem('ArSystem');
if (!this.arSystem) {
// No AR system is found - cancel further initialization.
// This usually happens on the computer so far. For testing,
// you can remove the return statement and continue execution
// to get a bit farther.
console.log("No AR system found");
console.log("Initializing AR anchoring");
// Attach AR anchor component to entity
// -------------------------------------------------------------------
// First, create the anchor component that is actually attached
// to the entity.
const arAnchorComponent = new si.ArAnchorComponent();
// To work with this component, we also need the internal entity
// that extends the 'normal' entity and provides additional functionality.
this.internalAnchorEntity = si.Entity.forPublicEntity(this.anchorEntity);
// The internal entity allows us to add an additional component
// to its definition - in this case, the ArAnchorComponent we
// just created.
// Listeners and Callbacks
// -------------------------------------------------------------------
// First, create a variable that stores an arrow function to the
// performHitTest method of this class. This method takes care of
// starting the hit test in the native AR system.
// We need this as an arrow function to have access to "this" in
// the class scope. Creating this function in a variable allows
// to remove the event listener once the scene closes.
var performHitTestCallback = (evt) => this.performHitTest(evt);
// Add an event listener for touch events anywhere on the screen.
// Note: the MouseUpAction of Sumerian doesn't provide the coordinates
// -> use the HTML DOM event directly. This is accessible through
// the Renderer.
this.internalWorld.sumerianRunner.renderer.domElement.addEventListener('touchend', performHitTestCallback);
// Phones use touch events. To also develop / test on a PC (or on
// a mobile device with a mouse attached), you can also register for
// mouse events.
//this.internalWorld.sumerianRunner.renderer.domElement.addEventListener('mouseup', performHitTestCallback);
// Listen for the world event "StartPlaceWorld". This will be sent
// by another component in the scene when the placement mode should
// be active. When that event is received, this script sets placeMode to true,
// which actually allows this script to react to touch events.
this.startPlaceWorldEvent ='StartPlaceWorld');
this.startPlaceWorldEvent.listen(ctx, data => this.placeMode.set(true));
// Cleanup. When this script stops, also remove the event listeners.
// This is especially important here, as Sumerian doesn't always reliably
// clean up all the runtime-registrations when you repeatedly start the scene.
() => {
console.log("Removing touch event listener.");
this.internalWorld.sumerianRunner.renderer.domElement.removeEventListener('touchend', performHitTestCallback);
// For testing on the PC with a mouse
//this.internalWorld.sumerianRunner.renderer.domElement.removeEventListener('mouseup', performHitTestCallback);
// Touch handler.
// As the first step, performs a hit test at the currrent screen location.
performHitTest(evt) {
// First, check if this script is currently in an active place mode.
// That is triggered when another component in the scene sent the
// StartPlaceWorld event.
if (!this.placeMode.get()) {
// Currently not place mode - don't proceed!
console.log("Not in place mode - not proceeding");
console.log("Perform hit test: " + JSON.stringify(evt));
var pixelRatio = this.internalWorld.sumerianRunner.renderer.devicePixelRatio;
// Touch
var touchX;
var touchY;
if (evt.changedTouches) {
touchX = evt.changedTouches[0].pageX * pixelRatio;
touchY = evt.changedTouches[0].pageY * pixelRatio;
} else {
// Mouse
touchX = evt.clientX * pixelRatio;
touchY = evt.clientY * pixelRatio;
var normalizedX = touchX / this.internalWorld.sumerianRunner.renderer.viewportWidth;
var normalizedY = touchY / this.internalWorld.sumerianRunner.renderer.viewportHeight;
if (this.arSystem) {
console.log("AR System found: calling hit test callback...")
this.arSystem.hitTest(normalizedX, normalizedY, (anchorTransform) => this.hitTestCallback(anchorTransform));
} else {
// No AR mode - exit place mode right away
console.log("No AR system - exiting place mode.")
// Hit test callback. If the hit test was successful (i.e., detected a
// point in the real world), registers an anchor with that point.
hitTestCallback(anchorTransform) {
if (anchorTransform) {
console.log("Transform from hit test: " + anchorTransform + ". Registering anchor...");
this.arSystem.registerAnchor(anchorTransform, (anchorId) => this.registerAnchorCallback(anchorId));
} else {
console.log("No transform received from hit test");
// Anchor registration callback. Sets the anchor ID of the entity's
// ArAnchorComponent. The engine's ArSystem will automatically update
// the world position and orientation of entities with a valid anchor ID.
registerAnchorCallback(anchorId) {
if (anchorId) {
this.internalAnchorEntity.getComponent('ArAnchorComponent').anchorId = anchorId;
console.log("Registered AR anchor: " + anchorId);
console.log("Quit place mode and sent WorldPlaced event");
} else {
console.log("No Anchor ID received");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment