# Problems with loading STL file

**URL:** <https://discourse.threejs.org/t/problems-with-loading-stl-file/43705>\
**Category:** Questions\
**Tags:** stl-loader\
**Created:** [October 17, 2022, 7:31am UTC](https://discourse.threejs.org/t/problems-with-loading-stl-file/43705 "2022-10-17T07:31:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kedar\_Patil](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kedar_patil/32/30356_2.png) [@Kedar\_Patil](https://discourse.threejs.org/u/Kedar_Patil)\
**Post date:** [October 17, 2022, 7:31am UTC](https://discourse.threejs.org/t/problems-with-loading-stl-file/43705/1 "2022-10-17T07:31:45Z")

</div>

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.

```javascript
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/9/499aabfbd2c2c205d8009bd0a2637476dffc69af.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 17, 2022, 1:12pm UTC](https://discourse.threejs.org/t/problems-with-loading-stl-file/43705/2 "2022-10-17T13:12:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kedar\_Patil](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kedar_patil/32/30356_2.png) [@Kedar\_Patil](https://discourse.threejs.org/u/Kedar_Patil)\
**Post date:** [October 17, 2022, 1:27pm UTC](https://discourse.threejs.org/t/problems-with-loading-stl-file/43705/4 "2022-10-17T13:27:17Z")

</div>

![structure](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/9/b9d7e898ea257eeeea79181d93e7817698a1183d.png)  
this is how it is structured now