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

Questions
21

Thanks but this doesn’t load pure STL files.

22

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.

23

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>
24

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