Знакомство с 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 ...

Плагины:

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

<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); 
// каждый раз когда что-то изменится 
// нужно вызвать рендер

Результат

Ссылки

Made with Slides.com