ThreeJS: Casi d'uso di progetti sul Browser (2/4)

Nel precedente articolo ThreeJS: la libreria open source per il 3D sul web, abbiamo visto come le nostre macchine interpretano il 3D internamente. Ora approfondiamo il perché dovremmo utilizzare il 3D, cosa risolve e quali benefici porta.

Web e Mobile oggi

Iniziamo guardando l’immagine sopra. Possiamo osservare alcuni siti web e app che utilizziamo giornalmente come, ad esempio, i social network. Molte di queste app e web app hanno una caratteristica strutturale di design/funzionalità in comune a prescindere dal loro caso d'uso, ovvero sono pensate e progettate per essere mostrate in due dimensioni, altezza e larghezza, concetto figlio dell’idea di pagine che ci portiamo dagli albori di internet.

Eppure c’è stato un periodo in passato dove si è cominciato a discostarsi da questa tendenza, ovvero quando si è cominciato ad adottare la pratica di design definita skeumorfismo (o scheumorfismo).

Il promotore era Apple ed eravamo nell’epoca primordiale di iOS: il concetto di 2D stava virando verso una rappresentazione realistica degli oggetti di vita quotidiana.

All'epoca era una grafica attraente ed innovativa e soprattutto utile come collegamento tra quello che già si conosceva e la novità digitale che si doveva ancora capire. Questa visione però è stata subito azzoppata dalla corrente minimalista come il flat design, uno stile basato su figure geometriche piatte e spazi netti e definiti spesso monocolore e successivamente dal material design che, nonostante riprenda qualche caratteristica dello scheumorfismo, si concentra sempre sul concetto di purezza, semplicità e funzionalità nelle pagine.

Questa rappresentazione è molto valida per la stragrande maggioranza di app e siti web, poiché va dritti al punto di cosa l’utente richiede. Ci sono però dei casi d’uso in cui si ha bisogno di qualcosa in più, che semplicemente permetta di interagire meglio con il servizio che voglio offrire; in particolare, l’utente potrebbe aver bisogno di controllare degli oggetti che abbiamo 3 dimensioni, per ruotarli, zoomarli e avere una prospettiva diversa.

E qui entra in scena quindi il 3D (sul browser).

Perchè usare il 3D sul browser

I motivi principali che possono portarci a sviluppare il 3D sul browser sono:

• Il browser è la piattaforma più usata sul desktop, multipiattaforma e (abbastanza) solida, inoltre è quella più facilmente accessibile e scalabile;
• L’utilizzo del 3D in certi contesti è più esaustivo del 2D: il 3D può offrire una maggiore interattività e coinvolgimento dell'utente rispetto a una semplice interfaccia bidimensionale;
• Oggi siamo arrivati ad un livello di ottimizzazione che è possibile far girare interi mondi sul 3D senza affaticare (troppo) la macchina.

Prendiamo il caso d’uso che si può definire la killer app del 3D sul web, quella che lo ha sdoganato e portato alla ribalta, ovvero Google Earth. Non è possibile esprimere al meglio la quantità di informazioni che potrebbe descrivere questa scena se non con questa rappresentazione interattiva:

L’alternativa sarebbe perdersi tra mappe tradizionali e descrizioni varie… non il massimo!

Esempi di 3D sul browser

Configuratori 3D

Configuratori 3D online per e-commerce, come ad esempio nel mondo automotive; il 3D può essere utilizzato per creare modelli tridimensionali di prodotti che possono essere ruotati e visualizzati da diverse angolazioni, consentendo agli utenti di ottenere una migliore comprensione del prodotto e di apprezzare meglio il design.

Mappe 3D

Come abbiamo visto Google Earth ma anche Google Street View o i simulatori di terreno 3D per individuare aree a rischio, ecc.

Settore educational/wiki

Dato che una rappresentazione 3D può riprodurre fedelmente la realtà e quindi dare un notevole aiuto allo studente piuttosto che lasciare a lui il compito di immaginarsi i concetti partendo da raffigurazioni in 2 dimensioni.

Settore Architectural Visualization

Questo settore fa un uso esaustivo dell’iperrealismo per progettare palazzi o appartamenti.

Gaming

Nell'area giochi e intrattenimento in generale il 3D è abbastanza scontato. Se visitate la pagina FreeFrontend.com potete vedere, per esempio, una collezione di 9 giochi (con relativo codice).

Le idee e i casi d’uso come abbiamo visto dunque sono reali e già utilizzati al giorno d’oggi.

ThreeJS in soccorso

Ma come creare il 3D sul web? Adottando Three.js come soluzione per lo sviluppo di progetti in 3D sul browser si possono ricoprire tutti i casi d’uso appena citati ed inoltre avere a disposizione una libreria stabile, scalabile e con una grande community a supporto.

Facciamo un esempio (ma più semplice di mappe e giochi online :D), uno base di una scena su ThreeJS: il classico Hello World ma in chiave 3D.

1import * as THREE from "three";
2
3const threeCanvas = document.querySelector("#threeCanvas");
4
5const scene = new THREE.Scene();
6
7// Box
8const geometry = new THREE.BoxGeometry(10, 10);
9const material = new THREE.MeshBasicMaterial({
10  color: "red",
11  wireframe: true,
12});
13const box = new THREE.Mesh(geometry, material);
14scene.add(box);
15
16// Camera
17const camera = new THREE.PerspectiveCamera();
18camera.position.setZ(30); //move camera backward
19
20// Renderer
21const renderer = new THREE.WebGLRenderer({
22  canvas: threeCanvas,
23});
24renderer.setSize(window.innerWidth, window.innerHeight); //take all screen
25renderer.render(scene, camera);

Avete provato? Non è così complicato creare oggetti in 3D sul browser ;)

Dal prossimo articolo vedremo qualche esempio pratico e scriveremo un po' di codice.

Non perdete quindi:

• Come inserire oggetti 3D sul browser con ThreeJS

• Come personalizzare una scena 3D con luci, ombre e altro