Experiencing glitch when loading STL model

Questions
,
1

Hello, I am importing a STL model into three.js. However, I am encountering glitching. I have adjusted near and far planes but it has no effect on it.

Screen Shot 2020-09-30 at 1.30.19 PM
Screen Shot 2020-09-30 at 1.30.19 PM800×420 357 KB

the STL file is uploaded here: spinner-top.stl (2.0 MB)
I could not use jsfiddle because it is a local file and I don’t know how to link to it!
Many thanks!

2

Did you try importing it to Blender or to any other 3D Viewer that supports STL and see if it looks similar?

3

Yes, the model is originally created in Blender, and It does not have glitch in Blender.

4

I just took the stl example from threejs and replaced it with your model and it looks quiet good.

Bildschirmfoto 2020-09-30 um 13.54.41
Bildschirmfoto 2020-09-30 um 13.54.411178×1111 94.7 KB

Code:

	<script type="module">

		import * as THREE from './node_modules/three/build/three.module.js';

		import { STLLoader } from './node_modules/three/examples/jsm/loaders/STLLoader.js';
		import { OrbitControls } from './node_modules/three/examples/jsm/controls/OrbitControls.js';

		var container;

		var camera, cameraTarget, scene, renderer, orbit;

		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( './spinner-top.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 );
				mesh.scale.set( 10, 10, 10 );

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

            orbit = new OrbitControls(camera, 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() {

			renderer.render( scene, camera );

		}

	</script>
2 Likes
5

@hesamoy Do you mind sharing your material and lighting configuration?

6

Sure…It is as below:

camera = new THREE.PerspectiveCamera(0.08, (window.innerWidth) / window.innerHeight, 1, 200);
camera.position.z = 30;
ambientLight = new THREE.AmbientLight(0xfff, 1);
scene.add(ambientLight);
light = new THREE.SpotLight(0xaaaaaa, 1, 0, Math.PI / 6);
light.position.set(0, 0.1, 0);
scene.add(light);
var material = new THREE.MeshPhysicalMaterial({
color: 0xd4af37, emissive: 0x222222, metalness: 1,wireframe: false, roughness: 0.5, envMap: textureCube, reflectivity:0.5, flatShading: true});
7

Do you see the same visual glitches if you just apply a default instance of MeshPhysicalMaterial? Meaning:

var material = new THREE.MeshPhysicalMaterial();
8

actually I don’t. the color becomes blue with no glitches!

9

Um, maybe this is related to your environment map. Can you try it with a different one (maybe from the repository)? E.g.: https://github.com/mrdoob/three.js/tree/dev/examples/textures/cube/pisaHDR

10

Sorry for the late reply! I tried with and without environment map (tried the one you suggested) and it does not affect glitching…I still experiencing it! actually when I disable flatShading, it becomes alright.