Inizia con WebGL usando tre.js

Feb 2, 2026
Come si fa
Web developer creating 3D shape graphics

Webgl. , che è ampiamente supportato su tutti i browser moderni, consente di lavorare con grafica 3D accelerata hardware in Javascript. , aprendo una vasta gamma di possibilità per app e giochi basati su browser - basta controllare questi 20 incredibili esempi di WebGL in azione , per la prova.

WebGL stesso è piuttosto basso livello, ed è improbabile che ti consigliamo di lavorarci nella sua forma di vaniglia. Ci sono una gamma di biblioteche e anche i motori di gioco disponibili per fornire funzionalità di livello superiore.

In questo tutorial ti mostrerò Come fare un'app o sito che utilizza WebGL in combinazione con tre.js. , che è una libreria aperta gratuita che fornisce astrazione di WebGL.

01. Ottieni tre.js.

Dovrai iniziare accogliendo tre.js. . Una volta che hai l'ultima build, posiziona tre.js nella tua cartella del progetto. Lo aggiungeremo come script alla nostra pagina come qualsiasi altra libreria JavaScript. Metteremo il nostro codice in un file JavaScript separato. 

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta chater = utf-8 & gt;
  & lt; Titolo & GT; per iniziare con tre.js & lt; / Titolo & GT;
  & lt; / head & gt;
  & lt; body style = "margine: 0;" & gt;
  & lt; script src = "tre.js" & gt; & lt; / script & gt;
  & lt; script src = "demo.js" & gt; & lt; / script & gt;
  & lt; / corpo e GT;
& lt; / html & gt;

02. Imposta la scena

Abbiamo bisogno di tre cose per iniziare con WebGL: una scena, una macchina fotografica e un rendering. Una scena è dove posizioniamo oggetti da visualizzare da tre.js. Una fotocamera è il punto di vista da cui li vedremo. Il rendering porta i due insieme e disegna lo schermo di conseguenza. Una volta che abbiamo istituito, aggiungiamo il rendering al documento. 

 var width = window.innerwidth;
var altezza = finestra.innerheight;
Var seghentangle = 45;
Var NearClipping = 0.1;
Var Farclipping = 9999;
var scene = nuovo tre.scene ();
videocamera VAR = nuovo tre.perspectiveCamera (Viewngle, Larghezza / Altezza, NearClipping, Farclipping);
var rendering = nuovo tre.webglrenderor ();
renderer.sesize (larghezza, altezza);
document.body.appendchild (rendering.domelement);

03. Creare un ciclo

Successivamente, abbiamo bisogno di creare un anello per rendere effettivamente la nostra scena. Lo facciamo usando il rendering.render () funzione, ma la parte chiave è di usare ricorsivamente RichiestaNationFrame () , che è una funzione integrata che consente al browser di richiedere un altro frame quando è pronto a disegnarne uno. Usando RichiestaNationFrame () è più facile e si traduce in animazione più fluida del tentativo di disegnare il disegno di telai te stesso. 

 Funzione animata () {
  richiesta di requestanimationframe (animato);
  renderer.Render (scena, fotocamera);
}
animato ();

04. Creare oggetti di base

