THREE.OrbitControls is not a constructor

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

        import { OrbitControls } from './jsm/controls/OrbitControls.js';
        import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
        import { RGBELoader } from './jsm/loaders/RGBELoader.js';
        import { RoughnessMipmapper } from './jsm/utils/RoughnessMipmapper.js';

        let scene, camera, renderer;
        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xdddddd);
            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
            camera.rotation.y = 45 / 180 * Math.PI;
            camera.position.x = 800;
            camera.position.y = 100;
            camera.position.z = 1000;
            controls = new THREE.OrbitControls(camera);
            controls.addEventListener('change', renderer);
            hlight = new THREE.AmbientLight(0x404040, 100);
            scene.add(hlight);
            directionalLight = new THREE.DirectionalLight(0xffffff, 100);
            directionalLight.position.set(0, 1, 0);
            directionalLight.castShadow = true;
            scene.add(directionalLight);
            light = new THREE.PointLight(0xc4c4c4, 10);
            light.position.set(0, 300, 500);
            scene.add(light);
            light2 = new THREE.PointLight(0xc4c4c4, 10);
            light2.position.set(500, 100, 0);
            scene.add(light2);
            light3 = new THREE.PointLight(0xc4c4c4, 10);
            light3.position.set(0, 100, -500);
            scene.add(light3);
            light4 = new THREE.PointLight(0xc4c4c4, 10);
            light4.position.set(-500, 300, 500);
            scene.add(light4);
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
           //let loader = new THREE.GLTFLoader();
            GLTFLoader.load('scene.gltf', function (gltf) {
                car = gltf.scene.children[0];
                car.scale.set(0.5, 0.5, 0.5);
                scene.add(gltf.scene);
                animate();
            });
        }
        function animate() {
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        init();

    </script>
2

When importing OrbitControls via ES6 modules, you don’t need the THREE namespace.

3

Thank you so much sir, but when I correct the mistake, I get now this message “THREE is not defined” line 24 when I create the Scene.
Sir could you advise me to load a gltf object and how can I make it interactive for example I have a skeleton so the user can select the crane or the arm etc…
Thank you so much for your assistance I sincerely appreciate you help

4

Sorry, I can’t help you with providing a complete solution for your issue.

I suggest you replace your import section with this:

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.124/build/three.module.js'; 

import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.124/examples/jsm/controls/OrbitControls.js'; 
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.124/examples/jsm/loaders/GLTFLoader.js'; 
import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/three@0.124/examples/jsm/loaders/RGBELoader.js'; 
import { RoughnessMipmapper } from 'https://cdn.jsdelivr.net/npm/three@0.124/examples/jsm/utils/RoughnessMipmapper.js';
5

You didn’t need to use THREE nowdays you just need to put new OrbitControls( camera, renderer.domElement ); and put the control function below this

line. If that still not working you need to add script tag on your html and delete your import function maybe that is a CORS issue wich is you can learn more in here : Cross - Origin Resource Sharing -Wikipedia, Or you can run your file using local web server.