Three.js — это кроссбраузерная библиотека JavaScript для создания 3D-графики в веб-браузере. Скрипты Three.js используются с элементом холста HTML5, SVG и WebGL для рендеринга графики. Большие данные и полностью захватывающий интерактивный опыт становятся все более популярными, а Three.js — отличный способ разработки веб-решений, которые легко доступны большому количеству пользователей. Источник, на который я буду ссылаться, можно найти по адресу: http://codepen.io/MichaelMazur/pen/xGKyc.

Этот CodePen содержит красивую треугольную форму, которая вращается на стилизованном холсте. Это должно дать вам общее представление о том, как создать сцену и управлять визуальными эффектами. Из этого краткого поста вы познакомитесь с основами настройки сцены three.js, некоторыми замечательными ресурсами, а также советами и рекомендациями, которые я хотел бы знать до того, как начал.

Приведение мяча в движение

Для начала перейдите на http://threejs.org/ и загрузите начальный zip-файл Three.js, который содержит исходный код и отличный пример кода. Основные элементы, необходимые для рендеринга пустой сцены на холст, — это сцена, камера и средство визуализации. После того, как вы настроите эти три элемента, вы должны добавить средство визуализации в объектную модель документа (DOM) и выполнить визуализацию сцены.

/// Set up a scene
var scene = new THREE.Scene();
/// Set up a camera
var camera = new THREE.PerspectiveCamera(80, window.innerWidth/window.innerHeight, 0.1, 1000);
/// Specify zoom level, this is optional.
camera.position.z = 5;
///Create renderer and set the size
var renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setSize(window.innerWidth, window.innerHeight);
/// Add the render to the DOM.
document.body.appendChild(renderer.domElement);
//Recursive call to render the scene
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();


Теперь давайте добавим фигуру на сцену. Вы должны определить геометрию и материал, чтобы визуализировать форму в сцене. Вот простой пример того, как добавить треугольную каркасную фигуру.

var geometry = new THREE.SphereGeometry(3, 3, 3);
var material = new THREE.MeshBasicMaterial({color: 0x3f3f3f, wireframe: true});
var shape = new THREE.Mesh(geometry, material);
scene.add(shape);

Вот и все, сходите с ума!

Как вы можете быстро заметить, Three.js — очень мощная, хорошо документированная библиотека, которую легко освоить. Библиотека Three.JS была в авангарде создания трехмерной графики в веб-браузерах и является лучшим решением на сегодняшний день. Настройка сцены, добавление камеры, форм и рендеринга — это все, что вам нужно для запуска проекта; это так просто. Теперь, когда у вас есть основы three.JS, сходите с ума и попробуйте создать свои собственные потрясающие визуализации и интерфейсы!

Задним числом

В заключение я упомянул вещи, которые хотел бы знать. Несколько вещей были не очень ясны для меня, когда я начинал:

  1. Плоскость ориентации, некоторые проблемы с позиционированием/z-индексом:
    По умолчанию фигуры визуализируются в центре сцены, расположенной на декартовой плоскости. Я обнаружил, что существует проблема с абсолютным позиционированием элементов, когда вы накладываете изображения или текст поверх сцены. Предполагается, что свойство z-index применяется к элементам с позициями: абсолютная, позиция: фиксированная или позиция: относительная. Когда у меня были элементы с position:absolute, их свойства z-index игнорировались, что затрудняло наслоение. Изменение их положения: исправлено, исправлена ​​проблема; поэтому, если вы видите что-то необычное с z-index, поэкспериментируйте с фиксированным и абсолютным позиционированием.
  2. Что делать со сценой после того, как вы покинете страницу или представление.
    Если вы используете несколько страниц или представлений на сайте, которые не включают визуализированную сцену three.JS, вы хотите убедитесь, что вы удаляете сцену из DOM при выходе со страницы или просмотра. Я использовал Backbone для управления своим конкретным сайтом, поэтому я просто удалил все представление из DOM.
  3. Изменение размера сцены при изменении размера окна браузера:
    С приведенным здесь кодом изменение размера невозможно. В Интернете довольно много ссылок на изменение размера сцены с помощью изменения размера браузера. Threex отлично справляется с повторным рендерингом сцен с изменением размеров окна браузера. Посмотрите на код; это легко усваивается. Это должно помочь вам понять, как обрабатывать изменения размеров окна: http://learningthreejs.com/data/THREEx/docs/THREEx.WindowResize.html