Створити сторінку цільової сторінки WebGL

Створення WebGL 3D-цільової сторінки є одним із способів зробити велике перше враження з вашою аудиторією. З WebGL, ви можете забезпечити високоякісний візуальний вміст прямо в браузері. Ви можете зробити це без плагінів або будь-яких спеціальних вимог. Всі сучасні браузери підтримують WebGL, а також мобільні пристрої та планшети. WebGL дозволяє створювати неймовірні 3D-сцени. Він може переживати переживання Webvr, маніпулювати відео, відтворювати графічні шейдери та багато іншого.

У цьому підручнику ви будете робити цільову сторінку для вигаданої кіностудії, відносних студій. Поняття є драматичним і візуально займається, оскільки таємничий об'єкт відображає і обертається у відповідь на взаємодію миші. Частинки, що навколо нього, змінюючи колір, коли вони рухаються. Ви будете працювати по кожному з кроків, щоб створити цю інтерактивну сторінку, що дозволяє створювати свої за свої проекти (для подальшого натхнення, перегляньте наш пост на кращому цільові сторінки ).

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

Там повинно бути більш ніж достатньо, щоб почати, і достатньо падати наступні проекти.

Перед початком, Завантажте файли для цього підручника .

01. Основні налаштування HTML

Почніть, вам потрібно десь, щоб побачити свою 3D-сцену. Налаштуйте основний HTML-файл і вкажіть посилання на три.js. Це може бути або розміщено зовні або додано з Three.jss repository тут: . Додайте деякі прості CSS, щоб зробити сторінку повним екраном і видалити будь-які смуги прокрутки. Збережіть свій файл до локального веб-сервера, щоб ви могли обслуговувати HTML, коли він готовий до перевірки. Додайте наступний код, щоб розпочати роботу.

 ​​& lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; відносні студії & lt; / title & gt;
& lt; script src = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; стиль & gt;
html, тіло {margin: 0; підкладка: 0; переповнення: приховані; }
& lt; / стиль & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; сценарій & gt;
// 3D-код йде сюди
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Додати глобальні варіанти

Вам знадобиться деякі змінні для посилань на всій частині іншої частини коду. Встановіть ці зараз. Це включатиме масиву, щоб тримати частинки, змінну "T" для вашого тетраедру, миші, Raycaster та Lights.

Всередині сценаріїв, почніть, додавши наступний код.

 // vars
var num = 30;
var об'єктів = [];
var raycaster = новий three.raycaster ();
var mouse = новий three.vector2 ();
var light, t; 

03. Додайте сцену, камеру та рендеринг

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

У темі сценарію додати наступний код.

 // Створити камеру
var camera = нові три.псепцевікамера
(65, вікно.innerwidth / window.innerheight,
0,1, 1000);
камера.position.set (0,0,0,0,5);
// Створіть сцену
var scene = нові триссені ();

// Створити рендеринг
var renderer = новий three.webglrrender (
{antialias: true});
renderer.setsize (вікно.innerwidth, вікно.
InnoReight);
document.body.appendchild (рендеринг
);

04. Додайте прожектор

Далі потрібно додати світло до сцени. Три.JS поставляється з різноманітними вогнями, включаючи точку, спрямовані, навколишні та прожектори. Використовуйте прожектор для цього. Це дасть вам положення та спрямовані властивості, і дозволять вам видавати тінь, якщо ви бажаєте пізніше.

Додайте наступний код, щоб додати прожектор.

 // Створіть місце світло
Light = Нова три.spotlight (0xccddff, .8);
light.position.set (0,0,5);
scene.add (світло); 

05. Додайте циклу анімації

Анімаційна петля, яка іноді називається "рентген", називається ідеально 60 разів на секунду. Фільм працює на 24 кадрах за секунду (FPS), і це досить швидко, щоб обдурити очі, щоб побачити постійний рух без перерви. У комп'ютерній анімації ми прагнемо не менше 30 кадрів, але в ідеалі 60 кадрів .ps. Це забезпечує дуже гладку візуальну продуктивність, навіть якщо кадри періодично впадають.

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

Додайте цей код, щоб зробити сцену в циклі анімації:

 var animate = функція () {
Запит на кадр (анімація);
renderer.render (сцена, камера);
};

// Початок циклу Анімації
Анімація (); 

06. Завантажте текстуру землі

