3D-опыт в браузере с Three.js

Three.js — это библиотека для рендеринга 3D-моделей в браузер без использования Flash или других сторонних плагинов. В трехмерной графике фактическая модель сцены строится в сплошном пространстве (очевидно, в трех измерениях), и в зависимости от текущей точки обзора, освещения и других параметров создается новый вид. Обычно тридцать раз в секунду …

Технологическая сторона

Three.js, как следует из названия, написан на чистом JavaScript. Он поддерживает множество браузеров благодаря различным бэкэндам:

• WebGL — единственный драйвер, способный передать работу на GPU и освободить интерпретатор JavaScript от большой нагрузки. Трехмерная графика является одним из наиболее ресурсоемких приложений вычислительной техники, так что даже закон Мура не остановил разработку аппаратного обеспечения для специального использования (а графические карты выходят каждую неделю).
• Элемент canvas является частью стандарта HTML 5, но он был представлен ранее Webkit, а затем и браузерами Gecko несколько лет назад.
• SVG — это 10-летний стандарт, изначально основанный на XML (до появления привязок JavaScript) и предшествующий современным браузерам. Таким образом, это наиболее широко поддерживаемый вариант, поскольку даже Internet Explorer (9.x) будет работать с ним.

Доменная сторона (3D модели)

Three.js моделирует такие понятия, как сцена и присутствующий в ней объект, средство визуализации и камера. Требуется, по крайней мере, учебник для начинающих в 3D-графиках: например, модели отражений Ламберта и Фонга, которые нужно указать для поверхностей, являются предметно-ориентированными терминами.

Большинство концепций, которые я видел в примерах, доступны для компьютерных инженеров: трехмерные декартовы координаты, камера с соотношением сторон и геометрия твердого тела.

Я не видел никаких матриц, поэтому я думаю, что библиотека хорошо инкапсулирует более продвинутую математику; Нелепо реализовывать исчисление в JavaScript для отдельного приложения, и задача библиотеки — передать скучные, подверженные ошибкам биты.

Полный примеров

Примеры, представленные Three.js, выглядят потрясающе, если вы думаете, что несколько лет назад alert () был наиболее надежной конструкцией JavaScript. Я не могу добавить к этой статье что-то лучшее с кодом, но я советую вам перейти по ссылкам на картинках для онлайн-примеров или клонировать репозиторий Github для большей скорости. На этой панораме вы можете поворачивать камеру с помощью мыши, чтобы увидеть все небо, и плавно увеличивать и уменьшать масштаб:

// set the scene size
var WIDTH = 400,
    HEIGHT = 300;

// set some camera attributes
var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
                   VIEW_ANGLE,
                   ASPECT,
                   NEAR,
                   FAR );

var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);