Three.js - Three.js

Three.js
Скриншоты примеров Three.js
Скриншоты примеров Three.js
Оригинальный автор (ы)Рикардо Кабельо (Мистер Дуб )
Разработчики)Авторы Three.js[1]
изначальный выпуск24 апреля 2010 г.; 10 лет назад (2010-04-24)[2]
Стабильный выпуск
r122 / 28 октября 2020 г.; 29 дней назад (2020-10-28)
Репозиторий
Отредактируйте это в Викиданных
Написано вJavaScript
ТипБиблиотека JavaScript
ЛицензияМассачусетский технологический институт[1]
Интернет сайтthreejs.org

Three.js это кроссбраузерность Библиотека JavaScript и интерфейс прикладного программирования (API) используется для создания и отображения анимированных 3D компьютерная графика в веб-браузер с помощью WebGL. Исходный код размещен в репозитории на GitHub.

Обзор

Three.js позволяет создавать блок графической обработки (GPU) -ускоренные 3D-анимации с использованием JavaScript язык как часть интернет сайт не полагаясь на проприетарный плагины браузера.[3][4] Это возможно благодаря появлению WebGL.[5]

Библиотеки высокого уровня, такие как Three.js или GLGE, SceneJS, PhiloGL или ряд других библиотек позволяют создавать сложные компьютерные 3D-анимации, отображаемые в браузере, без усилий, необходимых для традиционного автономного приложения или плагина.[6]

История

Three.js был впервые выпущен Рикардо Кабелло на GitHub в апреле 2010 года.[2] Истоки библиотеки можно проследить до его участия в демосцена в начале 2000-х гг.[7] Код был впервые разработан в ActionScript и перенесен на JavaScript в 2009 году. По мнению Кабелло, двумя сильными сторонами перехода на JavaScript были отсутствие необходимости компилировать код перед каждым запуском и независимость от платформы. С появлением WebGL, Пол Брант довольно легко смог добавить средство визуализации для этого, поскольку Three.js был разработан с кодом визуализации в качестве модуля, а не в самом ядре.[8] Вклад Кабелло включает дизайн API, CanvasRenderer, SVGRenderer и ответственность за объединение коммитов различных участников в проект.

Бранислав Уличный, один из первых участников, начал работу с Three.js в 2010 году после того, как опубликовал ряд WebGL демки на собственном сайте. Он хотел WebGL возможности рендерера в Three.js превосходят возможности CanvasRenderer или SVGRenderer.[8] Его основной вклад обычно связан с материалами, шейдерами и постобработкой.

Вскоре после введения WebGL 1.0 в Firefox 4 в марте 2011 года Джошуа Ку присоединился к нему. Он создал свою первую демонстрацию Three.js для трехмерного текста в сентябре 2011 года.[8] Его вклады часто касаются создания геометрии.

Майкл Херцог стал активным участником в конце 2015 года. Он является вторым по величине участником с точки зрения коммитов после Рикардо Кабельо.[9]

На GitHub более 1300 участников.[10]

особенности

Three.js включает в себя следующие функции:[11]

  • Эффекты: анаглиф, косоглазие и параллакс-барьер.
  • Сцены: добавление и удаление объектов во время выполнения; туман
  • Камеры: перспективные и орфографические; контроллеры: трекбол, FPS, путь и многое другое
  • Анимация: арматура, передняя кинематика, обратная кинематика, превращаться, и ключевой кадр
  • Источники света: окружающие, направленные, точечные и точечные источники света; тени: бросать и получать
  • Материалы: Ламберт, Фонг, плавное затенение, текстуры и многое другое
  • Шейдеры: доступ к полному языку шейдеров OpenGL (GLSL ) возможности: отблеск от линз, глубина прохода, и обширная библиотека пост-обработки
  • Объекты: сетки, частицы, спрайты, линии, ленты, кости, и многое другое - все с Уровень детализации
  • Геометрия: плоскость, куб, сфера, тор, трехмерный текст и многое другое; модификаторы: токарный, экструдированный, трубный
  • Загрузчики данных: бинарные, изображения, JSON, и сцена
  • Утилиты: полный набор функций времени и 3D-математики, включая усеченный, матрица, кватернион, УФ, и больше
  • Экспорт и импорт: утилиты для создания файлов JSON, совместимых с Three.js, изнутри: Блендер, openCTM, FBX, Максимум, и OBJ
  • Поддержка: документация по API находится в стадии разработки. Открытый форум и вики работают в полную силу.
  • Примеры: более 150 файлов с примерами кодирования, а также шрифты, модели, текстуры, звуки и другие вспомогательные файлы.
  • Отладка: Stats.js,[12] Инспектор WebGL,[13] Инспектор Three.js[14]
  • Виртуальная и дополненная реальность через WebXR [15]

