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.
- 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ää:
- Toki tarvitaan hieman muutakin koodia, jotta jotain näkyisi, sitä varten tsekkaa githubin eka kommit: https://github.com/juyshy/webglstuff/
- 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();
- 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.
- 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 ) );
- 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ä..