Three.js \u00e8 un API utilizzata per creare ed esporre animazioni e modelli 3D su un browser.<\/p>\n\n\n\n
Uno dei formati file supportati pi\u00f9 usati per gli oggetti 3d in Three.js \u00e8 glTF(GL Transmission Format), un buon authoring tool per farne uno \u00e8 Blender.<\/p>\n\n\n\n
WebGL 3D Model Viewer \u00e8 il tool utilizzato per vedere i modelli 3D sul browser usando Three.js.<\/p>\n\n\n\n
Il mio compito era quello di fare in modo che su un modello 3D si potessero vedere degli hotspot interagibili, in modo tale da far si che ogni hotspot possa avere funzioni diverse, come mandare ad un’link, far apparire un pop-up oppure avviare un audio.<\/p>\n\n\n\n
Per fare questa task ho deciso di usare CSS2DRenderer che permette di combinare oggetti 3D con labels 2D fatti in HTML, CSS2DRenderer per\u00f2 \u00e8 un addon, quindi da solo non funziona perci\u00f2 ho dovuto installare prima il resto delle cose.<\/p>\n\n\n\n
Ogni progetto in Three.js deve avere almeno una pagina HTML per definire la webpage ed un file javascipt per il codice del progetto che faranno da struttura base per il progetto.<\/p>\n\n\n\n
Per iniziare ho installato Node cosi da poter fare un’applicazione server-side e per poter utilizzare il build tool, dopo ho installato Three.js ed il build tool Vite utilizzando il terminale con i seguenti comandi:<\/p>\n\n\n\n
npm install –save three <\/p>\n\n\n\n
npm install –save-dev vite<\/p>\n\n\n\n
Poi ho usato il comando “npx vite” per ricevere un link che porta alla pagina con il progetto, che per ora \u00e8 vuoto.<\/p>\n\n\n\n
Il prossimo passaggio per poter visualizzare qualcosa con Three.js \u00e8 creare una scena, una camera ed un renderer, in questo caso si far\u00e0 un cubo che rotea, il codice qui sotto presenta come crearli:<\/p>\n\n\n\n
import * as THREE from 'three';\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera( 75, window.innerWidth \/ window.innerHeight, 0.1, 1000 );\n\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize( window.innerWidth, window.innerHeight );\ndocument.body.appendChild( renderer.domElement );<\/code><\/pre>\n\n\n\nCi sono diversi tipi di camera, in questo caso si utilizza una Perspecive Camera, il primo attributo \u00e8 il Field Of View che indica quanto si veda della scene sul display, il secondo attributo \u00e8 aspect ratio che sar\u00e0 sempre la width divisa per l’height, gli ultimi due attributi sono near e far che servono a limitare il rendering dell’oggetto, tutte le cose oltre far non vengono renderizzate e tutte le cose prima di near neanche.<\/p>\n\n\n\n
Per il renderer oltre a crearne l’istanza bisogna anche configurarne la dimensione a cui deve renderizzare l’app, in questo caso prende le dimensione della pagina web, dopo ho aggiunto il renderer all’ file HTML cos\u00ec da poter vedere la scene.<\/p>\n\n\n\n
const geometry = new THREE.BoxGeometry( 1, 1, 1 );\nconst material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\nconst cube = new THREE.Mesh( geometry, material );\nscene.add( cube );\n\ncamera.position.z = 5;<\/code><\/pre>\n\n\n\nPer creare il cubo ho usato BoxGeometry, un Object che contiene tutti i vertici e facce del cubo, poi serve il materiale del cubo per dargli un colore, Three.js ha parecchi materiali, io ho utilizzato MashBasicMaterial egli ho dato l’attributo del colore verde, bisogna poi aggiungere un Mesh, un oggetto che prende una forma geometrica e ci applica il materiale, cos\u00ec da visualizzarlo e spostarlo a volere, infine si aggiunge il cubo alla scena e si sposta la camera cos\u00ec da non avere camera e cubo compenetrati insieme.<\/p>\n\n\n\n
Per renderizzare la scena bisogna fare un render animation loop che ricarica la scena ogni volta che lo schermo si refresha, questa \u00e8 la funzione usata:<\/p>\n\n\n\n
function animate() {\n\trenderer.render( scene, camera );\n}\nrenderer.setAnimationLoop( animate );<\/code><\/pre>\n\n\n\nPer animare il cubo basta usare le seguenti linee di codice:<\/p>\n\n\n\n
cube.rotation.x += 0.01;\ncube.rotation.y += 0.01;<\/code><\/pre>\n\n\n\nQuesto fa si che il cubo ruoti sia nell’asse x che nel asse y.<\/p>\n\n\n\n
Dopo aver fatto ci\u00f2 ho cambiato il cubo in un Icosaedro, quindi al posto di <\/p>\n\n\n\n
const geometry = new THREE.BoxGeometry( 1, 1, 1 );<\/code><\/pre>\n\n\n\nho fatto<\/p>\n\n\n\n
const geometry = new THREE.IcosahedronGeometry( 1, 2); <\/code><\/pre>\n\n\n\ned ho cambiato il nome del cubo in “mesh” per darli un nome usabile con qualunque forma.<\/p>\n\n\n\n
Dopo ho cambiato il materiale del oggetto con uno che funziona con le luci, quindi ho sostituito<\/p>\n\n\n\n
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );<\/code><\/pre>\n\n\n\ncon<\/p>\n\n\n\n
const material = new THREE.MeshStandardMaterial( { \n color: 0xffffff, \n flatShading: true\n } );<\/code><\/pre>\n\n\n\ndate che non si \u00e8 ancora aggiunta un’illuminazione l’oggetto non sar\u00e0 visibile su schermo, per aggiungere una luce ho usato il seguente codice:<\/p>\n\n\n\n
const hemiLight= new THREE.HemisphereLight(0x228B22, 0xCCCC00);\nscene.add(hemiLight);<\/code><\/pre>\n\n\n\nI due attributi sono il colore della luce, il primo \u00e8 la luce sopra ed il secondo quella sotto, dopodich\u00e9 l’ho aggiunto alla scena.<\/p>\n\n\n\n
Ho aggiunto anche un “Wire” in modo tale da evidenziare i vari lati dell’oggetto per poterlo vedere in modo pi\u00f9 chiaro, per farlo ho usato il seguente codice:<\/p>\n\n\n\n
const wireMat= new THREE.MeshBasicMaterial({\n color: 0xffffff,\n wireframe: true\n })\n const wireMesh= new THREE.Mesh(geometry, wireMat);\n wireMesh.scale.setScalar(1.001);\n mesh.add(wireMesh);<\/code><\/pre>\n\n\n\nHo creato un material ed un mesh di colore bianco, e l’ho leggermente scalato rendendolo pi\u00f9 grande per non avere compenetrazioni e per vederlo in modo pi\u00f9 chiaro, dopo l’ho aggiunto come figlio del mesh.<\/p>\n\n\n\n
Dopo ho aggiunto un modo per poter controllare la forma in modo da girarla con il mouse, per farlo ho aggiunto l’addon di OrbitControls, importandolo con questo codice:<\/p>\n\n\n\n
import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';<\/code><\/pre>\n\n\n\nPer implementarlo ho usato il seguente codice:<\/p>\n\n\n\n
const controls= new OrbitControls(camera, renderer.domElement);\ncontrols.enableDamping=true;\ncontrols.dampingFactor=0.03;<\/code><\/pre>\n\n\n\nil damping serve a dare un senso di peso al movimento dell’oggetto cos\u00ec che sembri pi\u00f9 fluido\/naturale.<\/p>\n\n\n\n
Infine ho cambiato l’animazione dell’oggetto in questo modo:<\/p>\n\n\n\n
function animate() {\n requestAnimationFrame(animate);\n mesh.rotation.y += 0.001;\n renderer.render( scene, camera );\n controls.update();\n }\n\n animate();<\/code><\/pre>\n\n\n\nHo prima di tutto fatto in modo che l’animazione si ripetesse dentro alla funzione, poi ho rimosso la rotazione dell’asse x e ho reso la rotazione dell’asse y leggermente pi\u00f9 lenta, ed infino ho fatto in modo che i controlli si aggiornino ogni volta.<\/p>\n\n\n\n
Dopo dovevo aggiungerci degli hotspot sulla forma che facessero diversi tipi di azioni, per fare ci\u00f2 come ho detto in precedenza bisogna importare gli addon di CSS2DRenderer cos\u00ec da poter visualizzare testi in modo dinamico, qui sotto \u00e8 indicato il setup:<\/p>\n\n\n\n
import {CSS2DRenderer, CSS2DObject} from 'three\/addons\/renderers\/CSS2DRenderer';\n\/\/setup\nconst labelRenderer= new CSS2DRenderer();\nlabelRenderer.setSize(window.innerWidth, window.innerHeight); labelRenderer.domElement.style.position='absolute';\nlabelRenderer.domElement.style.top='0px'; labelRenderer.domElement.style.pointerEvents='none'; document.body.appendChild(labelRenderer.domElement);\n\nconst group= new THREE.Group();<\/code><\/pre>\n\n\n\nPointerEvents=’none’ serve a far in modo che il container non catturi eventi del mouse cos\u00ec da funzionare con Orbit controls.<\/p>\n\n\n\n
Group servir\u00e0 a raggruppare insieme tutti i label creati, per crearli per\u00f2 serve una funzione:<\/p>\n\n\n\n
function createCpointMesh(name, x, y , z){\n const geo= new THREE.SphereGeometry(0.1);\n const mat= new THREE.MeshBasicMaterial({color:0xFF0000});\n const mesh= new THREE.Mesh(geo, mat);\n mesh.position.set(x,y,z);\n mesh.name=name;\n return mesh;\n }\n\n const sphereMesh1 =createCpointMesh('sphereMesh1', 1, 0.6, 1.646);\n const sphereMesh2 =createCpointMesh('sphereMesh2', -1.4, 0.6, -1.3);\n group.add(sphereMesh1);\n group.add(sphereMesh2);\n\nmesh.add(group);<\/code><\/pre>\n\n\n\nNella funzione bisogna inserire il nome e la posizione(coordinate) del label, dopo aver creato la funzione l’ho usata per creare due labels che poi ho aggiunto a group per poi aggiungere group come figlio di mesh.<\/p>\n\n\n\n
Nella funzione animate bisogna anche aggiungere la seguente linea di codice per aggiornare il render dei label:<\/p>\n\n\n\n
labelRenderer.setSize(this.window.innerWidth, this.window.innerHeight);<\/code><\/pre>\n\n\n\nIl seguente event listener aggiorna la dimensione dello schermo per adattarsi alla dimensione della pagina:<\/p>\n\n\n\n
window.addEventListener('resize', function(){\n camera.aspect=this.window.innerWidth\/this.window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n labelRenderer.setSize(this.window.innerWidth, this.window.innerHeight);\n })<\/code><\/pre>\n\n\n\nOra dovevo far si che i labels fossero visibili come dei pop-up, ho scelto i pop-up ma si possono fare diversi eventi non solo questo, per renderlo visibile ho fatto cos\u00ec:<\/p>\n\n\n\n
const p=document.createElement('p');\n p.className='tooltip';\n const pContainer=document.createElement('div')\n pContainer.appendChild(p);\n const cPointLabel= new CSS2DObject(pContainer);\n mesh.add(cPointLabel);\n\n const mousePos= new THREE.Vector2();\n const raycaster= new THREE.Raycaster();\n \n window.addEventListener('mousemove', function(e){\n mousePos.x=(e.clientX\/this.window.innerWidth)*2-1;\n mousePos.y=-(e.clientY\/this.window.innerWidth)*2+1;\n\n raycaster.setFromCamera(mousePos, camera);\n const intersects=raycaster.intersectObject(group);\n\n if (intersects.length>0) {\n switch (intersects[0].object.name) {\n case 'sphereMesh1':\n p.className= 'tooltip show';\n cPointLabel.position.set(1, 0.6, 1.646)\n p.textContent= 'Hotspot 1 (1, 0.6, 1.646)'\n break;\n case 'sphereMesh2':\n p.className= 'tooltip show';\n cPointLabel.position.set(-1.4, 0.6, -1.3)\n p.textContent= 'Hotspot 2 (-1.4, 0.6, -1.3)'\n break;\n default:\n break;\n }\n }\n else{\n p.className = 'tooltip hide'\n }\n })<\/code><\/pre>\n\n\n\nCi\u00f2 permette di conoscere sempre la posizione del mouse e di usare le funzione tooltip show quando il mouse \u00e8 sopra alle coordinate prestabilite.<\/p>\n\n\n\n
Poi per rendere i label pi\u00f9 belli da vedere e per dargli un effetto di “fading” ho creato un file CSS (che poi ho linkato all’HTML) in cui ho messo i seguenti comandi:<\/p>\n\n\n\n
body {\n margin: 0;\n}\n\n.tooltip{\n background-color: white;\n color: black;\n padding: 10px;\n position: relative;\n transform: translateY(-10px);\n opacity: 0;\n transition-duration: 2s;\n transition-property: opacity, transform;\n}\n.tooltip::after{\n position: absolute;\n content: '';\n width: 20px;\n height: 20px;\n background-color: white;\n top: 90%;\n left: 50%;\n transform: rotateZ(45deg) translateX(-50%);\n z-index: -1;\n}\n\n.hide{\n opacity: 0;\n transform: translateY(-10px);\n}\n\n.show{\n opacity: 1;\n transform: translateY(0px);\n}<\/code><\/pre>\n\n\n\nPer aggiungere una texture alla forma basta installare un immagine e metterlo in una cartella, dopo bisogna scrivere:<\/p>\n\n\n\n
const texture = new THREE.TextureLoader().load(\"src\/Img\/terra.jpg\")<\/code><\/pre>\n\n\n\n(“src\/Img\/terra.jpg”) \u00e8 il path dell’immagine che poi verr\u00e0 applicata all’oggetto cambiando il material cos\u00ec:<\/p>\n\n\n\n
const material = new THREE.MeshStandardMaterial( { \n map: texture,\n side: THREE.DoubleSide,\n \/\/flatShading: true\n } );<\/code><\/pre>\n\n\n\nHo commentato flatShading per dar l’impressione che l’oggetto sia sferico, ho anche aumentato il numero di triangoli utilizzati a 10 nell’icosahedron, poi ho cambiato i colori della luce a bianco e nero per avere una luce pi\u00f9 naturale.<\/p>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"Three.js \u00e8 un API utilizzata per creare ed esporre animazioni e modelli 3D su un browser. Uno dei formati file supportati pi\u00f9 usati per gli oggetti 3d in Three.js \u00e8 glTF(GL Transmission Format), un buon authoring tool per farne uno \u00e8 Blender. WebGL 3D Model Viewer \u00e8 il tool utilizzato per vedere i modelli 3D […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-134","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stage.centrica.it\/index.php\/wp-json\/wp\/v2\/pages\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage.centrica.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stage.centrica.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stage.centrica.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stage.centrica.it\/index.php\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":30,"href":"https:\/\/stage.centrica.it\/index.php\/wp-json\/wp\/v2\/pages\/134\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/stage.centrica.it\/index.php\/wp-json\/wp\/v2\/pages\/134\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/stage.centrica.it\/index.php\/wp-json\/wp\/v2\/media?parent=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}