Далі ви створите землю для сцени. Щоб запустити, потрібно завантажити зображення для використання. Текстури для речей, таких як поверхні землі та настінних поверхонь, можуть бути створені, беручи свої власні фотографії та ретельно обрізаючи регулюючі краю в Photoshop CC . Просто переконайтеся, що вони можуть чітко плитка. Щоб розпочати роботу швидко, є прекрасні бібліотеки онлайн, побачимо наше найкраще Безкоштовні текстури .

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

 // Завантажте текстуру землі
var texture = new three.textureloader ().
навантаження ("активи / stone.jpg");
texture.wraps = texture.Wrapt = три.
Повторення;
texture.repeat.set (12,12);

07. Створіть основний матеріал

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

 // Створити основний матеріал
Матеріал = новий три.meshysicalматеріальний ({карта: текстура, bumpmap: текстура)); 

08. Створіть землю сітку

Коли ми поєднуємо матеріал (шкіра) з геометрією, яка визначає форму 3D-об'єкта, ми створюємо сітку. Для землі вам потрібен простий план. Матеріальний шейдер і текстура створить ілюзію складної деталі.

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

 // Створити землю сітку
var geometry = нові три.planebuffergeometry
(100100);
var outd = нові three.mesh (геометрія,
матеріал);
ground.rotation.z = math.pi / 180 * -45;
ground.rotation.x = math.pi / 180 * -90;
ground.position.y = -2.0;
scene.add (земля); 

09. Завантажте об'єктивну

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

 // Текстура об'єкта завантаження
var texture = new three.textureloader ().
Навантаження ("Активи / rock_01_diffusion.jpg"); 

10. Створіть карту навколишнього середовища

Далі створіть середовище навколо вашого об'єкта, яка буде відображена на його поверхні. Ви також можете додати це до сцени як нерухомість SCENE.Background, якщо хочете. Щоб завантажити навколишнє середовище, ви використовуєте cubeeltexureLoader. Зображення, які ви використовуєте, повинні бути шістьма зображеннями, які шкіру всередині вашого куба, щоб сформувати безшовні зображення, звані карти куб.

 var envmap = новий three.cubetextureLoader ()
