Adding orbit controls either in editor or in export

Hello, Sorry to ask such a basic question:
I just want to add simple orbit controls to a scene in the editor or in my script, but whenever I try it no longer renders.

I have tried adding this:

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

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

camera.position.set( 0, 20, 100 );
controls.update();

function animate() {

	requestAnimationFrame( animate );

	controls.update();

	renderer.render( scene, camera );

}

in my index.html, and also in the scene object in editor and neither would load.
sorry, thanks,

How do you include OrbitControls?

BTW: Calling OrbitControls.update() should not be necessary for basic usage.

1 Like

maybe you need to put in THREE.OrbitControls?

1 Like

I know this is kinda backwards but I only just started to learn about html/js like last week and only know enough to barely copy paste my way through this program. I’m only trying to make orbit controls, this is my entire index.

  <!DOCTYPE html>

<html lang="en">

    <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 type="module">

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

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

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

            var renderer = new THREE.WebGLRenderer();

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

document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

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

camera.position.set( 0, 20, 100 );

controls.update();

function animate() {

    requestAnimationFrame( animate );

    controls.update();

    renderer.render( scene, camera );

}

            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 );

                } );

            } );

        </script>

    </body>

</html>

Um, according to your code you are not importing OrbitControls.

1 Like

that absolutely sounds right and again, apologies for my ignorance, to input OrbitControls what is the complex string of letters I would type?

You can copy the module version of OrbitControls into your js directory and then import it in your app.

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

However, this only works if you adjust this path. OrbitControls needs to include the same three.module.js version like your index.html file.

1 Like

Thank you!

1 Like

@Mugen87 would you be willing to keep walking me through this? I know it’s probably not that exciting but I would appreciate it.

Thanks,
M

Hi, it seems I have the same problem.

Have you solved your problem?

If so, would you like to share your solution?

Thanks in advance

Hi, I just started experimenting with three.js and ran into the same problem. Luckily I’ve just figured out the solution and I thought to help you out.

FYI, I’ve used NPM to install three.js package and using Webpack to bundle all my dependencies.

The missing piece in this problem is the OrbitControls.js file which should have been included in the three.js package, but you have to download it separately.

OrbitControls Source Download Link: three.js/OrbitControls.js at 9ef27d1af7809fa4d9943f8d4c4644e365ab6d2d · mrdoob/three.js · GitHub

Then follow below steps:

  1. Download the OrbitControls source.

  2. Place the source in your ./js folder (or wherever you want, it doesn’t matter if you are bundling).

  3. Check Import command path of source: OrbitControls.js source file imports few methods from three.js file, so you have to make sure that the path in the import command is accuratet. If not, change it to the correct path.

  4. Now import OrbitControls.js after three.js.
    Like this:
    import * as THREE from ‘three’;
    import {OrbitControls} from ‘./OrbitControls’;

That’s it! Now you have OrbitControls available when you call new OrbitControls().
With these minor adjustments, Lday’s code above should work fine.

Let me know if it’s working for you :slight_smile:!

Hi Vishal Chamakuri,

really thank you for your fast answer.

I still think I need your help; I went deeply in to the structure from the “Publish” files of the Editor and found out differences between Lday’s code and mine.

I’have edited the HTML file to add a reference to OtbitControls.js. then i edited this file to make the correct reference to the three.module.js file.

I do not use NPM nor Webpack, I rely on the files from “Publish” menu in the Three’s Editor site. I upload test files on my FTP server.

The Editor now publishes and organizes files in a different way from Lday’s code: the function “Animate” is in the app.js file, not in the index.html. Its code is different too, it is referring to a lot of data coming from the app.json file in the root folder.

I tried several times to paste “var controls = new OrbitControls( camera, renderer.domElement );” and “controls.update();” where it seems to be corresponding but without any result. Checking the console in my web browser I get this:

OrbitControls.js:98 Uncaught TypeError: Cannot read property ‘position’ of undefined at new OrbitControls (OrbitControls.js:98) at new Player (app.js:10) at Object.onLoad (index.html:35) at XMLHttpRequest. (three.module.js:36471)

||OrbitControls|@|OrbitControls.js:98|
| — | — | — | — |
||Player|@|app.js:10|
||(anonymous)|@|index.html:35|
||(anonymous)|@|three.module.js:36471|
||load (async)|||
||load|@|three.module.js:36449|
||(anonymous)|@|index.html:33|

I hope you can help me in understanding how to edit the code.
If you have the chance try to upload a GLB file to the Three’s Editor then to Publish the result. Give a look at the files, they are different from Lday’s code.

for anyone who is still needing this, you can see the commit of mine fix.