Как подключить файл js к проекту

Пытаюсь подключить orbit control но почему то не выходит

function init() {

    // прослушивание событий изменения размера
    window.addEventListener('resize', onResize, false);

    var camera;
    var scene;
    var renderer;
    var trackballControls;
    var clock;
    var control;

    // инициализировать статистику
    var stats = initStats();

    // создаëм сцену, которая будет содержать все наши элементы, такие как объекты, камеры и источники света.
    scene = new THREE.Scene();

    // создайте камеру, которая определяет, куда мы смотрим.
    // camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera = initCamera(new THREE.Vector3(50, 120, 220));
    // camera.position.set(20, 0, 150);

    // создайте рендеринг и установите размер
    renderer = new THREE.WebGLRenderer();
    
      renderer.antialias = true; // чтоб муравьи не бегали
      renderer.setClearColor(new THREE.Color(0x497580)); // поставмл пока серо-синий фон
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMap.enabled = true;

    // инициализируйте элементы управления трекболом и часы, которые необходимы
    trackballControls = initTrackballControls(camera, renderer);
    clock = new THREE.Clock();
    
    control = new OrbitControls( camera, renderer.domElement );
                control.listenToKeyEvents( window ); // optional

                //control.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

                control.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
                control.dampingFactor = 0.05;

                control.screenSpacePanning = false;

                control.minDistance = 100;
                control.maxDistance = 500;

                control.maxPolarAngle = Math.PI / 2;
     
     // рисую квадраты осей 
    
    //--------------Создаем объект-------------------
    var osxyGeometry = new THREE.Geometry();//Производная фигура
    osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));//Указываем вектор первой точки
    osxyGeometry.vertices.push(new THREE.Vector3(10, 10, 0));//Указываем вектор второй точки
    osxyGeometry.vertices.push(new THREE.Vector3(10, -10, 0));
    osxyGeometry.vertices.push(new THREE.Vector3(-10, -10, 0));
    osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));
    var osxyMaterial = new THREE.LineBasicMaterial({color:0x7457bd, linewidth:1});
    var osxy = new THREE.Line(osxyGeometry, osxyMaterial);//Создаем линию из созданной геометрии
    
    //--------------Добавление вывод-----------------
    scene.add(osxy);//Добавляем объект на сцену
    
    //--------------Создаем объект-------------------
    var osyzGeometry = new THREE.Geometry();//Производная фигура
    osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));//Указываем вектор первой точки
    osyzGeometry.vertices.push(new THREE.Vector3(0, 10, 10));//Указываем вектор второй точки
    osyzGeometry.vertices.push(new THREE.Vector3(0, 10, -10));
    osyzGeometry.vertices.push(new THREE.Vector3(0, -10, -10));
    osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));
    var osyzMaterial = new THREE.LineBasicMaterial({color:0x3d803d, linewidth:1});
    var osyz = new THREE.Line(osyzGeometry, osyzMaterial);//Создаем линию из созданной геометрии
    
    //--------------Добавление вывод-----------------
    scene.add(osyz);//Добавляем объект на сцену
    
    //--------------Создаем объект-------------------
    var osxzGeometry = new THREE.Geometry();//Производная фигура
    osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));//Указываем вектор первой точки
    osxzGeometry.vertices.push(new THREE.Vector3(10, 0, 10));//Указываем вектор второй точки
    osxzGeometry.vertices.push(new THREE.Vector3(10, 0, -10));
    osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, -10));
    osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));
    var osxzMaterial = new THREE.LineBasicMaterial({color:0xab5641, linewidth:1});
    var osxz = new THREE.Line(osxzGeometry, osxzMaterial);//Создаем линию из созданной геометрии
    
    //--------------Добавление вывод-----------------
    scene.add(osxz);//Добавляем объект на сцену
    
    
    // создайте наземную плоскость
    //var planeGeometry = new THREE.PlaneGeometry(60, 60, 1, 1);
    //var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
    //var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    //plane.receiveShadow = true;

      // поверните и расположите плоскость
      //plane.rotation.x = -0.5 * Math.PI;
      //plane.position.x = 15;
      //plane.position.y = 0;
      //plane.position.z = 0;

      // add the plane to the scene
      //scene.add(plane);
    
    // добавляем оси  и коордиеационные сетки
    var axes = new THREE.AxisHelper(30);

      axes.position.set( 0,0,0 ); scene.add(axes);

  
    var gridXZ = new THREE.GridHelper(100, 20);

      gridXZ.setColors( new THREE.Color(0x006600), 

    new THREE.Color(0x006600) );

      gridXZ.position.set( 100,0,100 );

      scene.add(gridXZ);

    
    var gridXY = new THREE.GridHelper(100, 20);

        gridXY.position.set( 100,100,0 );

        gridXY.rotation.x = Math.PI/2;

        gridXY.setColors( new THREE.Color(0x000066), 

     new THREE.Color(0x000066) );

        scene.add(gridXY);

        
     var gridYZ = new THREE.GridHelper(100, 20);

        gridYZ.position.set( 0,100,100 );

        gridYZ.rotation.z = Math.PI/2;

        gridYZ.setColors( new THREE.Color(0x660000), 

     new THREE.Color(0x660000) );

        scene.add(gridYZ);

    // расположите и направьте камеру в центр сцены
    //camera.position.x = -30;
   // camera.position.y = 40;
  //  camera.position.z = 30;
  //  camera.lookAt(scene.position);
    camera.position.set(20, 0, 150);
   
    // добавьте тонкое окружающее освещение
    var ambienLight = new THREE.AmbientLight(0x353535);
    scene.add(ambienLight);

    // добавьте подсветку для теней
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 20, -5);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // добавьте выходные данные средства визуализации в html-элемент
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // вызовите функцию рендеринга
    var step = 0;

   var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    };
    
    var controls1 = new function () {
       this.site = "hangge.com";
     };
     
   var controls2 = new function () {
       this.rotationSpeed = 0; 
     };

    var gui = new dat.GUI();
    const geometryFolder  = gui.addFolder("камера");
   geometryFolder.add(controls2, "rotationSpeed", { 'стоп': 0, 'медленно': 0.02, 'быстро': 5 }).name("скорость");
    geometryFolder.add(controls, 'rotationSpeed', 0, 0.5);
    geometryFolder.add(controls, 'bouncingSpeed', 0, 0.5);
    const primitiveFolder =  gui.addFolder("примитивы");
   // primitiveFolder.add(controls2, 'rotationSpeed', { Stopped: 0, Slow: 0.02, Fast: 5 });
   
   animate();
  //  render();
    
    function animate() {

                requestAnimationFrame( animate );

                control.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

                render();

            }
    
    function render() {
        stats.update();
  var delta = clock.getDelta();
    trackballControls.update(delta);
    requestAnimationFrame(render);
    renderer.render(scene, camera);
        // обновите статистику и элементы управления
      //  trackballControls.update(clock.getDelta());
       // stats.update();
        // рендеринг с использованием requestAnimationFrame
       // requestAnimationFrame(render);
        //renderer.render(scene, camera);
    }

    function onResize() {
        //camera.aspect = window.innerWidth / window.innerHeight;
        //  camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }    
}

