Jihuu osaan matriisilaskentaa!

http://threejs.org/ avasi tien tässä

Näin se menee:

Otetaan neljä pistettä 3D avaruudessa (x,y,z): esim (1,  0 , 1), (1,  0 , -1), ( -1,0 ,1 ), ( -1,0 , -1 )

Kuten kaikki tiedämme näistä pisteistä syntyy neliö. Siitä voi varmistua piirtämällä pisteet  ruutupaperiin. Kolmiulotteista ruutupaperia ei tarvita koska y akselilla arvo on O, joten pisteet on paperin pinnalla.

1. three.js – javascript koodilla neliö luodaan näillä riveillä:

   
   this.geometry = new THREE.Geometry();
   this.geometry.vertices.push( new THREE.Vector3( 1,  0 , 1 ));
   this.geometry.vertices.push( new THREE.Vector3( 1,  0 , -1 ));
   this.geometry.vertices.push( new THREE.Vector3( -1, 0 ,1 ));
   this.geometry.vertices.push( new THREE.Vector3( -1, 0 , -1 ));
   this.geometry.faces.push( new THREE.Face3(  0,   2, 1 ));
   this.geometry.faces.push( new THREE.Face3( 1, 2, 3) );
   

   Tältä tulos näyttää:

   

2. Toki tarvitaan hieman muutakin koodia, jotta jotain näkyisi, sitä varten tsekkaa githubin eka kommit: https://github.com/juyshy/webglstuff/
3. Mitäs jos nyt haluasin lähteä siirtämään näitä pisteitä 3D kordinaatiostossa siten, että vaikkapa muutamalla koodirivillä voisin luoda lisää tällaisia neliomuotoisia pisteryppäitä jolloin niistä muodostuisi tällainen kuva:
   
   otetaan käyttöön matriisit ja ryhdytään hivuttamaan pisteitä:
   luodaan uusi matriisi:

   
   var m1 = new THREE.Matrix4();
   

4. siirretään pisteitä askel ylöspäin, eli laitetaan matriisi-objektin translate metodiin vektori, joka tuuppaa pisteitä y akselilla yhden pykälän ylös: x on 0, y = 1 ja z nolla:

   
   m1.translate( new THREE.Vector3( 0, 1 , 0 )  )  ;
   

   Itse asiassa tämä on fuskausta. Varsinaista matriisilaskentaa ei tarvitse osata koska THREE.Matrix4 objekti tekee sen koodaajan puolesta.

5. napataan verteksien lista ja loopataan se läpi. Kloonataan pisteet väliaikaiseen listaan koska haluan luoda lisää pisteitä enkä siirtää alkuperäisiä. Lasketaan kukin vertekstipiste matriisilla ja lisätään kloonit uuteen listaan.

   
   var extraVerts = new Array();
   for (var j= 0; j < this.geometry.vertices.length; j++) {
   	var vertex = this.geometry.vertices[j].clone()
   	vertex.applyMatrix4( m1 ) ;
   	extraVerts.push(vertex );
   	//console.log(vertex);
   }
   // lets concatenate new vertex points to geometry
   this.geometry.vertices=this.geometry.vertices.concat(extraVerts);
   // and add faces:
   this.geometry.faces.push( new THREE.Face3( 4, 4+1, 4+2 ) );
   this.geometry.faces.push( new THREE.Face3( 4+1, 4+2, 4+3 ) );
   

6. kokeillan myös pyörittämistä: lisätään rotateZ metodi eli pyöritetään pisteitä Z-akselin ympäri three.js käyttää pyörityskulmissa radiaaneja (tarkoittaa sitä, että Piin arvo vastaa 180 astetta, jolloin asteet saa muunnettua radiaaneiksi kaavalla: radiaanit= asteet * Math.PI/180

   m1.translate( new THREE.Vector3( 0, 1, 0 )  )  ;
   var kulma = 15;
   m1.rotateZ( kulma * Math.PI/180 )  ;
   

Wow!  Tältä se nyt näyttää:

Tästä se lähtee. Lisätään vain uudet “facet” eli polygonpinnat ja uusi setti neliöitä..