Three.js

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

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

Обзор

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

Особенности

Рендереры: 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.

<!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/three@0.124.0/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 контента требует написания программного кода. В качестве недостатков движка также называются отсутствие своевременных обновлений документации и уроков.^[5]^[6]