javascript three.js gltf threejs-editor orbitcontrols

cannot use/import GLTFLoader and OrbitControls from threejs in my project

Hello so I am trying to build a simple threeJs project. I want to load a 3dModel with GLTFLoader but I cannot import it. Then I have tried to import OrbitControls and I got the same error. I need a little bit of help and can someone explain to me what I am doing wrong? Ass you will see, I have copied only the necessary files into my project folder. Is this a bad thing? Is this the reason for why it's not working?

I want to specify that I have copied those files from a folder that I have download it from three.js website. both files are from -three/examples/jsm/loaders/GLTFLoader.js -three/examples/jsm/controlers/OrbitControls.js

this is my ar.js file

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

const canvas = document.getElementById("webgl");
canvas.style.width = "600";

let scene, camera, renderer;
let obj;

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    0.01,
    60
  );

  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  //   /////////////// this is just a test to see if everything works/////////////////
  //   const geometry = new THREE.BoxBufferGeometry(0.3, 0.3, 0.3);
  //   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  //   const cube = new THREE.Mesh(geometry, material);
  //   cube.position.set(0, 0, -1);
  //   scene.add(cube);

  let loader = new GLTFLoader();
  loader.load(
    "../assets/3dmodel/firstPinBlue.gltf",
    function (gltf) {
      obj = gltf.scene;
      obj.scale.set(0.3, 0.3, 0.3);
      obj.position.set(0, 0, -4);
      scene.add(gltf.scene);
    },
    undefined,
    function (error) {
      console.log(error);
    }
  );

  const light = new THREE.AmbientLight();
  scene.add(light);

  window.addEventListener("resize", onWindowResize, false);
}

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

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  renderer.setAnimationLoop(render);
  controls.update();
}

function render() {
  renderer.render(scene, camera);
}

this is my html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Augumented Reality</title>
  </head>
  <body>
    <h1>AR</h1>
    <canvas id="webgl"></canvas>

    <script type="module" src="./three.js"></script>
  </body>
</html>

and this is a photo of my project structure PROJECT STRUCTURE

this is the error that I get ERROR IMG

Solution

Try loading Three from a CDN like this:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<script type="module">
  import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
  import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const cameraMin = 0.0001;

  const aspect = window.innerWidth / window.innerHeight;
  const camera = new THREE.PerspectiveCamera(75, aspect, cameraMin, 1000);
  const controls = new OrbitControls(camera, renderer.domElement);

  const scene = new THREE.Scene();

  camera.position.z = 5;

  const cube = new THREE.Mesh(
    new THREE.BoxBufferGeometry(),
    new THREE.MeshNormalMaterial()
  );

  scene.add(cube);

  (function animate() {
    requestAnimationFrame(animate);

    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    controls.update();

    renderer.render(scene, camera);
  })();
</script>