Знакомство с three.js

goo.gl/6TwxSS

Где используется

• Механизмы: сборка/документация
• Автомобилей, здания
• Элементы дизайна
• Интернет магазины
• Квартиры и дома
• Визуализация приложения

Моя задача по three.js

Разработка интерфейсов для агентства

Задача: добавить  рендер 3d моделей домов

Поиск решений:
готовые не совсем подходят, проще написать свое

Демо 

Что такое WebGL?

• Построена на основе OpenGL ES 2.0
• Обеспечивает API для 3D-графики
• Использует HTML5-элемент canvas для рендера
• Может отправить код на видеокарту

Поддержка в браузерах  3D Canvas

Нативный WebGL

Низкоуровневый, высокий порог вхождения

<script id="shader-fs" type="x-shader/x-fragment">
    void main() {
        ...
        vec2 p = gl_FragCoord.xy / uResolution.xy - .5;
        p.x *= uResolution.x / uResolution.y;
        float rz = fbm(p);
        ...
    }
</script>

Почему я выбрал Three.js 

• Поддержка форматов (3mf, amf, babylon...)
• Много туториалов, комьюнити, чат в jabber
• Плагины для типовых задач
• Рендеры: Canvas, SVG, CSS3d, pdf ...

Плагины:

• mode.js - нахождение пересечений плоскости
• CSG - вычитание и сложение тел 
• Physijs - столкновения гравитация и тп 
• Виртуальная реальность (посмотрим на устройстве)

Простейшее приложение

<script src="three.js"></script>
<script src="WebVR.js"></script> // VR support

<script>
    // Our Javascript will go here.
</script>

Базовые элементы приложения

Создаем сцену и камеру

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera();

Добавим объект на сцену

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial();

var cube = new THREE.Mesh( geometry, material );

scene.add( cube ); // добавляем его на сцену

Рендерим

var renderer = new THREE.WebGLRenderer(); // рендерер

document.body.appendChild( renderer.domElement ); 
// добавляем его к дом элементу

renderer.render(scene, camera); 
// каждый раз когда что-то изменится 
// нужно вызвать рендер

Результат

Ссылки

• Эта презентация: goo.gl/6TwxSS
• Документация three.js
• Email: ipbebnev@gmail.com
• Личный сайт: bebnev.pro