Створити інтерактивні 3D-візуальні матеріали з трьома.JS

Цей підручник WebGL демонструє, як створити 3D-симуляцію навколишнього середовища, яке показує, що відбувається з світом, як зміна рівня CO2. (Ви можете побачити більше Експерименти WebGL тут.)

Користувач керує рівні за допомогою слайдера діапазону HTML. Як користувач додає більше CO2, з'явиться більше Smog, то рівень води збільшиться, оскільки збільшення температури танення більш полярних льодових крижаків, то дерева зникнуть, оскільки вони занурюються у воду.

Елементи анімовані та виходять з використанням бібліотеки Tween і перетягування слайдера в протилежному напрямку буде зворотним ефектом. Якби тільки це було так легко в реальному житті!

01. Елементи відображення

Щоб запустити проект, відкрийте папку "Початок" у вашому код IDE. Відчини index.html І ви побачите, що вже є основна сторінка, що вже є з деяким кодом. У розділі тіла додайте елементи відображення тут, які будуть використовуватися як інтерфейс до 3D-вмісту.

 & lt; div id = "заголовок" & gt;
  & lt; img src = "img / co2.png" id = "значок" & gt;
  & lt; / div & gt;
  & lt; div id = "inner" & gt;
  & lt; вхідний клас = "слайд" тип = "діапазон" min = "0" max = "7" крок = "1" значення = "0" Oninput = "showval (this.value)" & gt;
  & lt; p & gt; перетягніть повзунок, щоб змінити рівень CO2 & LT; / P & GT;
  & lt; / div & gt; 

02. Знесення бібліотек

3D-вміст відображається через три.JS, який включений тут. Модель Collada буде додана до місця пізніше. Додаткова бібліотека для завантаження це включено, а також основна бібліотека Tween. Наступні лінії відновлюються до пост обробки ефектів, які додадуть обробку польської.

 & lt; script src = "js / three.min.js" & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "js / tween.min.js" & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / effectcomposer.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / renderpass.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / shaderpass.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / maskpass.js' & gt; & lt; / script & gt; 

03. Після обробки шейдерів

Після того, як сцена зробила кожен кадр, буде додана кількість ефектів процесу. Це бібліотеки, які дозволяють ефектом зерна плівки, розмивання нахилу, розмиванням у верхній і нижній частині екрана, потім, нарешті, віньєтка зникає до краю екрана.

04. Додавання змінних

Деякі з коду було завершено для вас. Ви побачите коментар, де додати решту коду підручника. У цьому 3D-сцені використовується ряд змінних, які доглядають за роздільною здатністю екрана, різними 3D-моделями та обробкою пост. Дві важливі змінні є водяний для висоти води і витончений , який запам'ятовує останню позицію слайдера.

 Var Screen_Width = Window.innerwidth, Screen_Height = Window.innerHeight,
 Mousex = 0, Mousey = 0, Windowhalfx = Window.innerWidth / 2, Windowhalfy = Window.innerHeight / 2, камера, сцена, рендери, вода, Waterht = 1;
var textureloader = Новий три.TextureLoader ();
var composer, shadertime = 0, strechpass, renderpass, copypass, effectvignette, group, lastval = 0; 

05. Ініціалізація сцени

