В цій статті, ми створимо 3D версію логотипу Treehouse використовуючи three.js. Нажміть та перетягуйте мишу для переміщення камери! Також ви можете використовувати колесо миші для масштабування.

Демо Завантажити код

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

Three.js може спочатку здатися важким, але насправді вам прийдеться писати набагато_ _більше коду на чистому WebGL. Всі важкі речі робляться з three.js без втрати гнучкості.

Getting Started

Перейдіть на http://threejs.org/ та завантажте архів з фреймворком. В zip архіві буде папка build, в якій повинен бути файл three.min.js. Саме він потрібен для розробки.

Для цього уроку вам також потрібен файл з назвою OrbitControls.js, який є в архіві. Ось шлях до файлу:

папка threejs > examples > js > controls > OrbitControls.js

Встановлення локального середовища

JavaScript має функцію безпеки політика того ж походження, з якої виходить, що ми не можемо завантажити зовнішні файли всередину JavaScript коду. Це створює проблеми, тому що three.js має завантажувати геометрію, текстури та інші файли. Щоб вирішити це питання, вам потрібен локальний http сервер, щоб ваші файли були однакового походження. Тому просте відкриття html файлу в браузері не спрацює.

На щастя є three.js FAQ з чудовим гідом як запустити three.js локально використовуючи Python, Ruby або просто змінюючи налаштування браузера. Це простіше ніж звучить, тому, якщо у вас не завантажуються файли, перегляньте цей гід.

Створення 3D моделі

Ми вже створили 3D версію лого Treehouse, і ви можете його використовувати для навчання, але якщо ви хочете створити свою модель, я б порекомендував вам використовувати Blender. Це чудова програма для 3D моделінгу та рендеру, вона безкоштовна, з відкритим кодом та підтримує крос-платформенність. Також, є багато навчальних матеріалів. Коли я сів за Blender вперше, я закінчив модель вже за годину.

HTML

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

      <title>Treehouse лого в three.js</title>
      <meta charset="utf-8">
    
      <script src="js/three.min.js"></script>
      <script src="js/OrbitControls.js"></script>
     
      <script>
     
        // Наш код буде тут...
     
      </script>

Використовуємо three.js для створення 3D сцен

Ми можемо писати наш JavaScript код в зовнішньому файлі, але в нашому HTML файлі немає інших елементів, тому ми пишемо все в ньому між script тегів, для того, щоб зробити наш приклад більш прозорішим(простішим).

Глобальні змінні та функції

Ми б хотіли встановити всередині наших script тегів деякі глобальні змінні та викликати деякі функції, які будуть визначені пізніше:

    // Встановлюємо сцену, камеру та рендер, як глобальні змінні.
    var scene, camera, renderer;
    
    init();
    animate();

Створення сцени

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

      // Тут глобальні змінні з прикладу вище
     
      // Встановлення сцени
      function init() {
     
        // Створення сцени та встановлення її розміру.
        scene = new THREE.Scene();
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
     
        // Тут буде код...
     
      }

Створення рендеру

Далі, ми налаштуємо движок рендеру. Ми можемо використовувати SVG або canvas, але ми будемо користуватись WebGL движком тому, що він має доступ до GPU і це дає велику перевагу в швидкодії. Після створення рендеру, ми вставляємо його в DOM через елемент body. Three.js створить canvas всередені елемента body, і буде використовувати його для рендеру нашої сцени.

      // Встановлення сцени.
      function init() {
     
        // Код з інших кроків тут...
     
        // Створення рендеру та додавання його в DOM.
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(WIDTH, HEIGHT);
        document.body.appendChild(renderer.domElement);
     
        // Тут буде код...
     
      }

Створення камери

Коли наша сцена та рендер готові, ми можемо створювати камеру. PerspectiveCamera має кілька параметрів:

• FOV - Ми використовуємо 45 градусів для нашого поля огляду;

• Apsect - Просто ділимо ширину і висоту браузера, для того, щоб отримати співвідношення;

• Near - Це відстань на якій камера буде проводити рендер сцени;

• Far - Все, що за цією дистанцією, не буде відображено. Можливо більш знайоме вам, як draw distance.

Після створення нашої камери, ми встановлюємо позицію використовуючи XYZ координати. Значення за замовчуванням 0,0,0, але я виставив 6 для координати Y, щоб отримати деяку відстань між нашим відображенням та моделю.

