Azərbaycanca
Беларускі
Dansk
Deutsch
Española
Français
Indonesia
Italiana
日本語
Қазақ
Lietuvos
Nederlands
Português
Русский
සිංහල
แบบไทย
Türkçe
Українська
中國人
United State
Afrikaans
Three.js — це бібліотека JavaScript з кросбраузерністю та інтерфейсом прикладного програмування (API), що використовується для створення та відображення анімованої 3D-комп'ютерної графіки у веббраузері. Three.js скрипти можуть використовуватися спільно з елементом HTML5 Canvas, SVG або WebGL. Вихідний код бібліотеки Three.js розміщений у сховищі на GitHub.
 | |
 Screen captures of Three.js examples | |
| Тип | Бібліотека JavaScript |
|---|---|
| Автор | Ricardo Cabello (Mr.doob) |
| Розробники | Three.js Authors |
| Стабільний випуск | r110 (30 жовтня 2019) |
| Операційна система | кросплатформова програма |
| Мова програмування | JavaScript |
| Стан розробки | Active |
| Ліцензія | MIT |
| Репозиторій | github.com/mrdoob/three.js |
| Вебсайт | threejs.org |
| |
Огляд
Three.js дозволяє створювати пришвидшену на GPU, 3D-анімацію, використовуючи мову JavaScript як частину вебсайту, не покладаючись на власні плагіни браузера. Це можливо завдяки появі WebGL.
Створення складних тривимірних комп'ютерних анімації може бути дещо простішим завдяки бібліотекам високого рівня, таких як Three.js або GLGE, SceneJS, , а також ряд інших. Адже ці бібліотеки відображаються в браузері без зусиль, необхідних для традиційного автономного додатку чи плагіна.
Історія
— автор бібліотеки Three.js вперше презентував її у квітні 2010 року. Витоки бібліотеки можна простежити за його причетністю до демосцени на початку 2000-х. Спочатку, код був розроблений у ActionScript, а пізніше у 2009 році перенесений у JavaScript .Внески Cabello включають дизайн API, , і відповідають за об'єднання зобов'язань різних учасників проекту.
розпочав роботу з Three.js у 2010 році після опублікування кількох демонстрацій WebGL на своєму власному сайті. Він працював на тим, щоб можливості рендерінгу WebGL у Three.js перевищували можливості CanvasRenderer або SVGRenderer. Його основними внесками, як правило, вважаються шейдери та постобробки.
Незабаром після введення WebGL 1.0 на Firefox 4 у березні 2011 року Джошуа Коо приєднався до Бранислава Уличного і Рікардо Кабелло. Свою першу демо-версію Three.js для 3D-тексту він створив у вересні 2011 року. Його внески часто стосуються геометрії.
Існує всього понад 900 учасників.
Особливості
Three.js включає такі функції:
- Рендерери: Canvas, SVG або WebGL
- Вміст: додавання і видалення об'єктів в режимі реального часу; туман
- Камери: перспективна або ортографічна
- Анімація: каркаси, пряма кінематика, інверсна кінематика, морфінг, ключові кадри
- Джерела світла: зовнішнє, спрямование, точкове; тіні: кинуті і отримані
- Шейдери: повний доступ до всіх OpenGL-шейдерів(GLSL)
- Об'єкти: мережі, частинки, спрайт, лінії, скелетна анімація і інше
- Геометрія: площина, куб, сфера, тор, 3D текст і інше;
- Data loaders: binary, image, JSON and scene
- Завантажники даних: двійковий, зображення, JSON і сцена
- Експорт та імпорт: утиліти, що створюють Three.js-сумісні JSON файли з форматів: Blender, [en], [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> 
Див. також
Список літератури
- . github.com/mrdoob. Архів оригіналу за 7 травня 2017. Процитовано 20 травня 2012.
- . Khronos Group. 3 березня 2011. Архів оригіналу за 8 листопада 2016. Процитовано 2 червня 2012.
- Crossley, Rob (11 січня 2010). . Intent Media Ltd. Архів оригіналу за 13 січня 2010. Процитовано 2 червня 2012.
- . Github.com. 21 травня 2012. Архів оригіналу за 18 лютого 2019. Процитовано 9 травня 2013.
- mrdoob (26 листопада 2012). . Github.com. Архів оригіналу за 1 червня 2014. Процитовано 9 травня 2013.
Бібліографія
Чимало підручників з інформатики називають Three.js інструментом, що спрощує процес розробки програм WebGL, а також є простим методом ознайомлення з поняттями WebGL. Це такі підручники як:
- Dirksen, Jos (2013). . UK: Packt Publishing. ISBN . Архів оригіналу за 8 липня 2014. Процитовано 17 грудня 2019.
- Parisi, Tony (2012). Webgl Up and Running. Sebastopol: Oreilly & Associates Inc. ISBN .
- Seidelin, Jacob (2012). HTML5 games : creating fun with HTML5, CSS3, and WebGL. Chichester, West Sussex, U.K: John Wiley & Sons. с. 412–414. ISBN . — «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 .
- Raasch, Jon (2011). Smashing WebKit. Chichester: Wiley. с. 181, 182, 216. ISBN .
- Williams, James (2013). . Vancouver, Canada: Leanpub. Архів оригіналу за 19 серпня 2018. Процитовано 17 грудня 2019.
Посилання
- Офіційний сайт
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Three js ce biblioteka JavaScript z krosbrauzernistyu ta interfejsom prikladnogo programuvannya API sho vikoristovuyetsya dlya stvorennya ta vidobrazhennya animovanoyi 3D komp yuternoyi grafiki u vebbrauzeri Three js skripti mozhut vikoristovuvatisya spilno z elementom HTML5 Canvas SVG abo WebGL Vihidnij kod biblioteki Three js rozmishenij u shovishi na GitHub Three jsScreen captures of Three js examplesTipBiblioteka JavaScriptAvtorRicardo Cabello Mr doob RozrobnikiThree js AuthorsStabilnij vipuskr110 30 zhovtnya 2019 4 roki tomu 2019 10 30 Operacijna sistemakrosplatformova programaMova programuvannyaJavaScriptStan rozrobkiActiveLicenziyaMITRepozitorijgithub com mrdoob three jsVebsajtthreejs org Mediafajli u VikishovishiOglyadThree js dozvolyaye stvoryuvati prishvidshenu na GPU 3D animaciyu vikoristovuyuchi movu JavaScript yak chastinu vebsajtu ne pokladayuchis na vlasni plagini brauzera Ce mozhlivo zavdyaki poyavi WebGL Stvorennya skladnih trivimirnih komp yuternih animaciyi mozhe buti desho prostishim zavdyaki bibliotekam visokogo rivnya takih yak Three js abo GLGE SceneJS a takozh ryad inshih Adzhe ci biblioteki vidobrazhayutsya v brauzeri bez zusil neobhidnih dlya tradicijnogo avtonomnogo dodatku chi plagina Istoriya avtor biblioteki Three js vpershe prezentuvav yiyi u kvitni 2010 roku Vitoki biblioteki mozhna prostezhiti za jogo prichetnistyu do demosceni na pochatku 2000 h Spochatku kod buv rozroblenij u ActionScript a piznishe u 2009 roci perenesenij u JavaScript Vneski Cabello vklyuchayut dizajn API i vidpovidayut za ob yednannya zobov yazan riznih uchasnikiv proektu rozpochav robotu z Three js u 2010 roci pislya opublikuvannya kilkoh demonstracij WebGL na svoyemu vlasnomu sajti Vin pracyuvav na tim shob mozhlivosti renderingu WebGL u Three js perevishuvali mozhlivosti CanvasRenderer abo SVGRenderer Jogo osnovnimi vneskami yak pravilo vvazhayutsya shejderi ta postobrobki Nezabarom pislya vvedennya WebGL 1 0 na Firefox 4 u berezni 2011 roku Dzhoshua Koo priyednavsya do Branislava Ulichnogo i Rikardo Kabello Svoyu pershu demo versiyu Three js dlya 3D tekstu vin stvoriv u veresni 2011 roku Jogo vneski chasto stosuyutsya geometriyi Isnuye vsogo ponad 900 uchasnikiv OsoblivostiThree js vklyuchaye taki funkciyi Rendereri Canvas SVG abo WebGL Vmist dodavannya i vidalennya ob yektiv v rezhimi realnogo chasu tuman Kameri perspektivna abo ortografichna Animaciya karkasi pryama kinematika inversna kinematika morfing klyuchovi kadri Dzherela svitla zovnishnye spryamovanie tochkove tini kinuti i otrimani Shejderi povnij dostup do vsih OpenGL shejderiv GLSL Ob yekti merezhi chastinki sprajt liniyi skeletna animaciya i inshe Geometriya ploshina kub sfera tor 3D tekst i inshe Data loaders binary image JSON and scene Zavantazhniki danih dvijkovij zobrazhennya JSON i scena Eksport ta import utiliti sho stvoryuyut Three js sumisni JSON fajli z formativ Blender en en Autodesk 3ds MAX ta Obj Pidtrimka dokumentaciya po API biblioteki znahoditsya v procesi postijnogo rozshirennya i dopovnennya ye publichnij forum i velike spivtovaristvo Prikladi na oficijnomu sajti mozhna znajti bilshe 150 prikladiv roboti zi shriftami modelyami teksturami zvukom i inshimi elementami scen Three js pracyuye u vsih brauzerah sho pidtrimuyut WebGL 1 0 Three js nadayetsya pid licenziyeyu MIT VikoristannyaBiblioteka Three js ce yedinij fajl JavaScript Jogo mozhna pidklyuchiti do vebstorinki v bud yakomu misci lt script src js three min js gt lt script gt U nastupnomu prikladi stvoryuyetsya scena na neyi dodayetsya kamera i kub Dlya sceni stvoryuyetsya vizualizator lt canvas gt i vikno pereglyadu dlya nogo dodayetsya v document body Pislya zavantazhennya sceni kub pochinaye obertatisya po osyah X i Y lt DOCTYPE html gt lt html gt lt head gt lt meta charset utf 8 gt lt title gt My first three js app lt title gt lt style gt body margin 0 lt style gt lt script src https cdn jsdelivr net npm three 0 124 0 build three js gt lt script gt lt head gt lt body gt lt script gt 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 lt script gt lt body gt lt html gt Div takozhSpisok literaturi github com mrdoob Arhiv originalu za 7 travnya 2017 Procitovano 20 travnya 2012 Khronos Group 3 bereznya 2011 Arhiv originalu za 8 listopada 2016 Procitovano 2 chervnya 2012 Crossley Rob 11 sichnya 2010 Intent Media Ltd Arhiv originalu za 13 sichnya 2010 Procitovano 2 chervnya 2012 Github com 21 travnya 2012 Arhiv originalu za 18 lyutogo 2019 Procitovano 9 travnya 2013 mrdoob 26 listopada 2012 Github com Arhiv originalu za 1 chervnya 2014 Procitovano 9 travnya 2013 BibliografiyaChimalo pidruchnikiv z informatiki nazivayut Three js instrumentom sho sproshuye proces rozrobki program WebGL a takozh ye prostim metodom oznajomlennya z ponyattyami WebGL Ce taki pidruchniki yak Dirksen Jos 2013 UK Packt Publishing ISBN 9781782166283 Arhiv originalu za 8 lipnya 2014 Procitovano 17 grudnya 2019 Parisi Tony 2012 Webgl Up and Running Sebastopol Oreilly amp Associates Inc ISBN 9781449323578 Seidelin Jacob 2012 HTML5 games creating fun with HTML5 CSS3 and WebGL Chichester West Sussex U K John Wiley amp Sons s 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 s 117 120 123 131 136 140 142 ISBN 0321767365 Raasch Jon 2011 Smashing WebKit Chichester Wiley s 181 182 216 ISBN 1119999138 Williams James 2013 Vancouver Canada Leanpub Arhiv originalu za 19 serpnya 2018 Procitovano 17 grudnya 2019 PosilannyaOficijnij sajt