Функція INIT є великою частиною коду, що забезпечує встановлення сцени з правильним поглядом на початок. Контейнер додано до сторінки, і саме там буде відображатися 3D-сцена. Додано камеру, а якийсь фоновий туман, щоб зникнути відстань.

 Функція init () {
  var container = document.createlement ('div');
  document.body.appendchild (контейнер);
  Камера = Нова три.ПерспективаКамера (75, Screen_Width / Screen_Height, 1, 10000);
  camera.position.set (2000, 100, 0);
  Сцена = нові три.Ссені ();
  scene.fog = новий three.fogexp2 (0xb6d9e6, 0,0025);
  renderer = нові три.webglrrender ({{
  Антивалій: Правда
  }); 

06. Налаштування рендерингу

Renderer отримує фоновий колір, а роздільна здатність встановлюється на той самий розмір, що і співвідношення пікселів екрана. Тіні ввімкнуті на сцені, і він розміщений на сторінці в елементі контейнера. Додано світло півкулі, що має небо та колір.

renderer.setclearcolor (0xadc9d4);
renderer.setpixelratio (вікно.devicepixelratio);
renderer.setsize (screen_width, screen_height);
renderer.shadowmap.enabled = true;
renderer.shadowmap.type = three.pcfsoftshadowmap;
контейнер. Апендчілд (рендеринг.Домлемент);
var light = новий three.hemippherelight (0xa1E2F5, 0x6F4D25, 0,5);
scene.add (світло); 

07. Shader змінні

Змінні, які будуть контролювати ефекти процесу Шейдера, надаються тут. Ці змінні будуть використовуватися пізніше, щоб додати значення, які будуть контролювати вигляд. Якщо ви подивитеся на функцію параметів, ви побачите це вже завершено для вас.

 RenderPass = Нова три.RenderPass (сцена, камера);
hblur = новий три.ShaderPass (три.horizontaltshiftshader);
vblur = новий три.shaderpass (три.Кертселілтилтшасшадер);
Fillepass = Нова три.ShaderPass (Three.FilmShader);
effectVignette = нові три.Shaderpass (три. VignetTeshader);
Copypass = Нова три.ShaderPass (Three.Copyshader); 

08. Складання ефектів

Ефекти повинні бути укладені в щось, що називається ефектом композитора. Це приймає кожен ефект і застосовує стиль до нього. Потім він відображається як остаточна сцена на екрані, яку ви побачите, коли функція рендерингу буде додана пізніше.

09. Завантаження зображення хмари

Точний парами Функція називається, і це встановлює окремі параметри для пост-ефектів. Створюється нова група, і це буде тримати всю сцену в ньому, щоб легко обертати групу об'єктів. Прозорий зображення PNG завантажується як хмарний матеріал, який буде використовуватися як спрайт у межах сцени.

 парами ();
  Group = Нова тригрупа ();
  scene.add (група);
  var cloud = textureloader.load ("img / cloud.png");
  Матеріал = Новий три.Spritematerial ({
  Карта: хмара, непрозорість: 0.6, колір: 0x888888, туман: TRUE
}); 

10. Двомісний для петлі

Вперше створюються вісім груп за петля. Ці вісім груп все отримують 35 хмар, доданих до них у другому для петлі. Кожна хмара поміщається у випадковому місці над сценою. Групи будуть включені та вимкнені з повзунком, користувачем, щоб показати та вилучено та видалити смог у візуалізації.

 для (j = 0; j & lt; 8; j ++) {
  var g = нова три.груп ();
  для (i = 0; i & lt; 35; i ++) {
  var x = 400 * math.random () - 200;
  var y = 60 * math.random () + 60;
  var z = 400 * math.random () - 200;
  sprite = новий три.Прит (матеріал);
  sprite.position.set (x, y, z); 

11. Масштабування хмари

Хмара збільшується до розміру, що дозволяє його видно на сцені. Кожна група хмар після першої групи зменшується так, щоб вони практично невидимі до рендерина. Ось як вони будуть видно пізніше, масштабування їх назад до повного розміру, оскільки це дасть хороший твін-ефект.

12. Завантаження моделі

Тепер навантажувач Collada встановлений для завантаження scene.dae модель. Коли він закінчує завантаження, модель сканується, і будь-який об'єкт, який відбувається з сіткою, виготовляється для лиття тіней та отримання тіней, щоб дати деяку додаткову глибину до сцени.

 Var Loader = Новий Three.Colladaloader ();
loader.options.convertupaxis = true;
loader.load ('scene.dae', функція (Collada) {
  var dae = collada.scene;
  dae.traverse (функція (дитина) {
  якщо (дитину інкстою три.mesh) {
  child.castshadow = true;
  дитина.receiveshadow = true;
  }
}); 

13. Пошук особливостей на сцені

Оскільки модель тепер готова до дисплея, вона встановлена ​​правильним розміром, щоб відповідати сцені. Код повинен конкретно контролювати висоту води, тому модель води знаходиться на сцені та перенесена в глобальну змінну. Аналогічним чином, основним світлом потрібно знайти, щоб він міг бути встановлений для проектних тіней.

 dae.scale.x = dae.scale.y = da.scale.z = 0,5;
dae.updatematrix ();
group.add (dae);
вода = сцена.getobjectyname ("вода", правда);
вода = вода. Діти 
;
світло = scene.getobjectyname ("Splate", true);
світло = світло. Дитячі 
; 

14. Налаштування світла

Зараз, як конспект виявлено специфіку, що складають його тіні на сцену. Тут також встановлюється вицвітання світла на краях місця. Нарешті, оскільки модель є найбільшим елементом для завантаження, то решта сцени буде створена, перш ніж цей код буде запущений, тому функція рендерингу можна назвати кожним кадром.

 light.target.position.set (0, 0, 0);
  light.castshadow = true;
   light.shadow = нові три.Lightshadow (нові три.пспективакамера (90, 1, 90, 5000));
  light.shadow.bias = 0.0008;
  light.shadow.mapsize.width = 1024;
  light.shadow.mapsize.height = 1024;
  light.penumbra = 1;
  light.decay = 5;
  рендеринг ();
}); 

15. Останній код ініціалізації

Остання частина функції init встановлює різні входи миші та дотику, які переміщують камеру на основі їх положення. Подія також зареєстрована для прослуховування, якщо екран буде змінено, і це буде оновлено відображення.

 Документ. Аддевентлістенер ("Мусемове", onDocumentMouseMove, False);
  document.addeventlistener ('touchstart', ondocumenttouchstart, false);
  document.addeventlistener ('touchmove', ondocumenttouchmove, false);
  вікно.addeventlistener ('Зміна розміру', onwindowresize, false);
} 

16. Відтворення кожного кадру

Функція рендерингу встановлена, яка називається як близько 60 кадрів в секунду, коли браузер може керувати. Група, яка містить всі моделі, встановлюється, щоб обертати невелику суму кожну кадр. Позиція камери оновлюється з миші або дотику, і вона продовжує подивитися на центр сцени.

17. Оновлення дисплея

Часшерстий час - це змінна, яка просто піднімається на 0,1 кожному кадру, і це передається в зйомка Так що зерноподібне плівкове зерно можна оновити. Ефекти композитора оновлюється та надаються на екрані. Нарешті, двигун Tween також оновлюється.

 Шейдерт + = 0,1;
  Fillepass.uniformss ['time']. value = shadertime;
  composer.render (0,1);
  Tween.update ();
} 

18. Отримання введення користувача

Слайдер діапазону вхідного діапазону, доданий на кроці 1, називає шоу функція, яка визначається тут. Коли користувач натискає на це, це просто перевіряє, що слайдер був переміщений. Якщо він перемістився, то наступна група хмари збільшується з Tween за 0,8 секунди. Висота води оновлюється, а це також двадцять до нової висоти.

 Функція ShowVal (VAL) {
  if (val! = lastval) {
  if (val & gt; lastval) {
  Новий tween.twen (group.Children [val] .scale) .to ({x: 1, y: 1, z: 1}, 800) .ing (tween.ing.covaDratic.Inout) .Start ();
  Waterht + = 0,07;
  new tween.twen (water.scale) .to ({y: waterht}, 800) .ing (tween.ing.quadratic.inout) .start (); 

19. Захоплення дерев

Змінна температура знаходить поточну групу дерев, які слід усунути з сцени, і тут вона масштабує їх з Tween на осі Y. Еластичне пом'якшення використовується так, що це джерело виходить з поля зору на екрані для приємного ефекту. Як більше води та хмари знаходяться на сцені, дерева зникають.

20. Протилежне введення

Перший вміст перевіряється, якщо слайдер був SliD вгору, або праворуч. Тепер код виявляє користувачеві, що ковзає ліворуч. Хмари масштабуються з твіном, і це рівень води, щоб показати охолоджувальний ефект на Землі.

 New Tween.twen (Group.Children [Lastval] .scale) .to ({x: 0.001, y: 0,001, z: 0,001}, 800) .ing (tween.ing.quadratic.Inout) .Start ( );
waterht - = 0,07;
new tween.twen (water.scale) .to ({y: waterht}, 800) .ing (tween.ing.quadratic.inout) .start (); 

21. Оздоблення

Останній крок - повернути дерева, тому вони масштабуються до початкового розміру з еластичним твіном. Зберегти сцену та перегляньте веб-сторінку з сервера або розміщена локально на своєму комп'ютері або на веб-сервері. Ви зможете взаємодіяти з рухом миші та повзунком, щоб змінити дисплей сцени.

Ця стаття спочатку з'явилася Веб-дизайнер випуск 265. Купити його тут .

Пов'язані статті:

• Як код збільшеного маркера реальності
• 20 дивовижні приклади WebGL в дії
• 9 блискучих використання 3D в веб-дизайні