STL model is not rendered correctly

I have managed to render STL files, using STLLoader.

However, the result does not look like i would like to.

Here are some pictures of the rendered model:

However, look how the model looks like when i open it with Blender:

As you can see, it seems that some Geometry details is lost…
Is this normal?
Does it have to do anything with the lighting?
Can i change the drawing style to make it render correctly?

Do you mind sharing the STL file in this topic?

Of course! However, i tried to upload and it didn’t let me because file size is too big. The STL file is 7 mb. Where should i upload it to?

The reason might be the high intensity of lights used in the scene. @n13

Can you share a google drive link? You could also upload it to a GitHub repo.

Here you go!

I tried to change the lighting, using the code from the basic STLLoader example here:

More specifically, i changed this:
var ambientLight = new THREE.AmbientLight(0xffffff, 1);

to this:
scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );

But all i get is a black screen now.

When importing the STL file in the three.js editor and adding an ambient and directional light it looks like so:

So there is an issue in your app. Consider to share the entire code as a live example or GitHub repository.

Thank you very much Mugen!
When you say live example, you mean jsFiddle? If yes, i don’t know how to load the model there.
If you mean something else, please do inform me.

In addition to that, you meant to share my ‘not-good’ code there, or the end result where everything should work fine?

Finally, could i please ask you to share the lines of code considering the lighting?
Because i also don’t know the coordinates of the light sources.

Thank you very much once again!

If it is too complicated for you to setup a live example (jsfiddle, codepen, codesandbox etc.) then please share your code as a GitHub repository. And yes, I mean your work-in-progress code.

The lighting should be:

scene.add( new THREE.AmbientLight( 0xffffff, 1 ) );

const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.position.set( 5, 10, 7.5 );
scene.add( dirLight );

Hmm something is not right again. So i guess i will have to upload. I have experience with jsFiddle, but can i load my model to it?

But anyway, nothing has really changed.
This is my code at the moment - using your changes:

<!DOCTYPE html>
<html lang="en">
		<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=""></script>
   		<script src=""></script>
   		<script src="/STLLoader.js"></script>
        	body {
            	margin: 0;
            	overflow: hidden;
		<!-- Div which will hold the Output -->
		<div id="WebGL-output">

			// 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);

			// 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;

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

			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;

			// Lighting
			scene.add( new THREE.AmbientLight( 0xffffff, 1 ) );
			const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
			dirLight.position.set( 5, 10, 7.5 );
			scene.add( dirLight );

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

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




EDIT: This is the web location of the STLLoader i used:

This is what gets rendered:

Try to reduce intencity of ambient light. For example, set it to 0.5 or 0.1.

1 Like

Try it with:

var material = new THREE.MeshPhongMaterial();

Keep in mind that MeshLambertMaterial does not have a shininess property. This usually belongs to phong materials. A value of 200 is also way too high.

Using the advice of both Mugen87 and prisoner849, i have managed to make this file render correctly. Thank you very much guys!