Three.js入門学習ノート15:Threejsフレームアニメーションモジュール
26102 ワード
リファレンスラーニングhttp://www.webgl3d.cn/Three.js/
キーフレームの編集と再生の解析
Threejsは、キーフレームKeyframeTrack、クリップAnimationClip、アクションAnimationAction、ミキサーAnimationMixerなどの一連のユーザによるキーフレームアニメーションの編集および再生のためのAPIを提供する.
キーの編集:
キーフレームアニメーションはキーフレームKeyframeTrackとクリップAnimationClipの2つのAPIによって完成され、実際の開発では複雑な3次元モデルのフレームアニメーションを作成する必要があり、例えば一人で歩く、走るなどの動作が必要であれば、一般的に美術は3 dmax、blenderなどのソフトウェアで編集され、プログラマーがコードで実現する必要はありません.
キーの再生(Play Keys)
既存のフレームアニメーションデータは、AnimationActionとミキサAnimationMixerの2つのAPIを操作することによって再生される.
ミキサーTHREE.AnimationMixer()のパラメータは、ケースコードに記述された2つのグリッドモデルの親グループであり、実際に開発されたパラメータグループは、外部モデルをロードして返されるモデルオブジェクトであってもよい.
キーフレームアニメーションを再生するときは、レンダリング関数render()でmixerを実行することに注意してください.update(レンダリング間隔時間)は、フレームアニメーションシステムThreejsが2回レンダリングする時間間隔を教え、取得時間間隔はThreejsが提供するクロッククラスClockによって実現することができる.
まとめ
1.グリッドオブジェクトを追加し、グリッドオブジェクトの名前を付ける親グループが必要です.キーの編集(1)キーフレームに位置、色、スケールなどの属性を設定し、時間と変化の数値(3)で再生時間
効果
KeyframeTrack
http://www.webgl3d.cn/threejs/docs/#api/zh/animation/KeyframeTrack
完全なコード
設定(一時停止、早送り、スクロールバー)
https://blog.csdn.net/u014291990/article/details/103350524
質問:キーフレームはどのように色を数字で表しますか?
キーフレームの編集と再生の解析
Threejsは、キーフレームKeyframeTrack、クリップAnimationClip、アクションAnimationAction、ミキサーAnimationMixerなどの一連のユーザによるキーフレームアニメーションの編集および再生のためのAPIを提供する.
キーの編集:
キーフレームアニメーションはキーフレームKeyframeTrackとクリップAnimationClipの2つのAPIによって完成され、実際の開発では複雑な3次元モデルのフレームアニメーションを作成する必要があり、例えば一人で歩く、走るなどの動作が必要であれば、一般的に美術は3 dmax、blenderなどのソフトウェアで編集され、プログラマーがコードで実現する必要はありません.
キーの再生(Play Keys)
既存のフレームアニメーションデータは、AnimationActionとミキサAnimationMixerの2つのAPIを操作することによって再生される.
ミキサーTHREE.AnimationMixer()のパラメータは、ケースコードに記述された2つのグリッドモデルの親グループであり、実際に開発されたパラメータグループは、外部モデルをロードして返されるモデルオブジェクトであってもよい.
キーフレームアニメーションを再生するときは、レンダリング関数render()でmixerを実行することに注意してください.update(レンダリング間隔時間)は、フレームアニメーションシステムThreejsが2回レンダリングする時間間隔を教え、取得時間間隔はThreejsが提供するクロッククラスClockによって実現することができる.
まとめ
1.グリッドオブジェクトを追加し、グリッドオブジェクトの名前を付ける親グループが必要です.キーの編集(1)キーフレームに位置、色、スケールなどの属性を設定し、時間と変化の数値(3)で再生時間
new THREE.KeyframeTrack(4)を設定して、クリップclipオブジェクト、ネーミング、持続時間、キーを作成するには、KeyframeTrackとクリップAnimationClipの2つのAPI(2)durationを使用します.3.再生キーフレーム操作AnimationActionとミキサーAnimationMixerの2つのAPI再生(1)new THREE.AnimationMixer(group);再生グループ内のすべてのサブオブジェクトのフレームアニメーション(2)clipをパラメータとして、ミキサーclipAction法により1つの操作オブジェクトAnimationAction(3)を返す操作Actionにより再生方式を設定し、再生速度を調節する、(4)サイクルで再生を開始するかどうか.レンダー(1)クロックオブジェクトを作成(2)レンダー操作を行い、再レンダーを要求し、次のフレームをレンダーし、ミキサー関連時間を更新します.効果
KeyframeTrack
http://www.webgl3d.cn/threejs/docs/#api/zh/animation/KeyframeTrack
完全なコード
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D</title>
<meta charset="utf-8">
<!-- -->
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/three.js"></script>
<script>
init();
function init() {
//renderer
var renderer = new THREE.WebGLRenderer({
antialias:true,
// alpha:true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
// init scene
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
// init camera
var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(15,15,15);
// camera.lookAt(new THREE.Vector3(0,0,0));
camera.lookAt( scene.position );
scene.add(camera);
//light
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 3, 1, 1 ).normalize();// ， ， 1
// light.intensity=1.5;//
scene.add(light);
//
var material1 = new THREE.MeshLambertMaterial({
color:0x0000ff
});
var geometry1 = new THREE.CubeGeometry(5,2,3);
var mesh1 = new THREE.Mesh(geometry1, material1);
mesh1.name="Box";
mesh1.position.set(0,2,0);
var material2 = new THREE.MeshLambertMaterial({
color:0x00ff00
});
var geometry2 = new THREE.SphereGeometry(1, 50, 50);
var mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.name="Sphere";
mesh2.position.set(0,5,0);
var group = new THREE.Group();
group.add(mesh1,mesh2);
scene.add(group);
scene.add(group);
renderer.render(scene, camera);
// group mesh1 mesh2
// Box
var times = [0, 10];// ，
var values = [0,0,0,10,0,0]//
// ：0 0,0,0，10 150，0，0
var posTrack = new THREE.KeyframeTrack('Box.position', times, values);
// ：10 1，0，0 20 0，0, 1
var colorKF = new THREE.KeyframeTrack('Box.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);
// Sphere ， 0-20 ， scale 3
var scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]);
//duration ，
//duration ， ， ，
var duration = 20;
// clip ， “default”, 20
var clip = new THREE.AnimationClip("default", duration, [posTrack, colorKF, scaleTrack]);
//
//group ， group
var mixer = new THREE.AnimationMixer(group);
// clip ， clipAction AnimationAction
var AnimationAction = mixer.clipAction(clip);
// Action
AnimationAction.timeScale = 20;// 1，
// AnimationAction.loop = THREE.LoopOnce; //
AnimationAction.play();//
// Clock
var clock = new THREE.Clock();
//
function render(){
renderer.render(scene, camera); //
requestAnimationFrame(render); // render，
//clock.getDelta()
//
mixer.update(clock.getDelta());
}
render();
}
</script>
</body>
</html>
設定(一時停止、早送り、スクロールバー)
https://blog.csdn.net/u014291990/article/details/103350524
質問:キーフレームはどのように色を数字で表しますか?