Ora possiamo iniziare ad aggiungere alcuni oggetti alla nostra scena. Possiamo farlo creando oggetti mesh e aggiungendoli ad esso. Una rete è composta da geometria (la forma dell'oggetto) e un materiale (il colore o la trama utilizzati per dipingerlo). Creeremo alcuni oggetti di base definendo tre geometrie diverse e assegnando loro diversi materiali di colore. 

 var cubegeometry = nuovo tre.Boxgeometry (1, 1, 1);
var cubmateriale = nuovo tre.MeshlashlabertMateriale ({colore: 0xFF0000});
var cube = new tre.mesh (cubegeometry, cubémateriale);
var conegeometry = nuovo tre.conegeometry (0,5, 1, 4);
var conmateriale = nuovo tre.MeshlashlabertMateriale ({Colore: 0x00FF00});
var cono = nuovo tre.mesh (conegeometry, conmateriale);
var sferageometry = nuovo tre.spheregeometry (0,5, 8, 8);
var sferemateriale = nuovo tre.MeshlashlabertMateriale ({colore: 0x0000FF});
var sfera = nuovo tre.mesh (sferageometria, sferemateriale);

05. Specificare una posizione

Per impostazione predefinita, gli oggetti vengono aggiunti all'origine (x = 0, y = 0, z = 0) della scena, che è anche dove è anche la nostra fotocamera, quindi dovremo specificare anche una posizione per loro. Quindi siamo pronti ad aggiungere le maglie alla nostra scena, il che significherà che vengono automaticamente resi nel animare() ciclo continuo. 

 cubo.position.x = -2
cubo.position.z = -5;
cono.position.z = -5;
sfera.position.z = -5;
sfera.position.x = 2;
cubo.position.z = -5;
scena.add (cubo);
scena.add (cono);
scena.add (sfera);

06. Aggiungi una fonte di luce

Se vedi la tua pagina ora, troverai che le cose guardino un po 'piatte. Non c'è illuminazione applicata agli oggetti, quindi sono colori primari solidi e sembrano bidimensionali. Per risolvere questo problema, dobbiamo passare da Mashbasicmaterial. a un materiale che supporta l'illuminazione; Useremo Meshlambertmateriale. . Dobbiamo anche aggiungere una sorgente luminosa alla scena. 

 VAR LIGHT = NUOVO TRE THRE. POINTOCOLO (0xFFFFFFFFFFFFFFFFFFFFFFFS;
light.position.x = 0;
light.position.y = 10;
light.position.z = 0;
scena.add (luce);

07. Sposta la fonte

Ora ci stiamo arrivando! Dovresti vedere cosa sono evidenti evidentemente oggetti tridimensionali sulla tua pagina. Quello che non abbiamo ancora fatto è sfruttato appieno il animare() funzione. Facciamo qualche cambiamento per far muovere la nostra sorgente luminosa in un movimento circolare sopra gli oggetti. 

 Var Lightngle = 0;
funzione animata () {
  Lightngle + = 5;
  se (Lightngle & Gt; 360) {Lightngle = 0;};
  light.position.x = 5 * math.cos (Lightngle * math.pi / 180);
  light.position.z = 5 * math.sin (Lightngle * math.pi / 180);
  richiesta di requestanimationframe (animato);
  renderer.Render (scena, fotocamera); }

08. Aggiungi texture.

In pratica, probabilmente non vogliamo che i nostri oggetti siano colori piatti. Sarebbe più tipico applicare un po 'di texturing a loro da un file. Possiamo farlo usando Tre.Textureloader () . Cambiamo come viene creato il nostro oggetto cono per utilizzare una trama che abbiamo caricato da un file. La funzione viene chiamata quando il file è caricato.

  • Dove trovare trame gratuite per progetti 3D 
 VAR Textureloader = nuovo tre.Textureloader ();
textureloader.load ("./ grass_texture.jpg", texture = & gt; {
  var conegeometry = nuovo tre.conegeometry (0,5, 1, 4);
  var conmateriale = nuovo tre.MeshlashlabertMateriale ({mappa: Texture});
  var cono = nuovo tre.mesh (conegeometry, conmateriale);
  cono.position.z = -5;
  scena.add (cono);
  },
);

09. Rendilo naturale

Le cose stanno guardando meglio, ma qualcosa ancora non è ancora naturale. La trama sembra molto piatta e non risponde all'illuminazione. Possiamo risolvere questo attraverso l'uso della mappatura dell'urt, che ci consente di utilizzare parti luminose e scure di un'immagine per simulare la textura sulla superficie di un oggetto. Proviamo questo con una trama diversa sulla sfera. Camberemo il materiale a MeshphongMaterial. , che ci consente di specificare a Bumpmap. attributo. 

 VAR Textureloader = nuovo tre.Textureloader ();
textureloader.load ("./ bumb_map.jpg", texture = & gt; {
  var sferageometry = nuovo tre.spheregeometry (0,5, 8, 8);
  var sheremateriale = nuovo tre.meshphongMateriale ({Colore: 0x0000F, BumpMap: Texture, Brondscale: 1.0});
  var sfera = new tre.mesh (sferageometria, sferemateriale);
  sfera.position.z = -5;
  sfera.position.x = 2;
  scena.add (sfera);
  },
);

10. Aggiungi i controlli

Come tocco finale, dare all'utente un piccolo controllo sulla scena. Per aggiungere la possibilità di andare in giro, c'è una biblioteca in più che spedisce con tre.js che lo rende incredibilmente facile da fare proprio questo. Assicurati di estrarre orbitcontrols.js dal pacchetto tre.js nella directory del progetto e includilo nella tua pagina. Questa è una delle diverse librerie di controllo che spediscono con tre.js per soddisfare gli stili comuni del controllo della telecamera. 

 & lt; script src = "orbitcontrols.js" & gt; & lt; / script & gt;

11. Applicare alla fotocamera

Ora tutto ciò che dobbiamo fare è creare un Tre.orbitcontrols. oggetto e applicalo alla nostra fotocamera. La Biblioteca si prenderà cura del resto per te: non dovrai ascoltare i click, i movimenti del mouse e così via. Potresti anche voler spostare i tuoi oggetti nel punto di origine e sfalspare la fotocamera in modo che possa essere posizionato ordinatamente attorno agli oggetti.

Con quello, abbiamo finito con la nostra introduzione. Dovresti avere tre oggetti con diversi stili di texture, un'illuminazione dinamica e una fotocamera controllata dall'utente con cui giocare. 

 fotocamera.position.z = 10;
Var Controls = New Tre.OrbitControls (fotocamera);

Questo articolo includeva in emissione 268 di Web Designer, la rivista Creative Web Design - offre esercitazioni di esperti, tendenze all'avanguardia e risorse gratuite. Iscriviti al web designer ora.

Questo mi piaceva? Prova questi:

  • Guida completa di un coder per API
  • Come sciogliere un oggetto 3D con tre.js
  • Potenza un blog usando l'API di WordPress

Come si fa - Articoli più popolari

Come creare un'app Apple Watch

Come si fa Feb 2, 2026

(Immagine di immagine: futuro) Quando Apple ha lanciato per la prima volta il suo smartwatch al pubblico, tutti hanno..

Creare i raggi di Dio in V-ray

Come si fa Feb 2, 2026

Nella fotografia del mondo reale, i raggi di luce sono al loro più visibili quando hanno una superficie per rimbalzare, come pol..

10 Suggerimenti per il mastering delle foto di Apple Photos

Come si fa Feb 2, 2026

L'app MacOS Photos è iniziata la vita come IPhoto: un'app di consumo per la gestione delle fotografie digitali, con alcuni strum..

Cosa c'è di nuovo in Angular 4?

Come si fa Feb 2, 2026

Pagina 1 di 2: Passi 1-10. Passi 1-10. P..

Creare un cinearafo con Photoshop in 60 secondi

Come si fa Feb 2, 2026

Vorrei poter prendere una nuova abilità ma non riesco a trovare il tempo di sederti e imparare? Adobe's. Fallo ora playlist potrebbe essere proprio quello che stai cercando. P..

Creare un effetto acqua di versamento nel realflow

Come si fa Feb 2, 2026

Questo tutorial ti mostra come simulare un effetto di versamento liquido. Ci sono vari software e plugin che puoi utilizzare per ..

Come aggiungere dati ai tuoi disegni di schizzo

Come si fa Feb 2, 2026

Il design dello schermo è arrivato molto lontano negli ultimi anni. Diamine, non avremmo nemmeno detto "design dello schermo" al..

Crea un personaggio 3D peloso da zero

Come si fa Feb 2, 2026

La creazione di un personaggio di pelliccia può essere facile, ma se vuoi fare un pezzo di peloso davvero attraente 3D A..

Categorie