Three.js - 平滑的阴影导致奇怪的边缘

Question

我试图让 .STL 文件看起来平滑，但边缘会导致这些奇怪的暗区。

将 flatShading 设置为 true

将 flatShading 设置为 false

没有这些奇怪的人工制品，有没有办法让边缘完美平滑？

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

问题不在于 Three.js，而在于你的几何体。 Three.js 使用“顶点法线”来知道顶点面向哪个方向。这用于平滑面部。请参见下图，您的边缘具有“平滑边缘”(左图)，其中面的方向沿着该 90 度角混合。如果你想要一个“锐边”(在右边)，你必须告诉你的几何体创建第二条法线，每条法线都垂直于面，所以角度不会混合。

.

这是你的法线在 Blender 中的样子，在动画之前/之后。请注意，中间的单个法线会产生不需要的平滑阴影:

实现此目的的方法因编辑器而异，但我相信您可以通过查找您选择的编辑器的“标记锐边”来找到确切的分步说明。