Three.js
  | |
 Screen captures of Three.js examples | |
| Тип | Бібліотека JavaScript |
|---|---|
| Автор | Ricardo Cabello (Mr.doob) |
| Розробники | Three.js Authors[1] |
| Стабільний випуск | r110 (30 жовтня 2019) |
| Операційна система | кросплатформова програма  |
| Мова програмування | 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>
- ↑ а б Three.js/license. github.com/mrdoob. Архів оригіналу за 7 травня 2017. Процитовано 20 травня 2012.
- ↑ Khronos Releases Final WebGL 1.0 Specification. Khronos Group. 3 березня 2011. Архів оригіналу за 8 листопада 2016. Процитовано 2 червня 2012.
- ↑ Crossley, Rob (11 січня 2010). Study: Average dev costs as high as $28m. Intent Media Ltd. Архів оригіналу за 13 січня 2010. Процитовано 2 червня 2012. [Архівовано 2010-01-13 у Wayback Machine.]
- ↑ а б в Three.js White Paper. Github.com. 21 травня 2012. Архів оригіналу за 18 лютого 2019. Процитовано 9 травня 2013.
- ↑ mrdoob (26 листопада 2012). Features mrdoob/three.js Wiki GitHub. Github.com. Архів оригіналу за 1 червня 2014. Процитовано 9 травня 2013.
Чимало підручників з інформатики називають Three.js інструментом, що спрощує процес розробки програм WebGL, а також є простим методом ознайомлення з поняттями WebGL. Це такі підручники як:
- Dirksen, Jos (2013). Learning Three.js: The JavaScript 3D Library for WebGL. UK: Packt Publishing. ISBN 9781782166283. Архів оригіналу за 8 липня 2014. Процитовано 17 грудня 2019.
- Parisi, Tony (2012). Webgl Up and Running. Sebastopol: Oreilly & Associates Inc. ISBN 9781449323578.
- Seidelin, Jacob (2012). HTML5 games : creating fun with HTML5, CSS3, and WebGL. Chichester, West Sussex, U.K: John Wiley & Sons. с. 412–414. ISBN 1119975085. — «Three.js can make game development easier by taking care of low-level details»
- Williams, James (2012). Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL. Upper Saddle River, NJ: Addison-Wesley. с. 117–120, 123—131, 136, 140—142. ISBN 0321767365.
- Raasch, Jon (2011). Smashing WebKit. Chichester: Wiley. с. 181, 182, 216. ISBN 1119999138.
- Williams, James (2013). Three.js By Example. Vancouver, Canada: Leanpub. Архів оригіналу за 19 серпня 2018. Процитовано 17 грудня 2019.