Делал по примеру https://threejs.org/examples/?q=orbit#misc_controls_orbit

<!DOCTYPE html>

<html>

<head>
    <title>мое_изделие</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/OrbitControls.js"></script>
    <script type="text/javascript" src="../../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../../libs/util/dat.gui.js"></script>

    <script type="text/javascript" src="../js/util.js"></script>
    <script type="text/javascript" src="./js/my.js"></script>
    <link rel="stylesheet" href="../../css/default.css">
</head>

<body>

    <div id="webgl-output"></div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>

</body>

</html>

Почему-то браузер не видит, не знаю почему.

              <script type="text/javascript" charset="UTF-8" 
     src="../../libs/three/controls/OrbitControls.js"> 
       </script>

Хотя сам файл присутствует

Сделал по примеру @SaNFeeD

Увы не заработало.

<!DOCTYPE html>

<html>

<head>
    <title>мое_изделие</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/OrbitControls.js"></script>
    <script type="text/javascript" src="../../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../../libs/util/dat.gui.js"></script>

    <script type="text/javascript" src="../js/util.js"></script>
     <script type="module" src="./js/my.js"></script>
    <!--  <script type="text/javascript" src="./js/my.js"></script> ранше так было -->
    <link rel="stylesheet" href="../../css/default.css">
