Лучшие вопросы
Таймлайн
Чат
Перспективы

Three.js

Из Википедии, свободной энциклопедии

Three.js
Remove ads

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

Краткие факты Тип, Разработчик ...
Remove ads

Обзор

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.

Remove ads

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

Суммиров вкратце
Перспектива

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

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

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

Thumb
Результат кода: 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/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]

См. также

Литература

  • 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.

Примечания

Loading content...

Ссылки

Loading content...
Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads