123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
- <!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">основы Three.js</a>.
- Если вы еще не читали их, и вы новичок в three.js, возможно, вы захотите начать с них.
- Если вы еще не читали о камерах, вы можете начать с <a href="cameras.html">этой статьи</a>.</p>
- <p>Туман в 3D-движке - это, как правило, способ затухания до определенного цвета в зависимости от расстояния до камеры.
- В three.js вы добавляете туман, создавая объект <a href="/docs/#api/en/scenes/Fog"><code class="notranslate" translate="no">Fog</code></a> или <a href="/docs/#api/en/scenes/FogExp2"><code class="notranslate" translate="no">FogExp2</code></a> и устанавливая его в свойстве сцены
- <a href="/docs/#api/en/scenes/Scene#fog"><code class="notranslate" translate="no">fog</code></a>.</p>
- <p><a href="/docs/#api/en/scenes/Fog"><code class="notranslate" translate="no">Fog</code></a> позволяет выбирать <code class="notranslate" translate="no">near</code> и <code class="notranslate" translate="no">far</code> настройки, которые находятся на расстоянии от камеры.
- Все, что <code class="notranslate" translate="no">near</code> не подвержено влиянию тумана.
- Все, что <code class="notranslate" translate="no">far</code> - это цвет тумана. Части между <code class="notranslate" translate="no">near</code> и <code class="notranslate" translate="no">far</code> переходят от их материального цвета к цвету тумана. </p>
- <p>Есть также <a href="/docs/#api/en/scenes/FogExp2"><code class="notranslate" translate="no">FogExp2</code></a>, который растет экспоненциально с расстоянием от камеры.</p>
- <p>Чтобы использовать любой тип тумана, вы создаете его и назначаете его сцене, как в </p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
- {
- const color = 0xFFFFFF; // white
- const near = 10;
- const far = 100;
- scene.fog = new THREE.Fog(color, near, far);
- }
- </pre>
- <p>или для <a href="/docs/#api/en/scenes/FogExp2"><code class="notranslate" translate="no">FogExp2</code></a> это будет</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
- {
- const color = 0xFFFFFF;
- const density = 0.1;
- scene.fog = new THREE.FogExp2(color, density);
- }
- </pre>
- <p><a href="/docs/#api/en/scenes/FogExp2"><code class="notranslate" translate="no">FogExp2</code></a> ближе к реальности, но <a href="/docs/#api/en/scenes/Fog"><code class="notranslate" translate="no">Fog</code></a> используется чаще, поскольку он позволяет вам выбрать место для нанесения тумана,
- чтобы вы могли решить показать чистую сцену на определенном расстоянии, а затем исчезновение до некоторого цвета за этим расстоянием. </p>
- <div class="spread">
- <div>
- <div data-diagram="fog" style="height: 300px;"></div>
- <div class="code">THREE.Fog</div>
- </div>
- <div>
- <div data-diagram="fogExp2" style="height: 300px;"></div>
- <div class="code">THREE.FogExp2</div>
- </div>
- </div>
- <p>Важно отметить, что туман применяется к <em>вещам, которые отображаются</em>.
- Это часть расчета каждого пикселя цвета объекта.
- Это означает, что если вы хотите, чтобы ваша сцена стала блеклой, вам нужно установить туман <strong>и</strong> цвет фона на один и тот же цвет.
- Цвет фона устанавливается с помощью свойства <a href="/docs/#api/en/scenes/Scene#background"><code class="notranslate" translate="no">scene.background</code></a>. Чтобы выбрать цвет фона, вы прикрепляете к нему <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">scene.background = new THREE.Color('#F00'); // red
- </pre>
- <div class="spread">
- <div>
- <div data-diagram="fogBlueBackgroundRed" style="height: 300px;" class="border"></div>
- <div class="code">fog blue, background red</div>
- </div>
- <div>
- <div data-diagram="fogBlueBackgroundBlue" style="height: 300px;" class="border"></div>
- <div class="code">fog blue, background blue</div>
- </div>
- </div>
- <p>Вот один из наших предыдущих примеров с добавленным туманом.
- Единственное добавление - сразу после настройки сцены мы добавляем туман и устанавливаем цвет фона сцены </p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
- +{
- + const near = 1;
- + const far = 2;
- + const color = 'lightblue';
- + scene.fog = new THREE.Fog(color, near, far);
- + scene.background = new THREE.Color(color);
- +}
- </pre>
- <p>В приведенном ниже примере <code class="notranslate" translate="no">near</code> камеры равен 0,1, а <code class="notranslate" translate="no">far</code> - 5. Камера находится в точке <code class="notranslate" translate="no">z = 2</code>.
- Кубики имеют размер 1 и имеют значение <code class="notranslate" translate="no">z = 0</code>.
- Это означает, что при настройке тумана <code class="notranslate" translate="no">near = 1</code> и <code class="notranslate" translate="no">far = 2</code> кубики исчезнут прямо вокруг их центра. </p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/fog.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/fog.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <p>Давайте добавим интерфейс, чтобы мы могли настроить туман. Мы снова будем использовать
- <a href="https://github.com/georgealways/lil-gui">lil-gui</a>. lil-gui принимает объект и свойство и автоматически создает интерфейс для этого типа свойства.
- Мы могли бы просто позволить ему манипулировать свойствами <code class="notranslate" translate="no">near</code> и <code class="notranslate" translate="no">far</code> тумана, но недопустимо иметь <code class="notranslate" translate="no">near</code> больше, чем <code class="notranslate" translate="no">far</code>, поэтому давайте создадим помощник,
- чтобы lil-gui мог манипулировать свойством <code class="notranslate" translate="no">near</code> и <code class="notranslate" translate="no">far</code>,
- но мы убедимся, что <code class="notranslate" translate="no">near</code> меньше или равно <code class="notranslate" translate="no">far</code> и <code class="notranslate" translate="no">far</code> больше или равно <code class="notranslate" translate="no">near</code>. </p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">// We use this class to pass to lil-gui
- // so when it manipulates near or far
- // near is never > far and far is never < near
- class FogGUIHelper {
- constructor(fog) {
- this.fog = fog;
- }
- get near() {
- return this.fog.near;
- }
- set near(v) {
- this.fog.near = v;
- this.fog.far = Math.max(this.fog.far, v);
- }
- get far() {
- return this.fog.far;
- }
- set far(v) {
- this.fog.far = v;
- this.fog.near = Math.min(this.fog.near, v);
- }
- }
- </pre>
- <p>Затем мы можем добавить это так</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const near = 1;
- const far = 2;
- const color = 'lightblue';
- scene.fog = new THREE.Fog(color, near, far);
- scene.background = new THREE.Color(color);
- +
- + const fogGUIHelper = new FogGUIHelper(scene.fog);
- + gui.add(fogGUIHelper, 'near', near, far).listen();
- + gui.add(fogGUIHelper, 'far', near, far).listen();
- }
- </pre>
- <p>Параметры <code class="notranslate" translate="no">near</code> и <code class="notranslate" translate="no">far</code> задают минимальные и максимальные значения для регулировки тумана. Они устанавливаются при настройке камеры. </p>
- <p><code class="notranslate" translate="no">.Listen ()</code> в конце последних 2 строк указывает lil-gui <em>прослушивать</em>
- изменения. Таким образом, когда мы меняем <code class="notranslate" translate="no">near</code> на <code class="notranslate" translate="no">far</code> или мы меняем <code class="notranslate" translate="no">far</code> на <code class="notranslate" translate="no">near</code> lil-gui обновит интерфейс другого свойства для нас. </p>
- <p>Также было бы неплохо иметь возможность изменить цвет тумана, но, как было упомянуто выше, нам нужно синхронизировать цвет тумана и цвет фона.
- Итак, давайте добавим еще одно <em>виртуальное</em> свойство в наш помощник, который будет устанавливать оба цвета, когда lil-gui манипулирует им. </p>
- <p>lil-gui может манипулировать цветами 4 способами, как шестнадцатеричная строка из 6 цифр CSS (например: <code class="notranslate" translate="no"># 112233</code>).
- Как тон, насыщенность, яркость объекта (например: <code class="notranslate" translate="no">{h: 60, s: 1, v:}</code>).
- Как массив RGB (например: <code class="notranslate" translate="no">[255, 128, 64]</code>). Или как массив RGBA (например: <code class="notranslate" translate="no">[127, 200, 75, 0.3]</code>). </p>
- <p>Для нашей цели проще всего использовать шестнадцатеричную версию, поскольку таким образом lil-gui манипулирует только одним значением.
- К счастью, <a href="/docs/#api/en/math/Color"><code class="notranslate" translate="no">THREE.Color</code></a> как метод <a href="/docs/#api/en/math/Color#getHexString"><code class="notranslate" translate="no">getHexString</code></a>
- который мы используем, чтобы легко получить такую cтроку - нам просто нужно добавить <code class="notranslate" translate="no">«#»</code> вперед. </p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">// We use this class to pass to lil-gui
- // so when it manipulates near or far
- // near is never > far and far is never < near
- +// Also when lil-gui manipulates color we'll
- +// update both the fog and background colors.
- class FogGUIHelper {
- * constructor(fog, backgroundColor) {
- this.fog = fog;
- + this.backgroundColor = backgroundColor;
- }
- get near() {
- return this.fog.near;
- }
- set near(v) {
- this.fog.near = v;
- this.fog.far = Math.max(this.fog.far, v);
- }
- get far() {
- return this.fog.far;
- }
- set far(v) {
- this.fog.far = v;
- this.fog.near = Math.min(this.fog.near, v);
- }
- + get color() {
- + return `#${this.fog.color.getHexString()}`;
- + }
- + set color(hexString) {
- + this.fog.color.set(hexString);
- + this.backgroundColor.set(hexString);
- + }
- }
- </pre>
- <p>Затем мы вызываем <code class="notranslate" translate="no">gui.addColor</code>, чтобы добавить интерфейс цвета для виртуального свойства нашего помощника.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const near = 1;
- const far = 2;
- const color = 'lightblue';
- scene.fog = new THREE.Fog(color, near, far);
- scene.background = new THREE.Color(color);
- * const fogGUIHelper = new FogGUIHelper(scene.fog, scene.background);
- gui.add(fogGUIHelper, 'near', near, far).listen();
- gui.add(fogGUIHelper, 'far', near, far).listen();
- + gui.addColor(fogGUIHelper, 'color');
- }
- </pre>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/fog-gui.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/fog-gui.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <p>Вы можете видеть <code class="notranslate" translate="no">near</code> до 1,9, а <code class="notranslate" translate="no">far</code> до 2,0 дает очень резкий переход между незатуманенным и полностью затуманенным.
- где <code class="notranslate" translate="no">near</code> = 1,1 и <code class="notranslate" translate="no">far</code> = 2,9 должны быть примерно самыми гладкими, учитывая, что наши кубики вращаются на 2 единицы от камеры. </p>
- <p>И последнее: на материале существует логическое свойство <a href="/docs/#api/en/materials/Material#fog"><code class="notranslate" translate="no">fog</code></a>,
- определяющее, влияет ли туман на объекты, созданные с этим материалом.
- По умолчанию это <code class="notranslate" translate="no">true</code> для большинства материалов. В качестве примера того, почему вы можете захотеть отключить туман, представьте,
- что вы делаете 3D-симулятор автомобиля с видом с места водителя или из кабины.
- Вы, вероятно, хотите, чтобы тумана не было внутри, если смотреть изнутри автомобиля. </p>
- <p>Лучшим примером может быть дом и густой туман вне дома. Допустим, туман установлен на расстоянии 2 метра ( near = 2) и полностью затуманен на 4 метра ( far = 4).
- Комнаты длиннее 2 метров, а дом, вероятно, длиннее 4 метров, поэтому вам необходимо установить материалы для внутренней части дома,
- чтобы не было тумана, в противном случае, если вы будете стоять внутри дома, глядя на стену в дальнем конце комнаты, она будет в тумане. </p>
- <div class="spread">
- <div>
- <div data-diagram="fogHouseAll" style="height: 300px;" class="border"></div>
- <div class="code">fog: true, all</div>
- </div>
- </div>
- <p>Обратите внимание, что на стены и потолок в дальнем конце комнаты распространяется туман. Отключив туман для материалов дома, мы можем решить эту проблему. </p>
- <div class="spread">
- <div>
- <div data-diagram="fogHouseInsideNoFog" style="height: 300px;" class="border"></div>
- <div class="code">fog: true, only outside materials</div>
- </div>
- </div>
- <p><canvas id="c"></canvas></p>
- <script type="module" src="../resources/threejs-fog.js"></script>
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|