Interested Article - Three.js

brigid
  • 2020-06-28
  • 1

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

Обзор

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

Особенности

  • Рендереры: Canvas , SVG или WebGL
  • Сцена: добавление и удаление объектов в режиме реального времени; туман
  • Камеры: перспективная или ортографическая
  • Анимация: каркасы, прямая кинематика , инверсная кинематика , покадровая анимация
  • Источники света: внешний, направленный, точечный; тени: брошенные и полученные
  • Шейдеры: полный доступ ко всем OpenGL -шейдерам ( GLSL )
  • Объекты: сети, частицы, спрайты, линии, скелетная анимация и другое
  • Геометрия: плоскость, куб, сфера, тор, 3D текст и другое; модификаторы: ткань, выдавливание
  • Загрузчики данных: двоичный, изображения, JSON и сцена
  • Экспорт и импорт: утилиты, создающие Three.js-совместимые JSON файлы из форматов: Blender , , FBX , 3D Studio Max , и
  • Поддержка: документация по 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="http://threejs.org/build/three.min.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 контента требует написания программного кода. В качестве недостатков движка также называются отсутствие своевременных обновлений документации и уроков.

См. также

Литература

  • Williams, James. (неопр.) . — Vancouver, Canada: Leanpub, 2013.
  • Williams, James. (англ.) . — Upper Saddle River, NJ: Addison-Wesley , 2012. — P. —120, 123—131, 136, 140—142. — ISBN 0321767365 .

Примечания

  2. — 2024.
  3. — 2006.
  5. A.M. Manferdini, F. Remondino. (англ.) // International Journal of Heritage in the Digital Era. — 2012. — Vol. 1 , no. 1 . (недоступная ссылка)
  6. . benchung.com. Дата обращения: 31 июля 2015. Архивировано из 22 июня 2015 года.
  7. Habrahabr.ru. Дата обращения: 31 июля 2015. 7 августа 2016 года.

Ссылки

Источник —

brigid
  • 2020-06-28
  • 1
  • Tags:

Same as Three.js

The title for the last searches