123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318 |
- <!DOCTYPE html><html lang="ru"><head>
- <meta charset="utf-8">
- <title>Материалы </title>
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:site" content="@threejs">
- <meta name="twitter:title" content="Three.js – Материалы ">
- <meta property="og:image" content="https://threejs.org/files/share.png">
- <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
- <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
- <link rel="stylesheet" href="../resources/lesson.css">
- <link rel="stylesheet" href="../resources/lang.css">
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js"
- }
- }
- </script>
- </head>
- <body>
- <div class="container">
- <div class="lesson-title">
- <h1>Материалы </h1>
- </div>
- <div class="lesson">
- <div class="lesson-main">
- <p>Эта статья является частью серии статей о three.js.
- Первая была <a href="fundamentals.html">об основах</a>.
- Если вы её еще не читали, советую вам сделать это.</p>
- <p>Three.js предоставляет несколько типов материалов. Они определяют,
- как объекты будут появляться на сцене. Какие материалы вы используете,
- зависит от того, чего вы пытаетесь достичь.</p>
- <p>Есть 2 способа установить большинство свойств материала.
- Один во время создания, который мы видели раньше.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.MeshPhongMaterial({
- color: 0xFF0000, // red (можно также использовать css цвета)
- flatShading: true,
- });
- </pre>
- <p>Другой после создания</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.MeshPhongMaterial();
- material.color.setHSL(0, 1, .5); // red
- material.flatShading = true;
- </pre>
- <p>обратите внимание, что свойства типа <a href="/docs/#api/en/math/Color"><code class="notranslate" translate="no">THREE.Color</code></a> могут быть установлены несколькими способами.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">material.color.set(0x00FFFF); // так же, как в CSS #RRGGBB
- material.color.set(cssString); // любой CSS цвет, например 'purple', '#F32',
- // 'rgb(255, 127, 64)',
- // 'hsl(180, 50%, 25%)'
- material.color.set(someColor) // или другой THREE.Color
- material.color.setHSL(h, s, l) // где h, s, и l от 0 до 1
- material.color.setRGB(r, g, b) // где r, g, и b от 0 до 1
- </pre>
- <p>И во время создания вы можете передать либо шестнадцатеричное число либо строку CSS</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const m1 = new THREE.MeshBasicMaterial({color: 0xFF0000}); // red
- const m2 = new THREE.MeshBasicMaterial({color: 'red'}); // red
- const m3 = new THREE.MeshBasicMaterial({color: '#F00'}); // red
- const m4 = new THREE.MeshBasicMaterial({color: 'rgb(255,0,0)'}); // red
- const m5 = new THREE.MeshBasicMaterial({color: 'hsl(0,100%,50%)'}); // red
- </pre>
- <p>прим. переводчика:
- Блик - световое пятно на ярко освещённой выпуклой или плоской глянцевой поверхности.
- <a href="http://compgraph.tpu.ru/mir_reflection.htm">Зеркальное отражение</a> я часто буду называть бликом,
- хотя это скорее частный случай.</p>
- <p>Итак, давайте рассмотрим набор материалов Three.js.</p>
- <p><a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a> не зависит от света.
- <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> вычисляет освещение только в вершинах vs, <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> который
- вычисляет освещение в каждом пикселе и <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> также поддерживающий
- <a href="https://en.wikipedia.org/wiki/Specular_highlight">блики</a>.</p>
- <div class="spread">
- <div>
- <div data-diagram="MeshBasicMaterial"></div>
- <div class="code">Basic</div>
- </div>
- <div>
- <div data-diagram="MeshLambertMaterial"></div>
- <div class="code">Lambert</div>
- </div>
- <div>
- <div data-diagram="MeshPhongMaterial"></div>
- <div class="code">Phong</div>
- </div>
- </div>
- <div class="spread">
- <div>
- <div data-diagram="MeshBasicMaterialLowPoly"></div>
- </div>
- <div>
- <div data-diagram="MeshLambertMaterialLowPoly"></div>
- </div>
- <div>
- <div data-diagram="MeshPhongMaterialLowPoly"></div>
- </div>
- </div>
- <div class="threejs_center code">низкополигональные модели с теми же материалами</div>
- <p><code class="notranslate" translate="no">shininess</code> устанавливает <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> определяя <em>блеск</em> от бликов. Значение по умолчанию - 30.</p>
- <div class="spread">
- <div>
- <div data-diagram="MeshPhongMaterialShininess0"></div>
- <div class="code">shininess: 0</div>
- </div>
- <div>
- <div data-diagram="MeshPhongMaterialShininess30"></div>
- <div class="code">shininess: 30</div>
- </div>
- <div>
- <div data-diagram="MeshPhongMaterialShininess150"></div>
- <div class="code">shininess: 150</div>
- </div>
- </div>
- <p>Обратите внимание, что установка светимости (<code class="notranslate" translate="no">emissive</code> свойства) для цвета
- <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> или <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> и установка <code class="notranslate" translate="no">color</code> в черный
- (и <code class="notranslate" translate="no">shininess</code> в 0 для Фонга) в конечном итоге будет выглядеть как <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>.</p>
- <div class="spread">
- <div>
- <div data-diagram="MeshBasicMaterialCompare"></div>
- <div class="code">
- <div>Basic</div>
- <div>color: 'purple'</div>
- </div>
- </div>
- <div>
- <div data-diagram="MeshLambertMaterialCompare"></div>
- <div class="code">
- <div>Lambert</div>
- <div>color: 'black'</div>
- <div>emissive: 'purple'</div>
- </div>
- </div>
- <div>
- <div data-diagram="MeshPhongMaterialCompare"></div>
- <div class="code">
- <div>Phong</div>
- <div>color: 'black'</div>
- <div>emissive: 'purple'</div>
- <div>shininess: 0</div>
- </div>
- </div>
- </div>
- <p>Зачем нам все 3, когда <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> может делать то же самое, что <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>
- и <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a>? Причина в том, что более сложный материал требует больше ресурсов
- графического процессора. На более медленном GPU, например, на мобильном телефоне, возможно,
- вы захотите уменьшить мощность графического процессора, необходимую для рисования вашей сцены,
- используя один из менее сложных материалов. Из этого также следует, что если вам не нужны
- дополнительные функции, используйте самый простой материал. Если вам не нужно освещение и
- блики, используйте <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>.</p>
- <p><a href="/docs/#api/en/materials/MeshToonMaterial"><code class="notranslate" translate="no">MeshToonMaterial</code></a> похож на <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> с одной большой разницей.
- Вместо плавного затенения он использует карту градиента
- (текстуру размером X на 1) для выбора оттенка. По умолчанию используется карта градиента,
- яркость которой составляет 70% для первых 70% и 100% после, но вы можете предоставить
- свою собственную карту градиента. Это в конечном итоге дает 2 тона, которые
- выглядят как мультфильм.</p>
- <div class="spread">
- <div data-diagram="MeshToonMaterial"></div>
- </div>
- <p>Далее идут 2 <em>физически обоснованных</em> материала. Physically Based
- Rendering часто сокращается как PBR.</p>
- <p>Приведенные выше материалы используют простую математику для создания материалов,
- которые выглядят трехмерными, но это не то, что происходит в реальности.
- 2 PBR материала используют гораздо более сложную математику, чтобы приблизиться
- к тому, что на самом деле происходит в реальном мире.</p>
- <p>Первый - <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>. Самая большая разница с
- <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> и <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> - использование различных параметров.
- У <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> была <code class="notranslate" translate="no">shininess</code> настройка. <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> имеет 2
- настройки <code class="notranslate" translate="no">roughness</code> и <code class="notranslate" translate="no">metalness</code>.</p>
- <p>По простому <a href="https://en.wikipedia.org/wiki/Surface_roughness">шероховатость</a>
- <a href="/docs/#api/en/materials/MeshStandardMaterial#roughness"><code class="notranslate" translate="no">roughness</code></a> это противоположность
- <code class="notranslate" translate="no">shininess</code>. Что-то с высокой шероховатостью, например, баскетбольный мяч не имеет
- жестких отражений, а что-то не грубое, как бильярдный шар, очень блестящий.
- Шероховатость задается в интервале от 0 до 1.</p>
- <p>Другая настройка - <a href="/docs/#api/en/materials/MeshStandardMaterial#metalness"><code class="notranslate" translate="no">metalness</code></a>. Она говорит о том,
- насколько металлический материал. Металлы ведут себя иначе, чем неметаллы,
- и поэтому этот параметр изменяется от 0 для не металла вообще, до единицы - 100% металла.</p>
- <p>Вот краткий пример <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> с <code class="notranslate" translate="no">roughness</code> от 0 до 1
- поперёк и <code class="notranslate" translate="no">metalness</code> от 0 до 1 вниз.</p>
- <div data-diagram="MeshStandardMaterial" style="min-height: 400px"></div>
- <p><a href="/docs/#api/en/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a> же самое, что и <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> но он добавляет <code class="notranslate" translate="no">clearcoat</code>
- параметр, который идет от 0 до 1 для определения степени применения слоя
- глянцевого покрытия, и <code class="notranslate" translate="no">clearCoatRoughness</code> параметр, который указывает,
- насколько шероховатым является слой глянца.</p>
- <p>Вот та же сетка <code class="notranslate" translate="no">roughness</code> по <code class="notranslate" translate="no">metalness</code> как и до этого, но с
- <code class="notranslate" translate="no">clearcoat</code> и <code class="notranslate" translate="no">clearCoatRoughness</code>.</p>
- <div data-diagram="MeshPhysicalMaterial" style="min-height: 400px"></div>
- <p>Различные стандартные материалы от самых быстрых к самым медленным:
- <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> ➡
- <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a>. Более медленные материалы
- могут создавать более реалистичные сцены, но вам может потребоваться писать
- дополнительный код, чтобы использовать более быстрые материалы на маломощных
- или мобильных устройствах.</p>
- <p>Есть 3 материала, которые имеют специальное использование. <a href="/docs/#api/en/materials/ShadowMaterial"><code class="notranslate" translate="no">ShadowMaterial</code></a>
- используется для получения данных, созданных из теней. Мы еще не изучали тени.
- Когда мы это сделаем, мы будем использовать этот материал, чтобы оценить,
- что происходит за кулисами.</p>
- <p><a href="/docs/#api/en/materials/MeshDepthMaterial"><code class="notranslate" translate="no">MeshDepthMaterial</code></a> отрисовывает глубину каждого пикселя, где пиксели при
- отрицательном <a href="/docs/#api/en/cameras/PerspectiveCamera#near"><code class="notranslate" translate="no">near</code></a> камеры равны 0
- и при отрицательном <a href="/docs/#api/en/cameras/PerspectiveCamera#far"><code class="notranslate" translate="no">far</code></a> равны 1.
- Некоторые специальные эффекты могут использовать эти данные , которые мы получим в в другое время.</p>
- <div class="spread">
- <div>
- <div data-diagram="MeshDepthMaterial"></div>
- </div>
- </div>
- <p>The <a href="/docs/#api/en/materials/MeshNormalMaterial"><code class="notranslate" translate="no">MeshNormalMaterial</code></a> Покажет вам <em>нормали</em> геометрии.
- <em>Нормали</em> - это направление конкретного треугольника или грани пикселя.
- <a href="/docs/#api/en/materials/MeshNormalMaterial"><code class="notranslate" translate="no">MeshNormalMaterial</code></a> рисует пространство просмотра нормалей (нормали относительно камеры).
- <span class="color:red;">x - красный</span>,
- <span class="color:green;">y - зеленый</span> и
- <span class="color:blue;">z - синий</span>, поэтому грани, направленные вправо,
- будут красного цвета, «вверх» - будут зеленого цвета, а к экрану будут синие.</p>
- <div class="spread">
- <div>
- <div data-diagram="MeshNormalMaterial"></div>
- </div>
- </div>
- <p><a href="/docs/#api/en/materials/ShaderMaterial"><code class="notranslate" translate="no">ShaderMaterial</code></a> предназначен для изготовления нестандартных материалов
- с использованием шейдерной системы three.js.
- <a href="/docs/#api/en/materials/RawShaderMaterial"><code class="notranslate" translate="no">RawShaderMaterial</code></a> предназначен для создания полностью пользовательских
- шейдеров без помощи three.js. Обе эти темы большие и будут рассмотрены позже.</p>
- <p>Большинство материалов имеют множество настроек, определенных <a href="/docs/#api/en/materials/Material"><code class="notranslate" translate="no">Material</code></a>.
- <a href="/docs/#api/en/materials/Material">Посмотрите документацию</a> по ним, и давайте рассмотрим два
- наиболее часто используемых свойства.</p>
- <p><a href="/docs/#api/en/materials/Material#flatShading"><code class="notranslate" translate="no">flatShading</code></a>:
- выглядит ли объект граненным или гладким. По умолчанию = <code class="notranslate" translate="no">false</code>.</p>
- <div class="spread">
- <div>
- <div data-diagram="smoothShading"></div>
- <div class="code">flatShading: false</div>
- </div>
- <div>
- <div data-diagram="flatShading"></div>
- <div class="code">flatShading: true</div>
- </div>
- </div>
- <p><a href="/docs/#api/en/materials/Material#side"><code class="notranslate" translate="no">side</code></a>: какие стороны треугольников показать. По умолчанию = <code class="notranslate" translate="no">THREE.FrontSide</code>.
- Другие варианты - <code class="notranslate" translate="no">THREE.BackSide</code> и <code class="notranslate" translate="no">THREE.DoubleSide</code> (с обеих сторон).
- Большинство трехмерных объектов, нарисованных в three, вероятно, являются непрозрачными
- твердыми телами, поэтому не нужно рисовать задние стороны (стороны,
- обращенные внутрь твердого тела). Наиболее распространенная причина установки <code class="notranslate" translate="no">side</code> </p>
- <ul>
- <li>для плоскостей или других нетвердых объектов, где обычно видны задние стороны треугольников.</li>
- </ul>
- <p>Вот 6 плоскостей с <code class="notranslate" translate="no">THREE.FrontSide</code> и <code class="notranslate" translate="no">THREE.DoubleSide</code>.</p>
- <div class="spread">
- <div>
- <div data-diagram="sideDefault" style="height: 250px;"></div>
- <div class="code">side: THREE.FrontSide</div>
- </div>
- <div>
- <div data-diagram="sideDouble" style="height: 250px;"></div>
- <div class="code">side: THREE.DoubleSide</div>
- </div>
- </div>
- <p>С материалами действительно есть над чем поразмыслить, и нам еще многое
- предстоит сделать. Мы в основном игнорировали текстуры,
- которые открывают множество свойств. Прежде чем мы рассмотрим текстуры,
- мы должны сделать перерыв и обсудить
- <a href="setup.html">настройку разрабочего окружения</a></p>
- <div class="threejs_bottombar">
- <h3>material.needsUpdate</h3>
- <p>
- Эта тема редко затрагивает большинство приложений three.js, но для общей информированности...
- Three.js применяет настройки материала, когда материал используется, где "используется"
- значит "что-то отрисовывается с использованием материала". Некоторые настройки материала применяются
- только один раз, так как их изменение требует много работы с three.js.
- В этих случаях вам нужно указать <code class="notranslate" translate="no">material.needsUpdate = true</code> чтобы
- three.js применил ваши существенные изменения. Наиболее распространенные настройки,
- которые необходимо установить, <code class="notranslate" translate="no">needsUpdate</code> если вы измените настройки
- после использования материала:
- </p>
- <ul>
- <li><code class="notranslate" translate="no">flatShading</code></li>
- <li>добавление или удаление текстуры.
- <p>
- Смена текстуры - это нормально, но если вы хотите переключиться с использования
- без текстуры на использование текстуры или с использования текстуры на
- использование без текстуры, то вам нужно установить <code class="notranslate" translate="no">needsUpdate = true</code>.
- </p>
- <p>В случае перехода от текстуры к "без текстуры"
- часто просто лучше использовать белую текстуру 1x1 пикселей.</p>
- </li>
- </ul>
- <p>Как упоминалось выше, большинство приложений никогда не сталкиваются с этими проблемами.
- Большинство приложений не переключаются между
- <a title="Цвет полигона рассчитывается по 1 точке на нем" href="https://en.wikipedia.org/wiki/Shading#Flat_shading">
- flat shaded
- </a> и не flat shaded.
- Большинство приложений либо используют текстуры либо сплошной цвет для одного и того же материала,
- они редко переключаются с использования одного на использование другого.
- </p>
- </div>
- <p><canvas id="c"></canvas></p>
- <script type="module" src="../resources/threejs-materials.js"></script>
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|