Three.js中模型對(duì)象角度旋轉(zhuǎn)
在Three.js的場(chǎng)景中,加載三維模型,需要對(duì)模型參照x、y、z三個(gè)軸的角度旋轉(zhuǎn)進(jìn)行設(shè)置。
在加載三維模型的時(shí)候,可以直接設(shè)置模型的三個(gè)軸的rotation屬性:
model.rotation.x = -Math.PI / 4;
model.rotation.z = Math.PI / 4;
model.rotation.y = Math.PI / 2;
但是,在實(shí)際的場(chǎng)景中,這樣設(shè)置模型展示的結(jié)果是不正確的,按照Three.js的說明文檔中,在場(chǎng)景中模型的變換,需要通過矩陣進(jìn)行變換。
具體的代碼實(shí)現(xiàn)方式如下:
//模型對(duì)象旋轉(zhuǎn)的函數(shù),每次設(shè)置一個(gè)坐標(biāo)軸的變換
function rotateAroundWorldaxis(object, axis, radians) {
let rotWorldMatrix = new THREE.Matrix4();
rotWorldMatrix.makeRotationaxis(axis.normalize(), radians);
rotWorldMatrix.multiply(object.matrix);?
object.matrix = rotWorldMatrix;?
object.rotation.setFromRotationMatrix(object.matrix);
}
???//調(diào)用方式,設(shè)置x、y、z軸的旋轉(zhuǎn)
? let xaxis = new THREE.Vector3(1, 0, 0);
? let yaxis = new THREE.Vector3(0, 1, 0);
? let?zaxis = new THREE.Vector3(0,?0, 1);
?//模型、旋轉(zhuǎn)軸和旋轉(zhuǎn)角度(弧度)
??rotateAroundWorldaxis(model, xaxis, Math.PI / 8);
對(duì)于之前版本的Three.js,函數(shù)實(shí)現(xiàn)的有些不同
// Three.js r49之前:
?object.rotation.getRotationFromMatrix(object.matrix, object.scale);
// ?Three.js?r59之前:
object.rotation.setEulerFromRotationMatrix(object.matrix);
對(duì)于Three.js中現(xiàn)有一些形狀對(duì)象,直接設(shè)置三個(gè)軸的變換就行,不需要這樣進(jìn)行變換。
Three.js中模型對(duì)象角度旋轉(zhuǎn)的評(píng)論 (共 條)
