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

【问题标题】：Three.js shading of complex model looks strangeThree.js 复杂模型的着色看起来很奇怪
【发布时间】：2013-07-27 17:01:13
【问题描述】：

我们在 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 或我们的模型？

Output (screenshot) Fiddle

【问题讨论】：

标签： three.js webgl shadow

【解决方案1】：

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

【讨论】：

使用 FlatShading 修复了小提琴上的阴影，不幸的是它不适用于我们的实际生产模型：-/ 我可以防止 vertexNormals 造成这种情况吗？是我的 Blender 模型的问题，还是 json 导出的问题？

【解决方案2】：

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

【讨论】：