Three.js

Three.js
Screen captures of Three.js examples
ТипБібліотека JavaScript
АвторRicardo Cabello (Mr.doob)
РозробникиThree.js Authors[1]
Стабільний випускr110 (30 жовтня 2019; 5 років тому (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. [Архівовано 2010-01-13 у Wayback Machine.]
  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/wiki/Three.js