Почему я вижу эти линии по краям Mesh Three.js с MeshStandarMaterial, импортированным через GLTFLoader из Blender? - PullRequest
Новая
       27

Почему я вижу эти линии по краям Mesh Three.js с MeshStandarMaterial, импортированным через GLTFLoader из Blender?

0 голосов
/ 20 июня 2019

Я создаю виджет, который будет динамически генерировать здание в Three.js из меньших «модулей», основываясь на вводе пользователя.Мне были предоставлены сборочные «модули» - они были сделаны в Blender и экспортированы с включенным экспортером версии 2.8 GLTF.Я должен сказать, что я скорее новичок в Three.js и физическом рендеринге.

При Blender рендеринге соседние модули выглядят так, как будто это всего лишь одна сетка с бесшовной текстурой (вот как онибыли разработаны для моделиста):

Визуализация из Blender

Хотя в Three.js я вижу эти темные линии на каждом модуле (который сам по себе является Mesh или Group из Mesh es) границы и бесшовность теряется (пожалуйста, не обращайте внимания на освещение, я действительно не сосредотачиваюсь на этом моменте):

Three.js

Это настройки экспортера GLTF в Blender:

Настройка экспортера GLTF в Blender

Модели с текстурами импортируются в three через GLTFLoader без проблем.Для вывода MeshStandardMaterial каждого Mesh используются map, normalMap и roughnessmap.

Я пробовал:

  • другой формат текстуры (PNG / JPG) и размеры (2048 ², 1024 ², 512 ²) в каждой комбинации
  • различных источников света (из тех, что я перечислил в фрагменте кода ниже),
  • все фильтры увеличения и уменьшения для каждой из перечисленных текстур материала здесь - они, кажется, имеют некоторый эффект , но темные границы никогда не исчезают
  • включение / выключение normalMap и roughnessmap материала в каждой комбинации

Единственное, что работает, - это отключение всех типов 3 map и использование простого цвета, , что говорит о том, что проблема как-то связана с рендерингом текстур, а не с геометрией или расстоянием между ячейками. но также означает отказ от текстурирования модели в целом:

Обычная раскраска

Настройка сцены: 

this.scene = new Three.Scene();
this.camera = new Three.PerspectiveCamera(75, this._aspectRatio, 0.1, 50);
this.ambientLight = new Three.AmbientLight('white', 0.5);
this.directionalLight = new Three.DirectionalLight('white', 1.5);
this.directionalLight.position.set(-20, 20, 20);
this.directionalLight.target.position.set(0, 0, 0);

Версия Three.js 0.101.1(из NPM).

Я удивлен, что эти границы такотчетливо виденЯ ожидал увидеть какие-то слабые границы, но не так.

У вас есть идеи, что вызывает этот эффект?Может быть, мне нужно использовать какой-нибудь шейдер для материалов / текстур?

Любая помощь будет принята с благодарностью.

...