Three.js

Three.js
Логотип программы Three.js
Скриншот программы Three.js
Скриншоты примеров с Three.js
Тип интерфейс программирования приложений, библиотека JavaScript и библиотека функций
Разработчик mrdoob[d]
Написана на JavaScript[3]
Операционная система кроссплатформенность
Первый выпуск 3 июля 2013
Последняя версия
Репозиторий github.com/mrdoob/three.…
Лицензия лицензия MIT[4]
Сайт threejs.org
Логотип Викисклада Медиафайлы на Викискладе

Three.js — кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. Исходный код расположен в репозитории GitHub.

Обзор

Three.js позволяет создавать ускоренную на GPU 3D графику, используя язык JavaScript как часть сайта без подключения проприетарных плагинов для браузера. Это возможно благодаря использованию технологии WebGL. Поддерживает трёхмерные модели формата Collada[5].

Особенности

  • Рендереры: Canvas, SVG или WebGL
  • Сцена: добавление и удаление объектов в режиме реального времени; туман
  • Камеры: перспективная или ортографическая
  • Анимация: каркасы, прямая кинематика, инверсная кинематика, покадровая анимация
  • Источники света: внешний, направленный, точечный; тени: брошенные и полученные
  • Шейдеры: полный доступ ко всем OpenGL-шейдерам (GLSL)
  • Объекты: сети, частицы, спрайты, линии, скелетная анимация и другое
  • Геометрия: плоскость, куб, сфера, тор, 3D текст и другое; модификаторы: ткань, выдавливание
  • Загрузчики данных: двоичный, изображения, JSON и сцена
  • Экспорт и импорт: утилиты, создающие Three.js-совместимые JSON файлы из форматов: Blender, openCTM, FBX, 3D Studio Max, и Wavefront .obj файл
  • Поддержка: документация по API библиотеки находится в процессе постоянного расширения и дополнения, есть публичный форум и обширное сообщество
  • Примеры: на официальном сайте можно найти более 150 примеров работы со шрифтами, моделями, текстурами, звуком и другими элементами сцены

Библиотека Three.js работает во всех браузерах, которые поддерживают технологию WebGL; также может работать с «чистым» интерфейсом элемента CANVAS, благодаря чему работает и на многих мобильных устройствах. Three.js распространяется под лицензией MIT license.

Использование

Библиотека Three.js поставляется в одном JavaScript файле, который может быть подключён к странице в любом месте. 

<script src="js/three.min.js"></script>

В следующем примере создаётся сцена, на неё добавляется камера и куб. Для сцены создаётся визуализатор <canvas> и окно просмотра для него добавляется в document.body. После загрузки сцены, куб начинает вращаться по осям X и Y.

Результат кода: Green Cube
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
	</head>
	<body>
		<script>
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			const geometry = new THREE.BoxGeometry();
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			function animate() {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

Критика

Разработка редактора сцен для Three.js находится на начальной стадии. Таким образом, создание даже примитивного 3D контента требует написания программного кода. В качестве недостатков движка также называются отсутствие своевременных обновлений документации и уроков.[6][7]

См. также

Литература

  • Williams, James. Three.js By Example (неопр.). — Vancouver, Canada: Leanpub, 2013.
  • Williams, James. Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL (англ.). — Upper Saddle River, NJ: Addison-Wesley, 2012. — P. 117—120, 123—131, 136, 140—142. — ISBN 0321767365.

Примечания

  1. ↑ npmjs
  2. ↑ Release 161 — 2024.
  3. ↑ The three_js Open Source Project on Open Hub: Languages Page — 2006.
  4. ↑ https://github.com/mrdoob/three.js/blob/master/LICENSE
  5. ↑ A.M. Manferdini, F. Remondino. A Review of Reality-Based 3D Model Generation, Segmentation and Web- Based Visualization Methods (англ.) // International Journal of Heritage in the Digital Era. — 2012. — Vol. 1, no. 1. (недоступная ссылка)
  6. ↑ The Good, The Bad and the WebGL-y  (неопр.). benchung.com. Дата обращения: 31 июля 2015. Архивировано из оригинала 22 июня 2015 года.
  7. ↑ Что выбрать для 3D сайта – Three.js или Blend4Web?  (неопр.) Habrahabr.ru. Дата обращения: 31 июля 2015. Архивировано 7 августа 2016 года.

Ссылки

  • Официальный сайт
  • Документация на английском языке
Перейти к шаблону «JavaScript»
Идеи
Компиляторы
Движки
Библиотеки
и фреймворки
Редакторы
Инструменты
Связанные
технологии
Люди
Категория Категория