Three.js - Smooth shading results in weird edges - three.js

Question

I’m trying to get .stl files to appear smooth, but the edges result in these weird dark areas.
With flatShading set to true
With flatShading set to false
Is there any way to make the edges perfectly smooth without these weird artifacts?
var renderer = new THREE.WebGLRenderer({ alpha: true });
var camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 500);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function () {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}, false);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.2;
var scene = new THREE.Scene();
// Hemisphere light
var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 100, 0);
scene.add(hemiLight);
// Directional light
var dirLight = new THREE.DirectionalLight(0x323232);
dirLight.position.set(- 0, 40, 50);
dirLight.castShadow = true;
dirLight.shadow.camera.top = 50;
dirLight.shadow.camera.bottom = - 25;
dirLight.shadow.camera.left = - 25;
dirLight.shadow.camera.right = 25;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 200;
dirLight.shadow.mapSize.set(1024, 1024);
scene.add(dirLight);
var loader = new THREE.STLLoader();
loader.load( 'https://bymu.eu/test.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial({ specular: 0x111111, shininess: 200, color: 0xff5533, flatShading: false });
var tempGeometry = new THREE.Geometry().fromBufferGeometry(geometry);
tempGeometry.mergeVertices();
tempGeometry.computeVertexNormals();
tempGeometry.computeFaceNormals();
geometry.fromGeometry(tempGeometry);
var mesh = new THREE.Mesh(tempGeometry, material);
scene.add(mesh);
// Compute the middle
var middle = new THREE.Vector3();
geometry.computeBoundingBox();
geometry.boundingBox.getCenter(middle);
// Center it
mesh.position.x = -1 * middle.x;
mesh.position.y = -1 * middle.y;
mesh.position.z = -1 * middle.z;
// Pull the camera away as needed
var largestDimension = Math.max(geometry.boundingBox.max.x,
geometry.boundingBox.max.y, geometry.boundingBox.max.z)
camera.position.z = largestDimension * 1.5;
render();
});
function render() {
renderer.render( scene, camera );
}
var animate = function () {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}; animate();
body {
background: #b2b2b2;
margin:0;
padding:0;
overflow: hidden;
}
<script src="https://raw.githack.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/loaders/STLLoader.js"></script>

Answer 1

The problem isn't with Three.js, but with your geometry. Three.js uses "vertex normals" to know which direction the vertex is facing. This is used to smooth out faces. See the illustration below, your edge has a "smooth edge" (left diagram), where the direction of the faces is blended along that 90-degree angle. If you want a "sharp edge" (on the right), you'll have to tell your your geometry to create a second normal, each one pointing perpendicular to the face, so the angles don't blend.
.
Here's what your normals look like in Blender, in a before/after animation. Notice that a single normal down the middle gives the undesired smooth shading:
The way to achieve this varies from one editor to another, but I'm sure you can find the exact step-by-step instructions by looking up "mark sharp edge" for your editor of choice.

Answer 2

Solved it, found this great function https://codepen.io/Ni55aN/pen/zROmoe
THREE.Geometry.prototype.computeAngleVertexNormals = function(angle){
function weightedNormal( normals, vector ) {
var normal = new THREE.Vector3();
for ( var i = 0, l = normals.length; i < l; i ++ ) {
if ( normals[ i ].angleTo( vector ) < angle ) {
normal.add( normals[ i ] );
}
}
return normal.normalize();
}
this.computeFaceNormals();
var vertexNormals = [];
for ( var i = 0, l = this.vertices.length; i < l; i ++ ) {
vertexNormals[ i ] = [];
}
for ( var i = 0, fl = this.faces.length; i < fl; i ++ ) {
var face = this.faces[ i ];
vertexNormals[ face.a ].push( face.normal );
vertexNormals[ face.b ].push( face.normal );
vertexNormals[ face.c ].push( face.normal );
}
for ( var i = 0, fl = this.faces.length; i < fl; i ++ ) {
var face = this.faces[ i ];
face.vertexNormals[ 0 ] = weightedNormal( vertexNormals[ face.a ], face.normal );
face.vertexNormals[ 1 ] = weightedNormal( vertexNormals[ face.b ], face.normal );
face.vertexNormals[ 2 ] = weightedNormal( vertexNormals[ face.c ], face.normal );
}
if ( this.faces.length > 0 ) {
this.normalsNeedUpdate = true;
}
}
Results in exactly what I want after playing around with the angle, however increases loading time and has a bit of a performance penalty when a bunch of meshes are loaded, something I can live with as the meshes look amazing. I tried exporting the meshes so the browser wouldn’t have to recalculate every time, but some of them inflated 5-10 times due to this process. So it’s a sacrifice of loading time either way.