I have spent 8 hours trying to render an STL.
I cannot although i am following verbatim the tutorials.
The code on the internet does not work. The STLLoader code does not work.
Nothing works and nothing renders.
I get so many different errors i lost track of them.
Here is the original question if someone wants to see one or two code snippets out of the perhaps dozen i tried.
Just errors, errors errors, for something that seems straightforward
And that explains nothing.
Better to provide your code, thus the other users will know what and how in your code works.
Sorry i wrote this is the link, but i forgot to post the link.
I have an answer now in the question btw
There is an official example that shows how to use STLLoader:
I know, but how do i see the code for this? Via inspect code?
Better to use the page with examples https://threejs.org/examples/#webgl_loader_stl
So, you can see the button in the bottom-right corner, clicking on it will show you the source code of an example on Github.
I have already used that code and it failed. As the answer in my S.O question, perhaps using incompatible libs and having improper file structure. I will report here again.
Instead of this:
<script src="../libs/three.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script src="../libs/STLLoader.js"></script >
try to use this:
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
Better to use a CDN link since the files at https://threejs.org/examples/js/ will be deleted at the end of the year. Moreover, the OP will automatically get the latest versions until then which probably breaks his code.
Besides, I suggest you use ES6 modules instead of global scripts. You can use the same code like from the official example, just replace the import section with:
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.120.1/build/three.module.js';
import Stats from 'https://cdn.jsdelivr.net/npm/three@0.120.1/examples/jsm/libs/stats.module.min.js';
import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.120.1/examples/jsm/loaders/STLLoader.js';
I would recommend to use R115 then, as it doesn’t have those warnings about scripts in js folder, that can confuse people somehow 
I tried the code again. I used correct file structure this time and i used the jsm js files. (I just removed the stat part).
This is the code right now:
<!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">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
STL loader test by <a href="https://github.com/aleeper" target="_blank" rel="noopener">aleeper</a>.<br/>
PR2 head from <a href="http://www.ros.org/wiki/pr2_description">www.ros.org</a>
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import { STLLoader } from './jsm/loaders/STLLoader.js';
var container;
var camera, cameraTarget, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
camera.position.set( 3, 0.15, 3 );
cameraTarget = new THREE.Vector3( 0, - 0.25, 0 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x72645b );
scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
// Ground
var plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 40, 40 ),
new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
);
plane.rotation.x = - Math.PI / 2;
plane.position.y = - 0.5;
scene.add( plane );
plane.receiveShadow = true;
// ASCII file
var loader = new STLLoader();
loader.load( 'esp32.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, 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 );
} );
// Binary files
var material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
loader.load( 'esp32.stl', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, - 0.37, - 0.6 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 2, 2, 2 );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
loader.load( 'esp32.stl', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0.136, - 0.37, - 0.6 );
mesh.rotation.set( - Math.PI / 2, 0.3, 0 );
mesh.scale.set( 2, 2, 2 );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
// Colored binary STL
loader.load( 'esp32.stl', function ( geometry ) {
var meshMaterial = material;
if ( geometry.hasColors ) {
meshMaterial = new THREE.MeshPhongMaterial( { opacity: geometry.alpha, vertexColors: true } );
}
var mesh = new THREE.Mesh( geometry, meshMaterial );
mesh.position.set( 0.5, 0.2, 0 );
mesh.rotation.set( - Math.PI / 2, Math.PI / 2, 0 );
mesh.scale.set( 0.3, 0.3, 0.3 );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
// Lights
scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function addShadowedLight( x, y, z, color, intensity ) {
var directionalLight = new THREE.DirectionalLight( color, intensity );
directionalLight.position.set( x, y, z );
scene.add( directionalLight );
directionalLight.castShadow = true;
var d = 1;
directionalLight.shadow.camera.left = - d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = - d;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 4;
directionalLight.shadow.bias = - 0.002;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var timer = Date.now() * 0.0005;
camera.position.x = Math.cos( timer ) * 3;
camera.position.z = Math.sin( timer ) * 3;
camera.lookAt( cameraTarget );
renderer.render( scene, camera );
}
</script>
</body>
</html>
This is the error i get:
main.css: Failed to load resource: the server responded with a status of 404 (Not Found)
STLLoader.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
I am thinking i have declared the STL directory erroneously.
The HTML file is in the same dir with the build and examples folder, and the STL file is in the exact same directorhy as the HTML file.
I used this for an STL file in the same directory as the HTML file.
Is this directory correct?
Sorry but i still cannot get this to work.
I keep getting this error:
STLLoader: Failed to load resource: the server responded with a status of 404 (Not Found)
Is this something to do with the paths to the STL files?
EDIT: This is what shows up on the http-server console:
"GET /jsm/loaders/STLLoader.js" Error (404): "Not found"
What happens if you try to access the stl file by typing the path in the browser’s url bar? And what server are you using?
I am using node’s http-server module. I couldn’t access the file. Turns out the path was wrong. I fixed the paths but not i receive this:
STLLoader: Uncaught SyntaxError: Unexpected token '<'
Visit your webpage in your browser. Open developer tools, open the network tab, refresh, and show what is in the the response tab for the stl model you are trying to download. I am presuming your stl model is named esp32.stl
In my image below, I am showing the stl data for one of the official examples called slotted_disk.stl. I want to see what yours looks like from the perspective of the browser just like I do in my image.
There is no model being served! The only things are webStl.html, three.module.js, and STLLoader.js.
I have a sneaky suspicion that your browser is trying to download a file called esp32.stl and the http-server is returning this
See the < character right at the beginning followed by the !DOCTYPE html>
I am making my assumption based on the sample code you provided earlier in the thread and the STLLoader usage instructions that I can find here.
Another working STL loader is part of http://pi-q-robot.bitplan.com/ it reads robot definitions from files like https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/spiderq.json where stl files can be parts of robots.https://github.com/BITPlan/PI-Q-Robot/tree/master/web/js has the source code. https://github.com/BITPlan/PI-Q-Robot/blob/fbd908777dc4212c56cf84c7c1b8be32d17cb291/web/js/robot.js#L298 is the line in which the loading is done.
So is there a way to mitigate the problem?
