Matrix4.compose()

Matrix4.compose( position : Vector3, quaternion : Quaternion, scale : Vector3 ) 方法通过位置、旋转和缩放构建一个矩阵。

参数

• position：一个 Vector3 类型的对象，表示矩阵的位置。
• quaternion：一个 Quaternion 类型的对象，表示矩阵的旋转。
• scale：一个 Vector3 类型的对象，表示矩阵的缩放。

描述

该方法根据给定的位置、旋转和缩放参数，返回一个四维矩阵。

示例

const position = new THREE.Vector3( 0, 0, 0 );
const quaternion = new THREE.Quaternion();
const scale = new THREE.Vector3( 1, 1, 1 );

const matrix = new THREE.Matrix4().compose( position, quaternion, scale );

代码示例

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

const position = new THREE.Vector3( -2, 0, 0 );
const quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 4 );
const scale = new THREE.Vector3( 2, 2, 2 );

const matrix = new THREE.Matrix4().compose( position, quaternion, scale );
cube.applyMatrix4( matrix );

camera.position.z = 5;

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
}

animate();

运行上述代码将产生一个 3D 立方体，大小缩放为原本的两倍，位置是原点偏左 2 个单位，旋转了 45 度，并且在 animate() 函数中不断地更新并重绘出画面。