摘要:如創(chuàng)建一個(gè)的矩陣將上面創(chuàng)建的矩陣按照傳入的軸旋轉(zhuǎn)傳入的弧度旋轉(zhuǎn)軸,旋轉(zhuǎn)弧度原型上的方法值為值為初始值為執(zhí)行之后的值為將按照旋轉(zhuǎn)軸和弧度旋轉(zhuǎn)完成的矩陣和幾何體的矩陣相乘框架源碼這里的是因?yàn)橹粋魅胍粋€(gè)值和是全等的
矩陣的概念 threejs中的矩陣 矩陣的應(yīng)用 用于旋轉(zhuǎn)一個(gè)幾何體 創(chuàng)建一個(gè)立方體cube放到場(chǎng)景中; 繞向量(1,1,0)旋轉(zhuǎn)30度
var axis = new THREE.Vector3(1,1,0); //創(chuàng)建一個(gè)三維向量 var rotWorldMatrix = new THREE.Matrix4(); //創(chuàng)建一個(gè)4*4矩陣 rotWorldMatrix.makeRotationAxis(axis.normalize(), 30 * Math.PI / 180 ); rotWorldMatrix.multiply(cube.matrix); // pre-multiply cube.matrix = rotWorldMatrix; cube.rotation.setFromRotationMatrix(cube.matrix);旋轉(zhuǎn)之前與之后對(duì)比
向量一定是從幾何體中心指向外面?
能圍繞一個(gè)不以圓點(diǎn)位起點(diǎn)的向量旋轉(zhuǎn)?
代碼詳解var axis = new THREE.Vector3(1,1,0);
打印出axios
axis.normalize() //返回一個(gè)向量,其方向與指定向量相同,但長(zhǎng)度為一。 如: var axis = new THREE.Vector3(10,20,0); console.log( axis.normalize() ); //{x: 0.4472135954999579, y: 0.8944271909999159, z: 0} (0.4472135954999579^2)+(0.8944271909999159^2)+(0^2) = 1 var axis1 = new THREE.Vector3(1,1,0); console.log( axis1.normalize() ) //{x: 0.7071067811865475, y: 0.7071067811865475, z: 0} (0.7071067811865475^2)+(0.7071067811865475^2)+(0^2) = 1
var rotWorldMatrix = new THREE.Matrix4(); console.log( rotWorldMatrix )
rotWorldMatrix.makeRotationAxis( 旋轉(zhuǎn)軸,旋轉(zhuǎn)弧度 )
//Matrix4原型上的方法 //axis = axis.normalize() 值為 {x: 0.7071067811865475, y: 0.7071067811865475, z: 0} //angle = 30 * Math.PI / 180 值為 pi/6 makeRotationAxis: function ( axis, angle ) { var c = Math.cos( angle ); //Math.cos(π/6) var s = Math.sin( angle ); //Math.sin(π/6) var t = 1 - c; var x = axis.x, y = axis.y, z = axis.z; var tx = t * x, ty = t * y; this.set( tx * x + c, tx * y - s * z, tx * z + s * y, 0, tx * y + s * z, ty * y + c, ty * z - s * x, 0, tx * z - s * y, ty * z + s * x, t * z * z + c, 0, 0, 0, 0, 1 ); return this; },
rotWorldMatrix.makeRotationAxis(axis.normalize(), 30 * Math.PI / 180 );
rotWorldMatrix初始值為{ elements:[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] }
執(zhí)行makeRotationAxis()之后的值為:
rotWorldMatrix.multiply(cube.matrix);
//框架源碼 multiply: function ( m, n ) { if ( n !== undefined ) { //這里的n是undefined因?yàn)橹粋魅胍粋€(gè)值cube.matrix return this.multiplyMatrices( m, n ); } return this.multiplyMatrices( this, m ); }, multiplyMatrices: function ( a, b ) { var ae = a.elements; //rotWorldMatrix.elements var be = b.elements; //cube.matrix.elements var te = this.elements; //ae和te是全等的 var a11 = ae[ 0 ], a12 = ae[ 4 ], a13 = ae[ 8 ], a14 = ae[ 12 ]; var a21 = ae[ 1 ], a22 = ae[ 5 ], a23 = ae[ 9 ], a24 = ae[ 13 ]; var a31 = ae[ 2 ], a32 = ae[ 6 ], a33 = ae[ 10 ], a34 = ae[ 14 ]; var a41 = ae[ 3 ], a42 = ae[ 7 ], a43 = ae[ 11 ], a44 = ae[ 15 ]; var b11 = be[ 0 ], b12 = be[ 4 ], b13 = be[ 8 ], b14 = be[ 12 ]; var b21 = be[ 1 ], b22 = be[ 5 ], b23 = be[ 9 ], b24 = be[ 13 ]; var b31 = be[ 2 ], b32 = be[ 6 ], b33 = be[ 10 ], b34 = be[ 14 ]; var b41 = be[ 3 ], b42 = be[ 7 ], b43 = be[ 11 ], b44 = be[ 15 ]; te[ 0 ] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41; te[ 4 ] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42; te[ 8 ] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43; te[ 12 ] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44; te[ 1 ] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41; te[ 5 ] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42; te[ 9 ] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43; te[ 13 ] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44; te[ 2 ] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41; te[ 6 ] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42; te[ 10 ] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43; te[ 14 ] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44; te[ 3 ] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41; te[ 7 ] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42; te[ 11 ] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43; te[ 15 ] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44; return this; },
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/88490.html
摘要:在文末,我會(huì)附上一個(gè)可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一,它把 Web 帶入了 3D 的時(shí)代。 初識(shí) WebGL 先通過幾個(gè)使用 Web...
摘要:學(xué)習(xí)基礎(chǔ)具備基本和著色器語言知識(shí),不一定要深入學(xué)習(xí)。著色器所謂的材質(zhì)對(duì)象本質(zhì)上就是著色器代碼和需要傳遞的數(shù)據(jù)光源顏色矩陣。比更方便些,著色器中的很多變量不用聲明,系統(tǒng)會(huì)自動(dòng)幫你設(shè)置,比如頂點(diǎn)坐標(biāo)變量投影矩陣視圖矩陣 Three.js著色器 很多時(shí)候如果想寫一些特效,往往需要編寫著色器代碼GLSL,如果你不熟悉著色器語言,自然需要學(xué)習(xí)著色器語言語法,如果你有著色器語言基礎(chǔ),直接使用Thr...
摘要:首先是這個(gè)地球,得看看它是真還是假因?yàn)楹芏嘈Ч悄醚┍虉D做的,比如這里的旋轉(zhuǎn)的飛機(jī),結(jié)果找到了并且在網(wǎng)站文件中搜到了,那就是沒跑了。 上個(gè)月底,在朋友圈看到一個(gè)號(hào)稱這可能是地球上最美的h5的分享,點(diǎn)進(jìn)入后發(fā)現(xiàn)這個(gè)h5還很別致,思考了一會(huì),決定要不高仿一個(gè)? 到今天為止,高仿基本完成, 線上地址 github地址 除了手機(jī)端的media控制沒有去兼容,其他的基本都給仿了。 那為了讓你...
摘要:以為例,在產(chǎn)品主數(shù)據(jù)的頁(yè)面工具欄上新增了一個(gè)按鈕,點(diǎn)擊之后,會(huì)顯示一個(gè)彈出窗口,在瀏覽器里利用調(diào)用本地安裝的應(yīng)用,顯示該產(chǎn)品主數(shù)據(jù)的視圖。本文介紹的是另一種用純編程來以方式顯示產(chǎn)品主數(shù)據(jù)的解決方案。 在Jerry寫這篇文章時(shí),通過Google才知道,SAP其實(shí)是有自己的3D模型視圖顯示解決方案的。 showImg(https://segmentfault.com/img/remote/...
閱讀 3844·2023-04-25 16:32
閱讀 2225·2021-09-28 09:36
閱讀 2043·2021-09-06 15:02
閱讀 683·2021-09-02 15:21
閱讀 930·2019-08-30 15:56
閱讀 3527·2019-08-30 15:45
閱讀 1720·2019-08-30 13:09
閱讀 391·2019-08-29 16:05