| Three.js | |
|---|---|
| Skærmbilleder af Three.js-eksempler | |
| Type | Application Programming Interface , JavaScript -bibliotek og funktionsbibliotek |
| Skrevet i | JavaScript [2] |
| Første udgave | 3. juli 2013 |
| nyeste version | 142 ( 28. juni 2022 ) [1] |
| Licens | MIT-licens [3] |
| Internet side | threejs.org |
| Mediefiler på Wikimedia Commons | |
Three.js er et letvægts JavaScript-bibliotek på tværs af browsere , der bruges til at skabe og vise animeret 3D-computergrafik i udvikling af webapplikationer . Three.js scripts kan bruges sammen med et HTML5 , SVG eller WebGL element . Kildekoden er placeret i GitHub -lageret . CANVAS
Three.js giver dig mulighed for at skabe GPU -accelereret 3D-grafik ved hjælp af JavaScript -sproget som en del af webstedet uden behov for proprietære browser-plugins. Dette er muligt på grund af brugen af WebGL- teknologi . Understøtter 3D-modeller i Collada [4] -format .
Three.js-biblioteket fungerer i alle browsere, der understøtter WebGL-teknologi; kan også arbejde med det "rene" element interface CANVAS, så det virker på mange mobile enheder. Three.js distribueres under MIT-licensen .
Three.js-biblioteket kommer i en enkelt JavaScript-fil, der kan inkluderes hvor som helst på siden.
< script src = "js/three.min.js" >< /script>Følgende eksempel opretter en scene, føjer et kamera og en terning til det. En <canvas>-renderer oprettes til scenen, og en viewport til den føjes til document.body. Efter indlæsning af scenen begynder kuben at rotere langs X- og Y-akserne.
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Min første 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 kamera = ny TRE . PerspectiveCamera ( 75 , vindue . indreBredde / vindue . indre Højde , 0,1 , 1000 ); const renderer = ny TRE . WebGLRenderer (); renderer . sætStørrelse ( vindue . indreBredde , vindue . indre Højde ); dokument . krop . appendChild ( renderer . domElement ); const geometri = nye TRE . BoxGeometri (); const materiale = ny TRE . MeshBasicMaterial ( { farve : 0x00ff00 } ); const kube = ny TRE . Mesh ( geometri , materiale ); scene . tilføje ( terning ); kamera . stilling . z = 5 ; function animate () { requestAnimationFrame ( animate ); terning . rotation . x += 0,01 ; terning . rotation . y += 0,01 ; renderer . render ( scene , kamera ); }; animere (); </ script > </ body > </ html >Udviklingen af sceneeditoren til Three.js er i sin vorden. Således kræver skabelsen af selv primitivt 3D-indhold skrivning af programkode. Manglen på rettidige opdateringer af dokumentation og lektioner kaldes også motormangler. [5] [6]