Costruiamo un Cilindro con HTML5 Canvas e WebGL Three.js

Pubblico un piccolo esempio di utilizzo di WebGL mediante la libreria Three.js. Viene costruito un Cilindro istanziando un oggetto CylinderGeometry e definendo i vari parametri della geometria:

  • raggio superiore e inferiore;
  • l’altezza;
  • il livello di dettaglio tramite segmentsRadius e parametri segmentsHeight.

A corredo mediante la libreria dat.gui fornisco un interfaccia per modificare tali parametri e quindi le dimensioni del cilindro.

Aumentare la segmentsWidth e segmentsHeight produrrà un cilindro più perfetto, ma può ridurre le prestazioni.

Diminuendo la segmentsWidth e segmentsHeight verrà prodotto un cilindro meno perfetto e aumentando le prestazioni.

Link all’esempio: 

[like_to_read]http://michelepierri.it/examples/cylinder/[/like_to_read]

Costruiamo un Cilindro con HTML5 Canvas e WebGL Three.js
Screenshot dello script

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell’universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.