Three.js

Материал из Википедии — свободной энциклопедии
Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 2 мая 2023 года; проверки требуют 3 правки.
Перейти к навигации Перейти к поиску
Three.js
Логотип программы Three.js
Скриншот программы Three.js
Скриншоты примеров с Three.js
Тип интерфейс программирования приложений, библиотека JavaScript и библиотека функций
Разработчик mrdoob[вд]
Написана на 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 года.

Ссылки

[править | править код]
Источник — https://ru.wikipedia.org/w/index.php?title=Three.js&oldid=139015116