| Three.js | |
|---|---|
| Képernyőképek a Three.js példákról | |
| Típusú | Alkalmazásprogramozási felület , JavaScript könyvtár és függvénytár |
| Beírva | JavaScript [2] |
| Első kiadás | 2013. július 3 |
| legújabb verzió | 142 ( 2022. június 28. ) [1] |
| Engedély | MIT engedély [3] |
| Weboldal | threejs.org |
| Médiafájlok a Wikimedia Commons oldalon | |
A Three.js egy könnyű, böngészők közötti JavaScript-könyvtár , amely animált 3D számítógépes grafikák létrehozására és megjelenítésére szolgál a webalkalmazások fejlesztése során . A Three.js szkriptek HTML5 CANVAS , SVG vagy WebGL elemekkel együtt használhatók . A forráskód a GitHub adattárában található .
A Three.js lehetővé teszi GPU -gyorsítású 3D grafikák létrehozását a webhely részeként a JavaScript nyelv használatával anélkül, hogy saját böngészőbővítményekre lenne szüksége. Ez a WebGL technológia használatának köszönhető . Támogatja a 3D modelleket Collada [4] formátumban .
A Three.js könyvtár minden olyan böngészőben működik, amely támogatja a WebGL technológiát; a "clean" elemes felülettel is működhet CANVAS, így sok mobileszközön működik. A Three.js-t az MIT licence alatt terjesztik .
A Three.js könyvtár egyetlen JavaScript-fájlban érkezik, amely az oldalon bárhol megtalálható.
< script src = "js/three.min.js" >< /script>A következő példa egy jelenetet hoz létre, amelyhez egy kamerát és egy kockát ad hozzá. Egy <canvas> renderer jön létre a jelenethez, és egy nézetablakot ad hozzá a document.body fájlhoz. A jelenet betöltése után a kocka forogni kezd az X és Y tengelyek mentén.
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Az első három.js alkalmazásom </ title > < style > body { margin : 0 ; } </ style > < script src = "http://threejs.org/build/three.min.js" ></ script > </ head > < body > < script > const scene = new HÁROM . jelenet (); const kamera = új HÁROM . PerspectiveCamera ( 75 , ablak . innerWidth / window . innerHeight , 0.1 , 1000 ); const renderer = new HÁROM . WebGLRenderer (); renderer . setSize ( ablak . innerWidth , window . innerHeight ); dokumentumot . test . appendChild ( renderer . domElement ); const geometria = új HÁROM . BoxGeometry (); const anyag = új HÁROM . MeshBasicMaterial ( { szín : 0x00ff00 } ); const kocka = új HÁROM . Háló ( geometria , anyag ); jelenet . hozzá ( kocka ); kamera . pozíció . z = 5 ; function animate () { requestAnimationFrame ( animáció ); kocka . forgatás . x += 0,01 ; kocka . forgatás . y += 0,01 ; renderer . render ( jelenet , kamera ); }; animálni (); </ script > </ body > </ html >A Three.js jelenetszerkesztőjének fejlesztése gyerekcipőben jár. Így akár primitív 3D-s tartalom létrehozásához programkód írása szükséges. A dokumentáció és a tanulságok időben történő frissítésének hiányát a motor hiányosságainak is nevezik. [5] [6]