После того, как вы попробуете каждый тип материала, который предлагает ThreeJS, вы почувствуете себя свидетелем эволюции графического качества видеоигр. Это напоминает мне об огромной разнице в рендеринге Лары Крофт за более чем 20-летний период:
В ThreeJs есть несколько материалов на выбор, когда вы решаете, как отображать свои модели. Он имеет MeshDepthMaterial, который отображает каждый пиксель вашей сетки в оттенках серого; чем ближе, тем белее, тем дальше темнее. Он имеет MeshNormalMaterial, который отображает каждый пиксель в зависимости от направления нормали в этой точке. Но сегодня я собираюсь сравнить самые распространенные.
СеткаОсновнойМатериал
Это самый основной материал из всех. Сетки, на которых применяется этот материал, обычно имеют только один цвет. Освещение совершенно не влияет на этот материал. Когда вы смотрите на объект, использующий MeshBasicMaterial под разными углами, в какой-то момент вы просто не можете понять, на что смотрите!
Этот материал - хороший выбор, если вы хотите визуализировать свою модель в простом каркасе.
new THREE.MeshBasicMaterial({color: '#F00', wireframe: true})
СеткаЛамбертМатериал
Это более продвинутый материал по сравнению с MeshBasicMaterial. Как следует из названия, в этом материале используется ламбертовское отражение для имитации освещения на неблестящих или матовых поверхностях. Если вы рисуете автомобиль матовой краской, этот материал, вероятно, подойдет. Освещение рассчитывается для каждой вершины вашей модели и интерполируется между вершинами.
Вы также можете установить «эмиссионный» цвет материала, на который не влияет освещение, и добавить его поверх ламбертовского цвета.
new THREE.MeshLambertMaterial({color: '#F00', emissive: '#0FF'})
СеткаФонгМатериал
Этот материал немного более продвинут, чем ламбертовский материал, в том, что он может имитировать блестящие поверхности с зеркальным освещением. Освещение рассчитывается на пиксель, а не на вершину, поэтому в результате получается более реалистичное освещение за счет более тяжелой компьютерной обработки.
Вы можете установить свойство «блеск» материала. Чем выше значение, тем ярче материал.
new THREE.MeshPhongMaterial({color: '#F00', shininess: 100})
СеткаСтандартМатериал
Этот материал использует рендеринг, основанный на физике, который отличается от упомянутых мною ранее материалов. Все 3 приведенных выше материала не имеют физической основы и рассчитывают освещение с использованием приближенных значений. MeshStandardMaterial - это физически обоснованный материал, который реалистично работает при любых условиях освещения. Освещение также рассчитывается на пиксель для максимальной точности.
Здесь задействованы два основных свойства: шероховатость и металличность. Чем меньше шероховатость, тем ярче она. Металл - понятие для меня сложное, но оно больше похоже на металл, когда его ценность растет.
new THREE.MeshStandardMaterial({color: '#F00', roughness: 0.2, metalness: 0.3})
Аншлаг
Возможно, вы уже заметили, что на главном изображении этой статьи на самом деле изображены все мармеладные мишки из 4 различных материалов, которые я представил. Слева направо соответственно применяются MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial и MeshStandardMaterial.
Если вы хотите визуализировать этих милых мармеладных мишек на своем собственном компьютере, ознакомьтесь с моим репозиторием на Github!
Кредиты
Модель мармеладного мишки, которую я использовал, была загружена с этой 3D-модели от LittleWhiteElk, которая выглядит даже более реалистично, чем мои мармеладные мишки здесь!
