Трехмерная затенение сложной модели выглядит странно

Question

У нас есть модель, созданная в Blender, путем вычитания экструдированного SVG с «плоской» базы с использованием булева разностного оператора. Или, другими словами, мы вырезали картину. Модель проявляется просто в Blender, но загружая ее в наш простой веб-просмотрчик на основе three.js (используя json exporter для Blender), мы получаем некоторые действительно странные тени на поверхности и в зависимости от масштаба, блестящих вершин.

Вот мой свет и камера:

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 и вместо этого загрузив .stl, вместо P3D.

Answer 2

Глядя на вашей скрипке, кажется, что ваши vertexNormals полностью сглажены и, таким образом, затенение неверно. См. Здесь: https://github.com/mrdoob/three.js/issues/1258 Помогло ли это?