Предисловие
Материал - это свойство, связанное с эффектами рендеринга, независимо от информации об объекте вершины. Установив материал, вы можете изменить цвет, карту текстур, режим освещения и т. Д. Объекта.
Meshbasicmaterial: нет чувства света, давая геометрию простой цвет или отображение каркас.
Meshlambertmaterial: этот материал реагирует на свет и используется для создания тусклых и неяртных объектов.
Meshphongmaterial: этот материал также реагирует на свет и используется для создания ярких металлических объектов.
1. Основные материалы
Используйте основные объекты материала, цвет объекта после рендеринга всегда является цветом материала без света и темных или тениных эффектов из -за освещения. Если для указанного материала нет цвета, цвет случайный. Его конструктор:
Three.meshlambertmaterial (OPT)
Среди них OPT может быть дефолт или является значением, содержащим каждый атрибут. Например, создайте новый желтый материал с непрозрачностью 0,75:
Новый Three.meshbasicmaterial ({color: 0xffff00, непрозрачность: 0,75});Примените его к кубу (см. «Три.
Исходный код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 7.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglenderer ({canvas: document.getElementbyid ('maincanvas')}); renderer.setClearcolor (0x0000000); var scene = new Three.Scene (); // камера Var Camera = new Three.othographicCamera (-5, 5, 3,75, -3,75, 0,1, 100); Camera.position.Set (25, 25, 25); Camera.lookat (новый три. Vector3 (0, 0, 0)); Scene.add (камера); // Light VAR Light = новый три. Light.position.Set (10, 15, 5); Scene.add (свет); var material = new.meshbasicmaterial ({color: 0xffff00, непрозрачность: 0,75}); var cube = new Three.mesh (новый три. Кабегеометрия (5, 5, 5), материал); Scene.add (куб); renderer.render (сцена, камера); } </script> </html>Несколько более часто используемых свойств Basicmaterial :
・ Видимо: видно ли это, по умолчанию верно
・ Сторона: отображайте переднюю или заднюю сторону лица, по умолчанию есть передняя тройка.
・ Каркас: рендеринг линии вместо лиц, по умолчанию в ложном
・ Цвет: шестнадцатеричный цвет RGB, если красный представлен как 0xff0000
・ Карта: используйте карты текстуры
Для основных материалов, даже если источник света в сцене изменяется, объекты, использующие этот материал, всегда имеют одинаковый эффект в цвете повсюду. Конечно, это не очень реалистично, поэтому мы представим более реалистичные модели освещения: модели освещения Ламберта и модели освещения фонга .
2. Материал Lamber и материал фонга
Материал Ламберта (Meshmbertmaterial) - это материал, который соответствует модели освещения Ламберта. Основная особенность модели освещения Ламберта заключается в том, что она рассматривает только диффузное отражение, но не учитывает эффект зеркального отражения. Следовательно, он не подходит для таких объектов, как металлы и зеркала, которые требуют зеркального отражения, и подходит для эффектов диффузного отражения большинства других объектов.
Формула модели освещения:
Idiffuse = kd * id * cos (theta)
Среди них Idiffuse является диффузной интенсивностью света, KD является атрибутом диффузного отражения поверхности объекта, ID - интенсивность света, а тета - это угловая дуга света.
Конечно, для материала Ламберта с использованием Thre.js вам не нужно понимать вышеуказанную формулу, чтобы использовать ее напрямую.
Метод создания желтого материала Ламберта:
Новый три.meshlambertmaterial ({color: 0xffff00})После использования освещения вы получаете следующий эффект:
Цвет используется для выражения способности материала отражать рассеянный свет, а также является наиболее часто используемым атрибутом для установки цвета материала. Кроме того, вы также можете использовать окружающую среду и излучение для управления цветом материала.
Окружающая среда представляет собой способность отражения к окружающему свету. Это значение действителен только при установке Ambientlight. Способность отражения материала к окружающему свету умножается на интенсивность окружающего света, чтобы получить фактический цвет материала.
Имиссив-это самосоверенный цвет материала, который можно использовать для выражения цвета источника света. Это не источник света, а цвет, который не влияет на свет. Самостоятельная люминесценция в одном красном:
Новый три.
Эффект:
При использовании как красного самостоятельного, так и желтого рассеянного света:
Новый Three.meshmbertmaterial ({Color: 0xffff00, Emative: 0xff0000})Эффект:
Эффекты сферы:
Суммируйте уникальные свойства материала Lamber:
Амбиент: установите окружающий цвет материала и используйте его с источником света Ambientlight. Этот цвет будет умножен на цвет окружающего света. То есть реагировать на источник света.
Имиссив: установите цвет, испускаемый материалом, не источник света, а цвет, который не влияет на свет. По умолчанию черный.
Исходный код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> 3.js test7.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglenderer ({canvas: document.getElementbyid ('maincanvas')}); renderer.setClearcolor (0x0000000); var scene = new Three.Scene (); // камера Var Camera = new Three.othographicCamera (-5, 5, 3,75, -3,75, 0,1, 100); Camera.position.Set (25, 25, 25); Camera.lookat (новый три. Vector3 (0, 0, 0)); Scene.add (камера); // Light VAR Light = новый три. Light.position.Set (10, 15, 5); Scene.add (свет); var material = new.meshlambertmaterial ({color: 0xffff00, emithy: 0xff0000}); var cube = new Three.mesh (новый три. Кабегеометрия (5, 5, 5), материал); Scene.add (cube); // var sphere = new Three.mesh (новый три. renderer.render (сцена, камера); } </script> </html>3. Материал
Материал Phong (Meshphongmaterial) - это материал, который соответствует модели освещения фонга. В отличие от Ламберта, модель Phong рассматривает эффект зеркального отражения, поэтому она особенно подходит для производительности металла и зеркала.
Часть диффузного отражения и модель освещения Ламберта одинаковы, а модель зеркальной части отражения - это:
Ispecular = Ks * Is * (cos(alpha)) ^ n
Среди них ISpecular - это интенсивность света, отражаемая зеркальной поверхностью, KS является коэффициентом зеркального отражения поверхности материала, является интенсивностью источника света, альфа - это угол между отраженным светом и линией зрения, n является индексом выделения, а чем больше, чем точке, тем меньше, точечное пятно.
Поскольку часть диффузного отражения согласуется с моделью Ламберта, если коэффициент зеркального отражения не указан, но установлено только диффузное отражение, эффект такой же, как у Ламберта:
новый Three.meshphongmaterial ({color: 0xffff00});Точно так же могут быть указаны как эмиссивные, так и окружающие значения и не будут объяснены здесь. Коэффициент зеркального отражения указан ниже. Во -первых, мы используем только зеркальное отражение, устанавливаем выделение красного и применяем его к сфере:
var material = new.meshphongmaterial ({Specular: 0xff0000}); var sphere = new Three.mesh (new Three.spheregeometry (3, 20, 8), материал);Эффект:
N-значение в модели освещения можно контролировать через атрибут блеска. Когда значение блеска больше, тем меньше место выделения, а значение по умолчанию составляет 30. Когда мы устанавливаем его на 1000:
Новый Three.meshphongmaterial ({Specular: 0xff0000, блеск: 1000});Эффект:
Используйте желтый зеркальный свет, красное рассеянное свет:
Материал = новый тройка
Суммируйте уникальные свойства материала Phong:
Амбиент: установите окружающий цвет материала и используйте его с источником света Ambientlight. Этот цвет будет умножен на цвет окружающего света. То есть реагировать на источник света.
Имиссив: установите цвет, испускаемый материалом, не источник света, а цвет, который не влияет на свет. По умолчанию черный
Зеркальное зерно: указывает яркость материала и цвет бликов. Если установить на тот же цвет, что и свойство цвета, будет получено еще один более металлический материал. Если он будет настроен на серый, это будет выглядеть как пластик.
Блест: указывает яркость выделения, значение по умолчанию составляет 30.
Исходный код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> 3.JS Test7.3 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglenderer ({canvas: document.getElementbyid ('maincanvas')}); renderer.setClearcolor (0x0000000); var scene = new Three.Scene (); // камера Var Camera = new Three.othographicCamera (-5, 5, 3,75, -3,75, 0,1, 100); Camera.position.Set (25, 25, 25); Camera.lookat (новый три. Vector3 (0, 0, 0)); Scene.add (камера); // Light VAR Light = новый три. Light.position.Set (10, 15, 25); Scene.add (свет); var material = new.meshphongmaterial ({// Specular: 0xff0000, цвет: 0xff0000, Specular: 0xffff00, Shininess: 100}); // var cube = new Three.mesh (new Three.cubegeometry (5, 5, 5), Material); // scene.add (cube); var sphere = new Three.mesh (новый три. Scene.add (сфера); renderer.render (сцена, камера); } </script> </html>Суммировать
Содержание этой статьи заканчивается здесь. В статье представлены Lamber и Phong в Three.js через подробные примеры и картинки. Я надеюсь, что это будет полезно для каждого обучения. Редактор будет разбирать связанные статьи на Three.js один за другим. Друзья, которые заинтересованы в Three.js, пожалуйста, продолжайте поддерживать wulin.com.