three.js - Three.js 复杂模型的着色看起来很奇怪

Question

我们在 Blender 中创建了一个模型，通过使用布尔差分运算符从“平面”基础中减去挤压的 SVG。或者换句话说，我们在里面雕刻了一张图片。该模型在 Blender 中渲染得很好，但是将其加载到我们简单的基于 three.js 的 Web 查看器中（使用 Blender 的 json 导出器），我们会在表面上得到一些非常奇怪的阴影，并且取决于比例，闪亮的顶点。

这是我的灯和相机：

    camera = window.camera = new THREE.PerspectiveCamera(45, $('main').width() / $('main').height(), 10, 10000);

    loader = new THREE.JSONLoader(true);

    var light = new THREE.DirectionalLight(0xffffff, 1.0);
    light.position.set(-30, 30, 100);
    light.target.position.set(0, 0, 0);
    light.shadowCameraNear = 200;

谁能发现我们是否做错了什么？那是特定于三个的问题，还是 WebGL、Blender 或我们的模型？

输出（截图） 小提琴

Answer 1

看着你的小提琴，似乎你的 vertexNormals 完全平滑，因此着色不正确。见这里： https ://github.com/mrdoob/three.js/issues/1258 这有帮助吗？

Answer 2

我不确定这在技术上是否算作一个解决方案，但是 - 通过删除 JSON 混合器导出并使用P3D直接加载 .stl 来解决该问题。