Three.js

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку
Three.js
Screen captures of Three.js examples
Тип Бібліотека JavaScript
Автор Ricardo Cabello (Mr.doob)
Розробники Three.js Authors[1]
Стабільний випуск r110 (30 жовтня 2019; 4 роки тому (2019-10-30))
Операційна система кросплатформова програма
Мова програмування JavaScript
Стан розробки Active
Ліцензія MIT[1]
Репозиторій github.com/mrdoob/three.js
Вебсайт threejs.org

Three.js — це бібліотека JavaScript з кросбраузерністю та інтерфейсом прикладного програмування (API), що використовується для створення та відображення анімованої 3D-комп'ютерної графіки у веббраузері. Three.js скрипти можуть використовуватися спільно з елементом HTML5 Canvas, SVG або WebGL. Вихідний код бібліотеки Three.js розміщений у сховищі на GitHub.

Огляд[ред. | ред. код]

Three.js дозволяє створювати пришвидшену на GPU, 3D-анімацію, використовуючи мову JavaScript як частину вебсайту, не покладаючись на власні плагіни браузера. Це можливо завдяки появі WebGL.[2]

Створення складних тривимірних комп'ютерних анімації може бути дещо простішим завдяки бібліотекам високого рівня, таких як Three.js або GLGE, SceneJS, PhiloGL, а також ряд інших. Адже ці бібліотеки відображаються в браузері без зусиль, необхідних для традиційного автономного додатку чи плагіна.[3]

Історія[ред. | ред. код]

Рікардо Кабелло — автор бібліотеки Three.js вперше презентував її у квітні 2010 року. Витоки бібліотеки можна простежити за його причетністю до демосцени на початку 2000-х. Спочатку, код був розроблений у ActionScript, а пізніше у 2009 році перенесений у JavaScript .Внески Cabello включають дизайн API, CanvasRenderer, SVGRenderer і відповідають за об'єднання зобов'язань різних учасників проекту.

Бранислав Улічний розпочав роботу з Three.js у 2010 році після опублікування кількох демонстрацій WebGL на своєму власному сайті. Він працював на тим, щоб можливості рендерінгу WebGL у Three.js перевищували можливості CanvasRenderer або SVGRenderer.[4] Його основними внесками, як правило, вважаються шейдери та постобробки.

Незабаром після введення WebGL 1.0 на Firefox 4 у березні 2011 року Джошуа Коо приєднався до Бранислава Уличного і Рікардо Кабелло. Свою першу демо-версію Three.js для 3D-тексту він створив у вересні 2011 року.[4] Його внески часто стосуються геометрії.

Існує всього понад 900 учасників.[4]

Особливості[ред. | ред. код]

Three.js включає такі функції:[5]

  • Рендерери: Canvas, SVG або WebGL
  • Вміст: додавання і видалення об'єктів в режимі реального часу; туман
  • Камери: перспективна або ортографічна
  • Анімація: каркаси, пряма кінематика, інверсна кінематика, морфінг, ключові кадри
  • Джерела світла: зовнішнє, спрямование, точкове; тіні: кинуті і отримані
  • Шейдери: повний доступ до всіх OpenGL-шейдерів(GLSL)
  • Об'єкти: мережі, частинки, спрайт, лінії, скелетна анімація і інше
  • Геометрія: площина, куб, сфера, тор, 3D текст і інше;
  • Data loaders: binary, image, JSON and scene
  • Завантажники даних: двійковий, зображення, JSON і сцена
  • Експорт та імпорт: утиліти, що створюють Three.js-сумісні JSON файли з форматів: Blender, openCTM[en], FBX[en], Autodesk 3ds MAX та Obj
  • Підтримка: документація по API бібліотеки знаходиться в процесі постійного розширення і доповнення, є публічний форум і велике співтовариство
  • Приклади: на офіційному сайті можна знайти більше 150 прикладів роботи зі шрифтами, моделями, текстурами, звуком і іншими елементами сцен.

Three.js працює у всіх браузерах, що підтримують WebGL 1.0.

Three.js надається під ліцензією MIT .

Використання[ред. | ред. код]

Бібліотека 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>

Див. також[ред. | ред. код]


Список літератури[ред. | ред. код]

  1. ↑ а б Three.js/license. github.com/mrdoob. Архів оригіналу за 7 травня 2017. Процитовано 20 травня 2012.
  2. ↑ Khronos Releases Final WebGL 1.0 Specification. Khronos Group. 3 березня 2011. Архів оригіналу за 8 листопада 2016. Процитовано 2 червня 2012.
  3. ↑ Crossley, Rob (11 січня 2010). Study: Average dev costs as high as $28m. Intent Media Ltd. Архів оригіналу за 13 січня 2010. Процитовано 2 червня 2012.
  4. ↑ а б в Three.js White Paper. Github.com. 21 травня 2012. Архів оригіналу за 18 лютого 2019. Процитовано 9 травня 2013.
  5. ↑ mrdoob (26 листопада 2012). Features mrdoob/three.js Wiki GitHub. Github.com. Архів оригіналу за 1 червня 2014. Процитовано 9 травня 2013.

Бібліографія[ред. | ред. код]

Чимало підручників з інформатики називають Three.js інструментом, що спрощує процес розробки програм WebGL, а також є простим методом ознайомлення з поняттями WebGL. Це такі підручники як:

Посилання[ред. | ред. код]

Отримано з https://uk.wikipedia.org/w/index.php?title=Three.js&oldid=42017763