three.js
Libreria JavaScript per formati di file 3D
API JavaScript open source per la lettura, la scrittura e il rendering di formati di file WebGL, FBX, Collada e OBJ tramite la libreria 3D gratuita.
three.js è una libreria 3d JavaScript pura e facile da usare open source che offre agli sviluppatori di software la possibilità di eseguire il rendering di file WebGL. La libreria three.js offre caricatori per numerosi formati di file come FBX, Collada e OBJ, ma il formato consigliato per l'importazione e l'esportazione dei dati è glTF. La cosa grandiosa del formato di file glTF è che è molto compatto e può essere facilmente trasmesso e si carica anche molto velocemente.
La libreria supporta diverse importanti funzionalità relative ai modelli 3D come la creazione di una scena, il caricamento di modelli 3D, la creazione di testo, il disegno di linee, l'impostazione di una telecamera, la creazione di un cubo geometrico, l'aggiunta di un cubo alla scena, il rendering della scena, l'aggiunta di viewport all'elemento, e tanti altri. Ci sono diverse fotocamere utilizzate nella libreria three.js.
A prima vista
Una panoramica delle funzionalità di tre.js.
- Crea scene 3D
- Caricamento di modelli 3D
- Tracciare linee
- Lettura/Scrittura FBX
- Leggi/Scrivi Collada
- Converti scene 3D
- Esporta i dati in glTF
- manipolazione dei componenti
- gestire le trame
three.js supporta i formati di file 3D più diffusi elencati di seguito.
Indipendenza dalla piattaforma
three.js può essere eseguito su qualsiasi bundler JavaScript moderno, la scelta più popolare è il webpack.
- JavaScript
Guida introduttiva a three.js
Il modo più semplice per installare tre.js è usare npm. Si prega di utilizzare il comando seguente per un'installazione senza problemi.
Installa tre.js tramite NPM
npm install --save three Crea scena usando JavaScript
La libreria open source three.js ha fornito supporto per la creazione di una scena 3D per la rotazione di un cubo all'interno della propria applicazione JavaScript. Per visualizzare qualsiasi cosa con tre.js abbiamo bisogno di una scena, una telecamera e un renderer. Puoi utilizzare diverse telecamere e il loro attributo per completare la scena. Successivamente, puoi utilizzare un'istanza di renderer e impostare la dimensione alla quale desideriamo che visualizzi la nostra app. È possibile mantenere la risoluzione inferiore o superiore. Infine, aggiungi l'elemento renderer (<canvas>) al tuo documento HTML. Puoi facilmente creare un cubo usando BoxGeometry e usando il materiale per colorarlo. Dopodiché, hai bisogno di una Mesh che possa essere inserita nella scena e spostata secondo le tue esigenze.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Maglia that can be inserted into the scene and moved according to your need.
Caricamento di modelli 3D tramite JavaScript
La libreria open source three.js consente ai programmatori di software di caricare modelli 3D all'interno della propria applicazione con solo un paio di righe di codice JavaScript. I modelli 3D sono disponibili in centinaia di formati di file. Ogni modello ha scopi diversi, caratteristiche varie e complessità variabile. Innanzitutto, devi disporre di un caricatore e, successivamente, sarai in grado di caricare la scena.
Disegna linee in un diagramma
La libreria open source three.js ha fornito supporto per disegnare linee o cerchi all'interno della propria applicazione JavaScript. Per cominciare, dobbiamo configurare il renderer, la scena e la fotocamera. Successivamente, è necessario definire il materiale e utilizzare LineBasicMaterial o LineDashedMaterial. Dopo il materiale, avremo bisogno della geometria con alcuni vertici. Le linee vengono tracciate tra ogni coppia consecutiva di vertici.