Three.js работает во всех браузерах, поддерживаемых WebGL 1.0.

Three.js доступен под Лицензия MIT.[1]

Применение

Следующий код создает сцену, добавляет камеру и куб к сцене, создает средство визуализации WebGL и добавляет его область просмотра в элемент document.body. После загрузки куб вращается вокруг своих осей x и y.

импорт * так как ТРИ от 'js / three.module.js';вар камера, место действия, рендерер;вар геометрия, материал, сетка;в этом();оживлять();функция в этом() {	камера = новый ТРИ.ПерспективаКамера( 70, окно.innerWidth / окно.innerHeight, 0.01, 10 );	камера.должность.z = 1;	место действия = новый ТРИ.Место действия();	геометрия = новый ТРИ.КоробкаГеометрия( 0.2, 0.2, 0.2 );	материал = новый ТРИ.СеткаНормальныйМатериал();	сетка = новый ТРИ.Сетка( геометрия, материал );	место действия.Добавить( сетка );	рендерер = новый ТРИ.WebGLRenderer( { антиалиас: правда } );	рендерер.setSize( окно.innerWidth, окно.innerHeight );	документ.тело.appendChild( рендерер.domElement );}функция оживлять() {	requestAnimationFrame( оживлять );	сетка.вращение.Икс += 0.01;	сетка.вращение.у += 0.02;	рендерер.оказывать( место действия, камера );}

Сообщество

онлайн Иды со встроенной поддержкой Three.js доступны на WebGL Playground,[16] HTML-фрагмент[17]и JSFiddle.[18] Для API доступна документация[19] а также общие советы в вики.[20] Поддержка разработчиков, вносящих изменения в библиотеку, осуществляется через форум проблем на GitHub,[21] в то время как поддержка разработчиков приложений и веб-страниц предоставляется через Stack Overflow.[22] Он-лайн поддержка в реальном времени осуществляется с помощью IRC через Freenode.[23] Большинство разработчиков также на Twitter.

Смотрите также

использованная литература

  1. ^ а б c "Three.js / лицензия". github.com/mrdoob. Получено 20 мая 2012.
  2. ^ а б «Первая фиксация». github.com/mrdoob. Получено 20 мая 2012.
  3. ^ O3D
  4. ^ Unity (игровой движок)
  5. ^ «Khronos выпускает окончательную спецификацию WebGL 1.0». Хронос Групп. 3 марта 2011 г.. Получено 2 июн 2012.
  6. ^ Кроссли, Роб (11 января 2010 г.). «Исследование: средняя стоимость разработки достигает 28 миллионов долларов». Intent Media Ltd. Архивировано с оригинал 13 января 2010 г.. Получено 2 июн 2012.
  7. ^ NVScene. «Сессия NVScene 2015: Новое изобретение колеса - в последний раз (Рикардо Кабельо)». YouTube.
  8. ^ а б c "Белая книга Three.js". Github.com. 2012-05-21. Получено 2013-05-09.
  9. ^ "Авторы mrdoob / three.js".
  10. ^ Мистер Дуб (2020-08-03), mrdoob / three.js, получено 2020-08-03
  11. ^ mrdoob (26 ноября 2012 г.). "Возможности mrdoob / three.js Wiki GitHub". Github.com. Получено 2013-05-09.
  12. ^ "Stats.js". Github.com. Получено 2013-05-09.
  13. ^ "Инспектор WebGL". Benvanik.github.com. Получено 2013-05-09.
  14. ^ "Three.js Inspector Labs". Zz85.github.com. Получено 2013-05-09.
  15. ^ "примеры three.js". threejs.org.
  16. ^ "Игровая площадка WebGL". Игровая площадка WebGL. Получено 2013-05-09.
  17. ^ «Фрагмент HTML». Html5snippet.net. 2011-05-15. Получено 2013-05-09.
  18. ^ "jsFiddle". jsFiddle. Получено 2013-05-09.
  19. ^ "Справочник по API Three.js". Mrdoob.github.com. 2000-01-01. Получено 2013-05-09.
  20. ^ mrdoob (15 марта 2013 г.). "Three.js Wiki". Github.com. Получено 2013-05-09.
  21. ^ mrdoob. "Проблемы с Three.js". Github.com. Получено 2013-05-09.
  22. ^ "Three.js". Переполнение стека. Получено 2013-05-09.
  23. ^ "Freenode - Three.js". Webchat.freenode.net. Получено 2013-05-09.

Список используемой литературы

В ряде учебников по информатике Three.js упоминается как инструмент для упрощения процесса разработки приложений WebGL, а также как простой метод знакомства с концепциями WebGL. Эти учебники в порядке появления включают:

внешние ссылки