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](https://i.stack.imgur.com/pVPs7.png)

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: 
Jest solution
-------------

The examples that ship in the npm module have not been built and would need to be transformed.

Because I'm not testing these files themselves I just stub them out:

```js
//jest.config.js
  moduleNameMapper: {
    'three/examples/jsm/': '<rootDir/config/jest/mockUndefined.js'
  }

//config/jest/mockUndefined.js
module.exports = undefined

```

If you really need to include them in tests, a `ts-jest` solution would look like this:

```js
//jest.config.js
{
  //slow preset - does many extra transforms
  preset: 'ts-jest/presets/js-with-ts-esm',
  transformIgnorePatterns: ['/node_modules/(?!(three/examples/jsm)/)'],

```

Be warned, the second solution is much slower as now jest has to transform many extra files.
It seems your version of `OrbitControls.js` is a ES6 module. That means you have to import the controls like so:

```js
<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](https://github.com/mrdoob/three.js/blob/master/build/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. E.g. <https://exploringjs.com/es6/ch_modules.html>

`three.js R109`