Problems with loading STL file

Questions
1

I’m trying to load the stl file from my local machine but it is showing me error of page not found , can someone help me in this ,thank you in advance.

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";

let scene,
  camera,
  renderer,
  cube,
  grid,
  ambientLight,
  light,
  dark,
  board,
  loader;
function plane() {
  //scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color("grey");
  //camera
  camera = new THREE.PerspectiveCamera(
    20,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 10;
  camera.position.y = 30;
  camera.position.x = 35;
  //renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  //controls
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", render);
  controls.target.set(2, 2);

  //light
  ambientLight = new THREE.AmbientLight(0xffffff);
  ambientLight.intensity = 0.9;
  scene.add(ambientLight);

  cube = new THREE.BoxGeometry(1, 0.5, 1);
  light = new THREE.MeshBasicMaterial({ color: "white" });
  dark = new THREE.MeshBasicMaterial({ color: "black" });

  board = new THREE.Group();

  for (let x = 0; x < 8; x++) {
    for (let z = 0; z < 8; z++) {
      if (z % 2 == false) {
        var cubiod;
        cubiod = new THREE.Mesh(cube, x % 2 == false ? light : dark);
      } else {
        cubiod = new THREE.Mesh(cube, x % 2 == false ? dark : light);
      }
      cubiod.position.set(x, 5, z);
      board.add(cubiod);
    }
  }
  scene.add(board);

  loader = new STLLoader();
  loader.load("Knight.stl", function (geo) {
    const material = new THREE.MeshPhongMaterial({
      color: 0xff5533,
      specular: 0x111111,
      shininess: 200,
    });
    const mesh = new THREE.Mesh(geo, material);

    mesh.position.set(0, -0.25, 0.6);
    mesh.rotation.set(0, -Math.PI / 2, 0);
    mesh.scale.set(0.5, 0.5, 0.5);

    mesh.castShadow = true;
    mesh.receiveShadow = true;

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

ERROR
ERROR1920×1080 152 KB

2

It seems the file Knight.stl is not in the same directory than your index.html. How is your project directory structured?

4

structure
structure1920×1080 237 KB

this is how it is structured now