複雜模型的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，或我們的模型？

Output (screenshot) Fiddle

Answer 1

我不確定這是否在技術上算作解決方案，但 - 通過刪除JSON攪拌機導出來解決問題，並使用P3D代替直接加載.stl。

Answer 2

看你的小提琴，看來你vertexNormals是完全平滑，從而陰影不正確。 請參閱： https://github.com/mrdoob/three.js/issues/1258 這是否對您有幫助？