Share
Fin dalla sua introduzione, la grafica 3D nel browser è stata un argomento molto popolare. Ma se dovessi creare le tue app utilizzando la vecchia WebGL normale, ci vorrebbe molto tempo. Ma ora abbiamo alcune librerie piuttosto utili che possiamo sfruttare, come Three.js. Quindi in questa serie ti mostrerò come creare incredibili esperienze 3D per il browser.
Mi aspetto che tu abbia una conoscenza di base dello spazio 3D prima di iniziare a leggere questo tutorial, poiché non spiegherò cose come coordinate, vettori, ecc..
Inizieremo con il codice della parte precedente di questa serie. Inoltre, prendi le risorse che ho fornito e inseriscile nella stessa cartella della tua app. Ora, dal momento che utilizzeremo le immagini qui, dovrai mettere la tua app su un server statico (potrebbe essere locale), perché, a meno che non avvii il browser con l'accesso ai file abilitato dai file (ad esempio, usando il --permettere-file-access-from-file flag in Chrome) CORS non ti permetterà di caricarli dal file. Questo è tutto ciò che devi fare prima di procedere.
Se ti sei mai annoiato così tanto da creare qualcosa usando puro OpenGL, probabilmente ti ricordi quanto sia doloroso caricare una texture. Fortunatamente, Three.js ha una bella funzione che carica e imposta la trama per noi. Aggiungi questa riga prima della definizione del materiale del nostro cubo:
Accentsconagua
var cubeTexture = THREE.ImageUtils.loadTexture ('./ box.png'); È tutto ciò che devi fare per caricare la tua texture.
In un'app per il mondo reale dovresti precaricare la texture come qualsiasi immagine normale e mostrare agli utenti una barra di caricamento di fantasia per far loro sapere che stai caricando (Three.js userà l'immagine della cache quindi).
Ora applicheremo la texture al nostro cubo. Anche questo è facile, devi solo sostituire la definizione del colore nel materiale del cubo in modo che assomigli a questo:
var cubeMaterial = new THREE.MeshLambertMaterial (map: cubeTexture);
Il carta geografica l'attributo imposta la trama. Ora puoi aprire il browser e dovresti vedere un cubo rotante e strutturato:
Puoi anche colorare la trama, basta aggiungere il colore definizione nelle opzioni del materiale, come quella:
var cubeMaterial = new THREE.MeshLambertMaterial (map: cubeTexture, color: 0x28c0ec);
E ora il cubo diventa blu:
In questo modo puoi avere più oggetti diversi con la stessa texture se cambia solo il colore.
Puoi impostare diversi materiali per ogni faccia del cubo. Per ottenere ciò, è necessario modificare la definizione dell'intero materiale. In primo luogo, definire il materiale array. Ogni elemento dell'array corrisponderà al materiale di una faccia. Vanno in questo ordine: a destra, a sinistra, in alto, in basso, davanti e dietro:
var materials = []; materials.push (new THREE.MeshLambertMaterial (map: cubeTexture, color: 0xff0000)); // right face materials.push (new THREE.MeshLambertMaterial (map: cubeTexture, color: 0xffff00)); // left face materials.push (new THREE.MeshLambertMaterial (map: cubeTexture, color: 0xffffff)); // top face materials.push (new THREE.MeshLambertMaterial (map: cubeTexture, color: 0x00ffff)); // bottom face materials.push (new THREE.MeshLambertMaterial (map: cubeTexture, color: 0x0000ff)); // front face materials.push (new THREE.MeshLambertMaterial (map: cubeTexture, color: 0xff00ff)); // fronte posteriore
Come puoi vedere, ogni faccia ha il proprio materiale, quindi puoi impostare trame, colori e altri attributi diversi per ognuno. Successivamente, cambia il tipo di materiale del cubo in THREE.MeshFaceMaterial:
var cubeMaterial = new THREE.MeshFaceMaterial (materiali);
Devi solo passare il materiale array come parametro. Nel browser dovresti vedere che ogni lato del cubo ha un colore diverso:
Supponiamo che tu voglia creare un effetto di fiocchi di neve rotanti nella tua app. Se si renderizza ogni fiocco di neve come una mesh si otterrà un fps molto basso. È qui che le particelle entrano in gioco. Sono molto meno complicati e disegnarli come un intero sistema di particelle li rende veramente efficienti.
Inizia con la creazione di una geometria per le nostre particelle:
particelle var = new THREE.Geometry;
THREE.Geometry è un oggetto di geometria di base, senza alcuna forma. Ora dobbiamo definire la posizione di ogni particella nel sistema. Lascia che sia completamente casuale:
per (var p = 0; p < 2000; p++) var particle = new THREE.Vector3(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500 - 250); particles.vertices.push(particle);
Questo ciclo creerà 2000 particelle posizionate casualmente e le metterà tutte nella geometria. Successivamente, devi definire il materiale delle particelle:
var particleMaterial = new THREE.ParticleBasicMaterial (color: 0xeeeeee, size: 2);
Si noti che stiamo usando THREE.ParticleBasicMaterial, che è solo per particelle. Nelle opzioni definiamo solo il colore e la dimensione di ogni particella. Infine, puoi creare il sistema di particelle e aggiungerlo alla scena:
var particleSystem = new THREE.ParticleSystem (particelle, particleMaterial); scene.add (Particlesystem);
Ora, per rendere la scena un aspetto migliore, ruotiamo le particelle nella direzione opposta a quella in cui il cubo sta ruotando (cambia il rendere funzione per assomigliare a questo):
function render () requestAnimationFrame (render); var delta = clock.getDelta (); cube.rotation.y - = delta; particleSystem.rotation.y + = delta; renderer.render (scene, camera);
Abbiamo spostato il clock.getDelta alla variabile, perché se la usassi in questo modo:
cube.rotation.y - = clock.getDelta (); particleSystem.rotation.y + = clock.getDelta ();
Il sistema di particelle non ruoterebbe, perché la seconda chiamata restituirà un numero vicino allo zero (ricorda che sta ottenendo il tempo dall'ultima chiamata).
Ora apri il browser e dovresti vedere un cubo e le particelle ruotanti:
Combiniamo le due cose apprese in questo tutorial e trasformiamo quei brutti quadrati bianchi in veri fiocchi di neve. Innanzitutto, carica la trama del fiocco di neve:
var particleTexture = THREE.ImageUtils.loadTexture ('./ snowflake.png'); Ora, cambia il materiale delle particelle per usare la trama. Inoltre, attiva la trasparenza e ingrandisci le particelle in modo che possiamo vedere la forma:
var particleMaterial = new THREE.ParticleBasicMaterial (map: particleTexture, transparent: true, size: 5);
Se apri il browser dovresti vedere dei bei fiocchi di neve che scorrono attorno al cubo:
L'effetto fumo è abbastanza facile da ottenere e sembra bello. Inizia creando la geometria, proprio come con i fiocchi di neve:
var smokeParticles = new THREE.Geometry; per (var i = 0; i < 300; i++) var particle = new THREE.Vector3(Math.random() * 32 - 16, Math.random() * 230, Math.random() * 32 - 16); smokeParticles.vertices.push(particle);
L'unica differenza qui è che stiamo scegliendo la posizione da un prisma rettangolare con dimensioni 32x32x230. Ora, carichiamo la trama e definiamo il materiale:
var smokeTexture = THREE.ImageUtils.loadTexture ('./ smoke.png'); var smokeMaterial = new THREE.ParticleBasicMaterial (map: smokeTexture, transparent: true, blend: THREE.AdditiveBlending, size: 50, color: 0x111111); Nella definizione materiale, c'è un mescolanza opzione. Indica al renderer come dovrebbe rendere un oggetto su un altro. Con THREE.AdditiveBlending i valori di sovrapposizione dei colori saranno aggiunti l'uno all'altro e si otterrà un fumo più luminoso nelle aree con maggiore densità di particelle. Abbiamo anche impostato il colore quasi nero, quindi il fumo sembra più naturale.
Infine, crea il sistema di particelle, spostalo un po 'verso sinistra e aggiungilo alla scena:
var smoke = new THREE.ParticleSystem (smokeParticles, smokeMaterial); smoke.sortParticles = true; smoke.position.x = -150; scene.add (fumi);
Devi anche impostare smoke.sortParticles al vero Quando è falso, lo sfondo dello sprite può essere disegnato come nero. Se apri il browser dovresti vedere un altro pilastro di fumo accanto al cubo:
Per animare il fumo dobbiamo fare un loop su tutte le particelle e spostarle un po '. Aggiungi questo codice al rendere funzione:
var particleCount = smokeParticles.vertices.length; while (particleCount--) var particle = smokeParticles.vertices [particleCount]; particle.y + = delta * 50; if (particle.y> = 230) particle.y = Math.random () * 16; particle.x = Math.random () * 32 - 16; particle.z = Math.random () * 32 - 16; smokeParticles .__ dirtyVertices = true;
Nel ciclo stiamo aggiungendo delta * 50 alla posizione y della particella. Quindi controlliamo se la particella è superiore a 230, in tal caso selezioniamo casualmente la sua nuova posizione da qualche parte nella parte inferiore del pilastro del fumo. Infine, la cosa più importante: l'impostazione della geometria __dirtyVertices flag su true.
Per migliorare le prestazioni, Three.js memorizza nella cache gli oggetti per evitare di costruire tutte le chiamate WebGL di nuovo ogni fotogramma, quindi se cambiamo qualcosa nella geometria dell'oggetto dobbiamo far sapere al renderer che è cambiato. Fondamentalmente, il
__dirtyVerticesla bandiera raggiungerà solo l'elemento.
Se apri il browser ora dovresti vedere un fumo animato senza problemi accanto al cubo.
In questo tutorial hai imparato come usare trame e particelle. Come prima, non aver paura di sperimentare un po 'con la tua app. Se hai problemi dai un'occhiata alla documentazione. Nel prossimo articolo ti insegnerò come caricare i modelli e animarli.
