Magic Leap MagicScript Landscape Application. threejs (WebGL) Simple Box #JavaScript

Prepare
Magic Leap One (Lumin OS v0.96.0)
https://www.magicleap.com/magic-leap-one

Create Project

magic-script init
? What is the name of your application? threejs simple box
? What is the app ID of your application? org.magicscript.threejs
? In which folder do you want to save this project? my-threejs-box
? Do you want a Landscape App? Yes
? What are your device targets?
>(*) Magic Leap
 ( ) iOS
 ( ) Android
cd my-threejs-box

Install

npm i magic-script-webgl-prism-controller
npm i three

Code

Change app.js

import { LandscapeApp } from 'lumin';
import { WebGlController } from 'magic-script-webgl-prism-controller';
import {
  Mesh, 
  MeshNormalMaterial, 
  PerspectiveCamera, 
  Scene, 
  WebGLRenderer,
  BoxGeometry
} from 'three';

export class App extends LandscapeApp {

  onAppStart () {
    let prism = this.requestNewPrism([1.0, 1.0, 0.05]);
    let controller = window.controller = new WebGlController();
    prism.setPrismController(controller); 
  }

  updateLoop(delta) {
    return true;
  }
}

window.onload = () =>{
  const scene = new Scene();
  const camera = new PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1,
    1000
  );
  camera.position.z = 4;

  const renderer = new WebGLRenderer({antialias: true});
  renderer.setClearColor('#000000');
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  const geometry = new BoxGeometry(2.5, 2.5, 2.5);
  const material = new MeshNormalMaterial();
  const cube = new Mesh(geometry, material);

  scene.add(cube);
  return window.requestAnimationFrame(render);

  function render(time)
  {
      window.requestAnimationFrame(render);
      cube.rotation.x = time / 1000;
      cube.rotation.y = time / 1200;
      renderer.render(scene, camera);
  }
};

Build

magic-script build -i

Run

magic-script run --port=10000

Reference

magic-script-samples/future-gl-bookofshaders (Github)
https://github.com/magic-script/magic-script-samples/tree/future-gl-bookofshaders/

magicscript
https://www.magicscript.org/

Thanks!