На сам кінець нам потрібно додати камеру до нашої сцени.

      // Встановлення сцени.
      function init() {
     
        // Код з минулих кроків...
     
        // Створення камери, її віддалення від моделі, та додавання її до сцени.
        camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
        camera.position.set(0,6,0);
        scene.add(camera);
     
        // Тут буде код...
     
      }

Оновлення видимої області при зміні розміру

Це все добре, але що трапляється, якщо користувач змінює розміри вікна браузера? Для цього нам потрібно додати приймач подій. Коли відбувається зміна розмірів вікна браузера стається кілька речей. По-перше ми перехвачуємо ширину та висоту браузера та зберігаємо в змінних, які передаються до функції. Потім ми використовуємо ці значення, щоб встановити новий розмір нашого рендеру так само, як і перераховуємо співвідношення сторін камери. Крім того, ми повинні викликати updateProjectionMatrix() об'єкта camera так, щоб наша сцена оновилася з новими параметрами. Це невигідно в контексті 3D-рендеринга в реальному часі, але після зміни розмірів вікна браузера, ми маємо нормальний fps.

      // Встановлення сцени
      function init() {
     
        // Код з інших кроків тут...
     
        // Створюємо приймач подій який змінює рендер разом з вікном браузера.
        window.addEventListener('resize', function() {
          var WIDTH = window.innerWidth,
              HEIGHT = window.innerHeight;
          renderer.setSize(WIDTH, HEIGHT);
          camera.aspect = WIDTH / HEIGHT;
          camera.updateProjectionMatrix();
        });
     
        // Тут буде код...
     
      }

Додаємо освітлення

Тепер перейдемо до крафтингу нашої сцени. За допомогою виклику функції setClearColorHex нашого WebGLRenderer об'єкту, ми маємо змогу виставляти колір фону сцени.
Потім, нам потрібне світло для того, щоб бачити наші 3D об'єкти, тому ми додаємо PointLight до сцени та виставляємо його позицію. Є багато інших типів освітлення, які ви можете додати до сцени, перевіряйте документацію ;)

      // Встановлення сцени
      function init() {
     
        // Код з попередніх кроків тут...
     
        // Встановлення кольору сцени.
        renderer.setClearColorHex(0x333F47, 1);
     
        // Встановлення освітлення, його позиції та додавання до сцени.
        var light = new THREE.PointLight(0xffffff);
        light.position.set(-100,200,100);
        scene.add(light);
     
        // Тут буде код...
     
      }

Завантаження геометрії

Наші сітки були експортовані за допомогою Blender three.js JSON-експортера, тому ми повинні використовувати JSONLoader, щоб отримати геометрію в сцені. Зворотній виклик використовується всередині завантажувача, щоб встановити матеріал на сітку. У цьому випадку ми використовуємо LambertMaterial для установки сітки зеленого кольору Treehouse.

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

      // Встановлення сцени.
      function init() {
     
        // Код з попередніх кроків тут...
     
        // Завантаження моделі та додавання її до сцени.
        var loader = new THREE.JSONLoader();
        loader.load( "models/treehouse_logo.js", function(geometry){
          var material = new THREE.MeshLambertMaterial({color: 0x55B663});
          mesh = new THREE.Mesh(geometry, material);
          scene.add(mesh);
        });
     
        // Тут буде код...
     
      }

Додаємо елементи управління

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

      // Встановлення сцени
      function init() {
     
        // Код з попередніх кроків тут...
     
        // Додаємо OrbitControls, для того щоб мати навігацію мишею.
        controls = new THREE.OrbitControls(camera, renderer.domElement);
     
      }
     
      // Тут буде код...

Рендеринг сцени

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

requestAnimationFrame() функція використовує нове API, що доручає перемальовування браузеру. Цей спосіб має багато переваг - в першу чергу він перевіряє, щоб браузер не виконував анімування, якщо вкладка не активна. Детальніше про API.

Після, що ми повинні зробити нашу сцену через камеру, яку ми додали раніше, і потім оновити елементи управління орбіти.

      // Встановлення сцени...
      function init() {
        // Код з попередніх кроків...
      }
     
      // Рендер сцени та оновлення рендеру при потребі.
      function animate() {
     
        // Більше про requestAnimationFrame http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
        requestAnimationFrame(animate);
     
        // Рендер сцени.
        renderer.render(scene, camera);
        controls.update();
     
      }

three.js - це дивовижний проект, який розкриває міць WebGL для людей, які не є гуру 3D графіки.

Спробуйте змінити деякі параметри і прослідкувати зміни!