Help us understand the problem. What is going on with this article?

Magic Leap WebXR (three.js) SimpleBox

More than 1 year has passed since last update.

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!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away