1

我想将四元数的时间序列数据应用于三个 JS 对象。我想出了如何应用单个四元数,但我想“动画/播放”存储在时间序列数据中的序列。你能解释一下我该怎么做吗?

我的四元数数据是这样存储的:

Quat = [[0.5005824565887451,0.42090433835983276,-0.5387108325958252,0.53108149766922],
        [0.49928978085517883,0.4201703667640686,-0.5390385389328003,0.5325449705123901],
        [0.4981348514556885,0.4199031591415405,-0.5389792919158936,0.5338954925537109],
        [0.49724632501602173,0.41984856128692627,-0.5386257171630859,0.5351220965385437],
        [0.49625831842422485,0.4202878177165985,-0.5380696654319763,0.5362526774406433],
        [0.4953213334083557,0.42090925574302673,-0.5373315215110779,0.5373707413673401]]

我的三个 JS 代码:

let camera, scene, renderer, clock, rightForeArm;

init();
animate();

function init() {

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.set( 2, 2, - 2 );
camera.lookAt( 0, 1, 0 );

clock = new THREE.Clock();

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );

const light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
light.position.set( 0, 1, 0 );
scene.add( light );

// model
const loader = new THREE.GLTFLoader();
loader.load( 'https://threejs.org/examples/models/gltf/Xbot.glb', function ( gltf ) {

    const model = gltf.scene;

    rightForeArm = model.getObjectByName( 'mixamorigRightForeArm' );
    rightForeArm.quaternion.set(0.14086472988128662,-0.13513171672821045,-0.46360713243484497,0.8642714023590088);
    
    scene.add( model );
} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
document.body.appendChild( renderer.domElement );

window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
}

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

在此处输入图像描述

4

0 回答 0