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

If you're using yarn/npm you can import * as THREE from 'three-full' just make sure to add/install the three-full package. three-full has some extra helpers like THREE.GLTFLoader. — Jacksonkr
– Jacksonkr, Commented May 22, 2021 at 19:59

Eyni Kave · Accepted Answer · 2020-01-17 16:55:16Z

3

Online Resource, Threejs Host, Sample Code

           <script type="module">
            import * as THREE from 'https://three.ipozal.com/threejs/resources/threejs/r110/build/three.module.js';
            import { OrbitControls } from 'https://three.ipozal.com/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';
            import { OBJLoader2 } from 'https://three.ipozal.com/threejs/resources/threejs/r110/examples/jsm/loaders/OBJLoader2.js';

            function main() {
.....
</script>

answered Jan 17, 2020 at 16:55

Eyni Kave

1,54020 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NiceToMytyuk Over a year ago

hi kaveh, could you write some clarification on code you posted?

Eyni Kave Over a year ago

The "import" command was confused for some developers, to make this simple we can run share host for needed modules for import and use full URL in import command. in above code the "three.ipozal.com" is the share host that is the copy of threejs node project on github. and there is some point like: use this html tag for threejs main script block <script type="module">

clockw0rk Over a year ago

hi, is there a solution where my whole code is NOT in my index.html? that's pretty messy

Eyni Kave Over a year ago

@clockw0rk maybe ur whole code not write in the index.html, but in compile time the whole code will be collect in ur index page....then u should have no problem. if have? then talk about ur errors.

Pete Hayman · Accepted Answer · 2022-02-12 02:03:57Z

1

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:

//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:

//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.

edited Feb 12, 2022 at 2:03

answered Feb 12, 2022 at 1:16

Pete Hayman

6,1152 gold badges44 silver badges49 bronze badges

2 Comments

temirtator Over a year ago

Your solutions, doesn't solve the actual problem

Pete Hayman Over a year ago

It solves the problem of getting the error mentioned in the OP when running Jest tests.

shi11i · Accepted Answer · 2020-04-01 22:32:31Z

0

What worked for me was including type="module" as @kaveh-eyni mentioned but then npm installing the "deprecated" modules directly into my project.

npm install --save three-orbitcontrols
npm i --save three-gltf-loader

and then

<script type="module">
import * as THREE from 'three/build/three.module'
import OrbitControls from 'three-orbitcontrols'
import GLTFLoader from 'three-gltf-loader

answered Apr 1, 2020 at 22:32

shi11i

1,54813 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Jest solution

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Jest solution

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related