</head>

<body>

    <div id="webgl-output"></div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>

</body>

</html>

My.js

//import * as THREE from 'three';
//#include "OrbitControls.js"
//import { create, all } from 'orbitcontrolsjs'
import { OrbitControls } from '../../libs/three/controls/OrbitControls.js';

function init() {

    // прослушивание событий изменения размера
    window.addEventListener('resize', onResize, false);

    var camera;
    var scene;
    var renderer;
    var trackballControls;
    var clock;
    var control;

    // инициализировать статистику
    var stats = initStats();

    // создаëм сцену, которая будет содержать все наши элементы, такие как объекты, камеры и источники света.
    scene = new THREE.Scene();

    // создайте камеру, которая определяет, куда мы смотрим.
    // camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera = initCamera(new THREE.Vector3(50, 120, 220));
    // camera.position.set(20, 0, 150);

    // создайте рендеринг и установите размер
    renderer = new THREE.WebGLRenderer();
    
      renderer.antialias = true; // чтоб муравьи не бегали
      renderer.setClearColor(new THREE.Color(0x497580)); // поставмл пока серо-синий фон
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMap.enabled = true;

    // инициализируйте элементы управления трекболом и часы, которые необходимы
    trackballControls = initTrackballControls(camera, renderer);
    clock = new THREE.Clock();
    
    control = new OrbitControls( camera, renderer.domElement );
                control.listenToKeyEvents( window ); // optional

                //control.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

                control.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
                control.dampingFactor = 0.05;

                control.screenSpacePanning = false;

                control.minDistance = 100;
                control.maxDistance = 500;

                control.maxPolarAngle = Math.PI / 2;
     
     // рисую квадраты осей 
    
    //--------------Создаем объект-------------------
    var osxyGeometry = new THREE.Geometry();//Производная фигура
    osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));//Указываем вектор первой точки
    osxyGeometry.vertices.push(new THREE.Vector3(10, 10, 0));//Указываем вектор второй точки
    osxyGeometry.vertices.push(new THREE.Vector3(10, -10, 0));
    osxyGeometry.vertices.push(new THREE.Vector3(-10, -10, 0));
    osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));
    var osxyMaterial = new THREE.LineBasicMaterial({color:0x7457bd, linewidth:1});
    var osxy = new THREE.Line(osxyGeometry, osxyMaterial);//Создаем линию из созданной геометрии
    
    //--------------Добавление вывод-----------------
    scene.add(osxy);//Добавляем объект на сцену
    
    //--------------Создаем объект-------------------
    var osyzGeometry = new THREE.Geometry();//Производная фигура
    osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));//Указываем вектор первой точки
    osyzGeometry.vertices.push(new THREE.Vector3(0, 10, 10));//Указываем вектор второй точки
    osyzGeometry.vertices.push(new THREE.Vector3(0, 10, -10));
    osyzGeometry.vertices.push(new THREE.Vector3(0, -10, -10));
    osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));
    var osyzMaterial = new THREE.LineBasicMaterial({color:0x3d803d, linewidth:1});
    var osyz = new THREE.Line(osyzGeometry, osyzMaterial);//Создаем линию из созданной геометрии
    
    //--------------Добавление вывод-----------------
    scene.add(osyz);//Добавляем объект на сцену
    
    //--------------Создаем объект-------------------
    var osxzGeometry = new THREE.Geometry();//Производная фигура
    osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));//Указываем вектор первой точки
    osxzGeometry.vertices.push(new THREE.Vector3(10, 0, 10));//Указываем вектор второй точки
    osxzGeometry.vertices.push(new THREE.Vector3(10, 0, -10));
    osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, -10));
    osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));
    var osxzMaterial = new THREE.LineBasicMaterial({color:0xab5641, linewidth:1});
    var osxz = new THREE.Line(osxzGeometry, osxzMaterial);//Создаем линию из созданной геометрии
    
    //--------------Добавление вывод-----------------
    scene.add(osxz);//Добавляем объект на сцену
    
    
    // создайте наземную плоскость
    //var planeGeometry = new THREE.PlaneGeometry(60, 60, 1, 1);
    //var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
    //var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    //plane.receiveShadow = true;

      // поверните и расположите плоскость
      //plane.rotation.x = -0.5 * Math.PI;
      //plane.position.x = 15;
      //plane.position.y = 0;
      //plane.position.z = 0;

      // add the plane to the scene
      //scene.add(plane);
    
    // добавляем оси  и коордиеационные сетки
    var axes = new THREE.AxisHelper(30);

      axes.position.set( 0,0,0 ); scene.add(axes);

  
    var gridXZ = new THREE.GridHelper(100, 20);

      gridXZ.setColors( new THREE.Color(0x006600), 

    new THREE.Color(0x006600) );

      gridXZ.position.set( 100,0,100 );

      scene.add(gridXZ);

    
    var gridXY = new THREE.GridHelper(100, 20);

        gridXY.position.set( 100,100,0 );

        gridXY.rotation.x = Math.PI/2;

        gridXY.setColors( new THREE.Color(0x000066), 

     new THREE.Color(0x000066) );

        scene.add(gridXY);

        
     var gridYZ = new THREE.GridHelper(100, 20);

        gridYZ.position.set( 0,100,100 );

        gridYZ.rotation.z = Math.PI/2;

        gridYZ.setColors( new THREE.Color(0x660000), 

     new THREE.Color(0x660000) );

        scene.add(gridYZ);

    // расположите и направьте камеру в центр сцены
    //camera.position.x = -30;
   // camera.position.y = 40;
  //  camera.position.z = 30;
  //  camera.lookAt(scene.position);
    camera.position.set(20, 0, 150);
   
    // добавьте тонкое окружающее освещение
    var ambienLight = new THREE.AmbientLight(0x353535);
    scene.add(ambienLight);

    // добавьте подсветку для теней
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 20, -5);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // добавьте выходные данные средства визуализации в html-элемент
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // вызовите функцию рендеринга
    var step = 0;

   var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    };
    
    var controls1 = new function () {
       this.site = "hangge.com";
     };
     
   var controls2 = new function () {
       this.rotationSpeed = 0; 
     };

    var gui = new dat.GUI();
    const geometryFolder  = gui.addFolder("камера");
   geometryFolder.add(controls2, "rotationSpeed", { 'стоп': 0, 'медленно': 0.02, 'быстро': 5 }).name("скорость");
    geometryFolder.add(controls, 'rotationSpeed', 0, 0.5);
    geometryFolder.add(controls, 'bouncingSpeed', 0, 0.5);
    const primitiveFolder =  gui.addFolder("примитивы");
   // primitiveFolder.add(controls2, 'rotationSpeed', { Stopped: 0, Slow: 0.02, Fast: 5 });
   
   animate();
  //  render();
    
    function animate() {

                requestAnimationFrame( animate );

                control.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

                render();

            }
    
    function render() {
        stats.update();
  var delta = clock.getDelta();
    trackballControls.update(delta);
    requestAnimationFrame(render);
    renderer.render(scene, camera);
        // обновите статистику и элементы управления
      //  trackballControls.update(clock.getDelta());
       // stats.update();
        // рендеринг с использованием requestAnimationFrame
       // requestAnimationFrame(render);
        //renderer.render(scene, camera);
    }

    function onResize() {
        //camera.aspect = window.innerWidth / window.innerHeight;
        //  camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }    
}