Add Controls to App created with Editor 2020

Questions
1

Hello Again,

I spent the last week doing research trying to figure out how to add controls ( I’m using orbit in the example) to an app published from the editor. In my .js library, I have included OrbitControls.js. I have followed the in-editor solutions suggested in previous threads on this topic with no success. I have also tried adding

var controls = new THREE.OrbitControls( camera, renderer.domElement );

after

this.setCamera( loader.parse( json.camera )
);

in my app.js and that made the screen load black instead of just not working. aside from these additions I have not appended the editor files in any way, and this project is literally just a rotating cube for test purposes. Does anyone have any suggestions for resources I might scour to figure this out?

Thanks,
M

idex.html below:

<head>

    <title></title>

    <meta charset="utf-8">

    <meta name="generator" content="Three.js Editor">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>

        body {

            font-family: sans-serif;

            font-size: 11px;

            background-color: #000;

            margin: 0px;

            overflow: hidden;

        }

    </style>

</head>

<body ontouchstart="">

    <script src="./js/HelioWebXRPolyfill.js"></script>

    <script src="./js/OrbitControls.js"></script>



    <script type="module">

        import * as THREE from './js/three.module.js';

        import { APP } from './js/app.js';

        import { VRButton } from './js/VRButton.js';

        window.THREE = THREE; // Used by APP Scripts.

        window.VRButton = VRButton; // Used by APP Scripts.

        var loader = new THREE.FileLoader();

        loader.load( 'app.json', function ( text ) {

            var player = new APP.Player();

            player.load( JSON.parse( text ) );

            player.setSize( window.innerWidth, window.innerHeight );

            player.play();

            

            document.body.appendChild( player.dom );

            window.addEventListener( 'resize', function () {

                player.setSize( window.innerWidth, window.innerHeight );

            } );

            

        } );

        controls = new THREE.OrbitControls( camera, renderer.domElement );

    

    </script>

</body>
2

Same question on my end.

Did you figure a solution? Curious to learn about.
n.