Magic Leap WebXR (three.js) SimpleBox #JavaScript

Explain
A sample that rotates the BOX when the trigger button is pressed.

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

controller.glb
https://github.com/mvilledieu/magicleap-hello-webxr-threejs/blob/master/controller.glb

SSL certificate WEB server or Local server with cert.pem and key.pem.

Code
index.html

<html lang="en"><head>
    <title>Magic Leap WebXR (three.js) SimpleBox </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/magicleap-helio-webxr-polyfill@1.0.0/HelioWebXRPolyfill"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/build/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/vr/WebVR.js"></script>
    <style>
        body
        {
            margin:0px;
            padding:0px;
            overflow:hidden;
        }
    </style>
</head>

<body>
    <script>
        let camera,
            scene,
            renderer,
            controllerGroup,
            container,
            mesh,
            isSelect = false,
            ticker = 0;
        const loader = new THREE.GLTFLoader();
        const OBJECTS_HEIGHT = 1.1;

        init();
        animate();

        function init() {

            container = document.createElement('div');
            document.body.appendChild(container);

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10);
            camera.position.y = OBJECTS_HEIGHT;

            scene.add(camera);

            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.vr.enabled = true;
            container.appendChild(renderer.domElement);

            controllerGroup = renderer.vr.getController(0);
            controllerGroup.addEventListener('selectstart', onSelectStart);
            controllerGroup.addEventListener('selectend', onSelectEnd);
            controllerGroup.addEventListener('select', onSelect);

            loader.load('./controller.glb',
                scenes => {
                    controllerGroup.add(scenes.scene);
                    scene.add(controllerGroup);
                }
            );

            const geo = new THREE.BoxGeometry(0.25, 0.25, 0.25);
            const mat = new THREE.MeshNormalMaterial();
            mesh = new THREE.Mesh(geo, mat);
            mesh.position.set(0, OBJECTS_HEIGHT, -1);
            scene.add(mesh);

            document.body.appendChild(WEBVR.createButton(renderer));
            window.addEventListener('resize', onWindowResize, false);
        }

        function onSelect() {
            console.log('Controller: select');
        }

        function onSelectStart() {
            console.log('Controller: select start');
            isSelect = true;
        }

        function onSelectEnd() {
            console.log('Controller: select end');
            isSelect = false;
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            renderer.setAnimationLoop(render);
        }

        function render() {
            if (isSelect)
            {
                ticker+=0.02;
                mesh.rotation.set(ticker, -ticker, 0);
            }
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

Reference

WebVR / WebXR (Magic Leap Learn)
https://creator.magicleap.com/learn/guides/webvr-webxr

Magic Leap Helio - Webxr Polyfill (npm)
https://www.npmjs.com/package/magicleap-helio-webxr-polyfill

Magic Leap Helio - Webxr Polyfill (github)
https://github.com/mvilledieu/magicleap-helio-webxr-polyfill

three.js WebVR Examples
https://threejs.org/examples/?q=webvr

Thanks!