# Can someone please for the love of god send me a working code of STL file loading?

**URL:** <https://discourse.threejs.org/t/can-someone-please-for-the-love-of-god-send-me-a-working-code-of-stl-file-loading/18814>\
**Category:** Questions\
**Tags:** stl-loader\
**Created:** [September 17, 2020, 1:44pm UTC](https://discourse.threejs.org/t/can-someone-please-for-the-love-of-god-send-me-a-working-code-of-stl-file-loading/18814 "2020-09-17T13:44:17Z")\
**Posts on this page:** 4\
**Page:** 2

<div class="post-metadata">

**Author:** ![n13](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/n13/32/11173_2.png) [@n13](https://discourse.threejs.org/u/n13)\
**Post date:** [September 21, 2020, 7:27am UTC](https://discourse.threejs.org/t/can-someone-please-for-the-love-of-god-send-me-a-working-code-of-stl-file-loading/18814/21 "2020-09-21T07:27:22Z")

</div>

Thanks but this doesn’t load pure STL files.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [September 21, 2020, 7:51am UTC](https://discourse.threejs.org/t/can-someone-please-for-the-love-of-god-send-me-a-working-code-of-stl-file-loading/18814/22 "2020-09-21T07:51:33Z")

</div>

Here is another example of using the stll loader. It worked for me straight away without any issue. You can even view my source code using the **\<\>** at the bottom right of the example. It offers nothing new above the official example other than the model being different.

> **[STL Loader - Three.js Tutorials](https://sbcode.net/threejs/loaders-stl/)**

---

<div class="post-metadata">

**Author:** ![n13](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/n13/32/11173_2.png) [@n13](https://discourse.threejs.org/u/n13)\
**Post date:** [September 21, 2020, 9:08am UTC](https://discourse.threejs.org/t/can-someone-please-for-the-love-of-god-send-me-a-working-code-of-stl-file-loading/18814/23 "2020-09-21T09:08:02Z")

</div>

Thank you!  
I finally managed to get it working without using import, but with the tags.

This is the final code:

```
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - STL</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
   		<script src="https://cdn.jsdelivr.net/npm/three@0.110/examples/js/controls/OrbitControls.js"></script>
   		<script src="/STLLoader.js"></script>
   		<style>
        	body {
            	margin: 0;
            	overflow: hidden;
        	}
    	</style>
	</head>
	<body>
	
		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<script>
			// Necessary for camera/plane rotation
			var degree = Math.PI/180;

			// Setup
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			var renderer = new THREE.WebGLRenderer();

			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			// Resize after viewport-size-change
			window.addEventListener("resize", function () {
			    var height = window.innerHeight;
			    var width = window.innerWidth;
			    renderer.setSize(width, height);
			    camera.aspect = width / height;
			    camera.updateProjectionMatrix();
			});

			// Adding controls
			controls = new THREE.OrbitControls(camera, renderer.domElement);

			// Ground (comment out line: "scene.add( plane );" if Ground is not needed...)
			var plane = new THREE.Mesh(
			    new THREE.PlaneBufferGeometry(500, 500 ),
			    new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
			);
			plane.rotation.x = -90 * degree;
			plane.position.y = 0;
			scene.add( plane );
			plane.receiveShadow = true;

			var loader = new THREE.STLLoader();
			// Binary files - STL Import
			loader.load( './esp32.stl', function ( geometry ) {
			    var material = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, specular: 0x111111, shininess: 200 } );
			    var mesh = new THREE.Mesh( geometry, material );
			    mesh.position.set( 0, 20, 0);
			    scene.add( mesh );
			} );

			// Camera positioning
			camera.position.z = 100;
			camera.position.y = 100;
			camera.rotation.x = -45 * degree;

			// Ambient light (necessary for Phong/Lambert-materials, not for Basic)
			var ambientLight = new THREE.AmbientLight(0xffffff, 1);
			scene.add(ambientLight);

			// Draw scene
			var render = function () {
			    renderer.render(scene, camera);
			};

			// Run game loop (render,repeat)
			var GameLoop = function () {
			    requestAnimationFrame(GameLoop);

			    render();
			};

			GameLoop();
		</script>

	</body>
</html>
```

---

<div class="post-metadata">

**Author:** ![bathsheba](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bathsheba/32/18885_2.png) [@bathsheba](https://discourse.threejs.org/u/bathsheba)\
**Post date:** [June 11, 2021, 8:51pm UTC](https://discourse.threejs.org/t/can-someone-please-for-the-love-of-god-send-me-a-working-code-of-stl-file-loading/18814/24 "2021-06-11T20:51:00Z")

</div>

> [@Mugen87](#):
>
> `import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.120.1/examples/jsm/loaders/STLLoader.js';`

It would save a lot of questions if the example at three.js showed something like this.

[Previous page](https://discourse.threejs.org/t/can-someone-please-for-the-love-of-god-send-me-a-working-code-of-stl-file-loading/18814.md?page=1)
