Errors : Cannot use import statement outside a module THREE.OrbitControl

Question

Im starting with three.js. After trying to implement orbit controls i have some errors. It looks simple but i cannot find a good solution for my errors. When im trying to implement controls like:

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

im getting these errors

Cannot use import statement outside a module and THREE.OrbitControls is not a constructor

I added both threejs and orbitcontrols just before starting a new script. What am I doing wrong here?

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

        <script type="text/javascript">
                var scene = new THREE.Scene();

                var camera = new
                THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);

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

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

Answer 1

It seems your version of OrbitControls.js is a ES6 module. That means you have to import the controls like so:

<script type="module">

    import * as THREE from 'scripts/three.module.js';
    import { OrbitControls } from 'scripts/OrbitControls.js';

     var scene = new THREE.Scene();

     var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);

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

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

Notice that the above code uses the three.module.js build file which you can find in the build directory of the official git repository. If you are not familiar with ES6 modules, I suggest you study an existing resource about this topic. Eg https://exploringjs.com/es6/ch_modules.html

three.js R109