www.wikidata.uk-ua.nina.az

Three js це бібліотека JavaScript з кросбраузерністю та інтерфейсом прикладного програмування API що використовується дл

Three.js

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

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

Огляд ред.

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

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

Історія ред.

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

Бранислав Улічний розпочав роботу з 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, 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="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>

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


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

  1. ↑ . github.com/mrdoob. Архів оригіналу за 7 травня 2017. Процитовано 20 травня 2012. 
  2. . Khronos Group. 3 березня 2011. Архів оригіналу за 8 листопада 2016. Процитовано 2 червня 2012. 
  3. Crossley, Rob (11 січня 2010). . Intent Media Ltd. Архів оригіналу за 13 січня 2010. Процитовано 2 червня 2012. 
  4. ↑ . Github.com. 21 травня 2012. Архів оригіналу за 18 лютого 2019. Процитовано 9 травня 2013. 
  5. mrdoob (26 листопада 2012). . Github.com. Архів оригіналу за 1 червня 2014. Процитовано 9 травня 2013. 

Бібліографія ред.

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

  • Williams, James (2013). . Vancouver, Canada: Leanpub. Архів оригіналу за 19 серпня 2018. Процитовано 17 грудня 2019. 

Посилання ред.

Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри
Дата публікації:
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 examplesTip Biblioteka JavaScriptAvtor Ricardo Cabello Mr doob Rozrobniki Three js Authors 1 Stabilnij vipusk r110 30 zhovtnya 2019 4 roki tomu 2019 10 30 Operacijna sistema kros platformova programaMova programuvannya JavaScriptStan rozrobki ActiveLicenziya MIT 1 Repozitorij github com mrdoob three jsVebsajt threejs org Three js u Vikishovishi Zmist 1 Oglyad 2 Istoriya 3 Osoblivosti 4 Vikoristannya 5 Div takozh 6 Spisok literaturi 7 Bibliografiya 8 PosilannyaOglyad red Three 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 2 Stvorennya skladnih trivimirnih komp yuternih animaciyi mozhe buti desho prostishim zavdyaki bibliotekam visokogo rivnya takih yak Three js abo GLGE SceneJS PhiloGL a takozh ryad inshih Adzhe ci biblioteki vidobrazhayutsya v brauzeri bez zusil neobhidnih dlya tradicijnogo avtonomnogo dodatku chi plagina 3 Istoriya red Rikardo Kabello 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 CanvasRenderer SVGRenderer i vidpovidayut za ob yednannya zobov yazan riznih uchasnikiv proektu Branislav Ulichnij 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 4 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 4 Jogo vneski chasto stosuyutsya geometriyi Isnuye vsogo ponad 900 uchasnikiv 4 Osoblivosti red Three js vklyuchaye taki funkciyi 5 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 openCTM en FBX 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 Vikoristannya red Biblioteka 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 http threejs org build three min 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 nbsp Div takozh red nbsp Portal Free and open source software Spisok literaturi red a b Three js license github com mrdoob Arhiv originalu za 7 travnya 2017 Procitovano 20 travnya 2012 Khronos Releases Final WebGL 1 0 Specification Khronos Group 3 bereznya 2011 Arhiv originalu za 8 listopada 2016 Procitovano 2 chervnya 2012 Crossley Rob 11 sichnya 2010 Study Average dev costs as high as 28m Intent Media Ltd Arhiv originalu za 13 sichnya 2010 Procitovano 2 chervnya 2012 a b v Three js White Paper Github com 21 travnya 2012 Arhiv originalu za 18 lyutogo 2019 Procitovano 9 travnya 2013 mrdoob 26 listopada 2012 Features mrdoob three js Wiki GitHub Github com Arhiv originalu za 1 chervnya 2014 Procitovano 9 travnya 2013 Bibliografiya red Chimalo 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 Learning Three js The JavaScript 3D Library for WebGL 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 Three js By Example Vancouver Canada Leanpub Arhiv originalu za 19 serpnya 2018 Procitovano 17 grudnya 2019 Posilannya red Oficijnij sajt Otrimano z https uk wikipedia org w index php title Three js amp oldid 39731010