.setpath ('Активи /')
. Завантаження (['px.jpg', 'nx.jpg', 'py.jpg', 'ny.
jpg ',' pz.jpg ',' nz.jpg ']); 

11. Додати тетраедон

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

Додайте одну до своєї сцени, за допомогою наступного коду.

 // Створити тетраедр
var geometry = нові три.
ТетраедрБуфергеометрія (2,0);
var матеріал = нові три.meshysicalматеріал
({Карта: текстура, envmap: envmap,
Металотність: 1.0, шорсткість: 0,0});
t = нові три.mesh (геометрія, матеріал);
t.rotation.x = math.pi / 180 * -10;
scene.add (t);

12. Додати ціль повороту та камери

Щоб переконатися, що камера завжди дивиться на ваш основний об'єкт, ви використовуєте функцію Camera.Lookat. Ви також можете додати якесь обертання навколишнього середовища до свого об'єкта.

Оновіть код анімації функції, щоб виглядати так.

 ЗапитДімаціяФрам (анімація);
t.rotation.y - = 0,005;
camera.lookat (t.position);
renderr.render (сцена, камера); 

13. Додати петлю частинок

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

 для (i = 0; i & lt; = num; i ++) {
// Код частинок підуть сюди
} 

14. Створіть частину сітки

Перше, що потрібно зробити, це створити об'єкт частинок. Ви можете зробити це з сферами, справими або будь-яким бажанням об'єкта. Наразі спробуйте зробити їх простими сферами.

Всередині вашої петлі додайте наступний код.

 // Створити нову сітку
Var Geometry = Нова три.spherebuffergeometry (.1,6,6);
var material = Нова три.meshysicalmaterial ({envmap: envmap, metalness: 1.0});
var pastle = нові три.mesh (геометрія, матеріал);

15. Встановіть випадкове положення та відстань

Частинки будуть орбіти центрального об'єкта і повинні бути випадковими, тому вони добре заповнюють простір і органічний вигляд. Додайте наступний код, щоб встановити нерегулярне положення, а потім призначити постійну відстань для кожної частинки.

 // Встановити випадкове положення
particle.position.set (Math.Random () * 100.0 -
50.0.0.0, Math.Random () * - 10.0);
// calc tretnace як постійна і призначають
об'єктувати
var a = новий три.Vector3 (0, 0, 0);
var b = частинка .position;
var d = a.distanceto (b);
частинка. Датсенс = D;

16. Налаштування кутів для орбіт

Щоб зробити анімацію орбіт швидше, додайте константи кутів для орбіт, і зберігайте їх як властивість частинки. Додайте наступний код для визначення цих випадкових кутів вмісту.

 // Визначте 2 випадкові, але постійні кути
в радіанах
particle.radians = math.random () * 360 * математика.
Pi / 180; // Повний кут
particle.radians2 = math.random () * 360 * математика.
Pi / 180; // Повний кут

17. Додати частину до сцени та збору

Нарешті, додайте частину до сцени та до масиву об'єктів, які ви визначені раніше. Це зробить поставлену всіма частинками.

 // Додати об'єкт до сцени
scene.add (частинка);
// Додати до колекції
об'єкти.push (частинка);

18. Додайте анімацію до частинок

Далі потрібно оновити положення та обертання об'єктів частинок. Ці орбіти на постійній відстані від центру сцена. Додайте наступний код до аніматної функції.

 для (i = 0; i & lt; = num; i ++) {
var o = об'єкти [i];
o.rotation.y + =. 01;
if (i% 2 == 0) {
o.radians + =. 005; o.radians2 + =. 005;
} else {
o.radians - =. 005; o.radians2 - =. 005;
}
o.position.x = (math.cos (o.radians) *
o.distance);
o.position.z = (math.sin (o.radians) *
o.distance);
o.position.y = (math.sin (o.radians2) *
O.Distance * .5);
}

19. Додайте назву

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

Спочатку додайте елемент DOM для вашого заголовка. Додайте це після тегів сценарію до закриття тегу тіла.

 & lt; h1 & gt; відносні студії & lt; / h1 & gt;

Додайте наступні стилі для вашого заголовка до тегів у стилі у верхній частині вашого файлу.

h1 {color: білий; Позиція: абсолютна; Верх: 50%;
Z-індекс: 100; Ширина: 100%; Текст-вирівнювання: Центр;
Перетворення: переклад (0, -100%); Шрифт-Сім'я:
'Raleway', sans-serif; маса шрифту: 100;
letter-spacing: 40px; Текст-перетворення:
верхній регістр; шрифт: 16px; }

20. Додайте петлю відео

Гарний трюк для створення глибини до вашої посадки, щоб додати невелику петлю відео. Ви можете використовувати дим, пил або частинки. Вони широко доступні в Інтернеті або частину широкої кількості відео та кінокомпаній. Додайте наступний тег відео після тегу H1. Зауважте, що ви хочете встановити його для "приглушеного" та автозапуску. Це також дозволить відео грати на мобільних пристроях, а також в Інтернеті.

 ​​& lt; video id = "videobacker" loop src = "активи /
snow.mp4 "autoplay uted & gt; & lt; / video & gt;

Щоб укласти відео, додати наступні CSS до ваших стилів на чолі вашої сторінки.

 ​​#Videobacker {background: Cover;
Об'єкт-підходять: обкладинка; Z-індекс: 9; непрозорість :.3;
Позиція: абсолютна; Верх: 0px; ліворуч: 0px;
Ширина: 100в. Висота: 100вх; Перехід: 1s
непрозорість легкість;

21. Додати букву

Щоб дійсно дати вашій цільовій сторінці кінематографічний стиль, додати кілька букв на сторінку.

Почніть, додавши елементи DIV.

 ​​& lt; div class = 'bar-top' & gt; & lt; / div & gt;
& lt; div class = 'bar-bottom' & gt; & lt; / div & gt;

Потім оновіть свої стилі, щоб додати стилі для цих двох чорних смуг. Ви можете налаштувати ці стилі на свій смак і потреби.

 ​​.bar-top {background-color: black;
Висота: 100px; Позиція: абсолютна; Верх: 0;
ліворуч: 0; Z-індекс: 100; Ширина: 100vw;}
.bar-нижній {background-color: чорний;
Висота: 100px; Позиція: абсолютна; Нижня: 0;
ліворуч: 0; Z-індекс: 100; Ширина: 100vw;} 

Ця стаття спочатку з'явилася у випуску 287 веб-дизайнера. Купити проблему 287 або Підписатися тут .

Читати далі:

• Веб-компоненти: остаточний гід
• Як створити шаруватий ефект паралакса
• Як додати анімацію до SVG через CSS