人生ゲーム漬けなダメ人間のBlog


ここなのプロフィールページ
過去展示物はこちら
昔の日記:fUteiKi_niKKi(old)
【threejs】カメラ制御をいろいろ触ってみた

さて、年始のご挨拶も済ませたし
この件について書いていきましょうかね _(:3 」∠)_




長かった…やっとお披露目ですよ_(:3 」∠)_


さて、ある程度作りこんでいくとカメラにも動きをつけたくなるわけです
実際カメラに対してアニメーションってどうつけんのさ?というのが気になるわけです

以前 Blender から試した時はぶっちゃけうまくいかなかったので、
これはある程度コードベースで組むしかなかろう…とは思っていたのですが…

実際のところキーフレームをどこに格納して再生すればいいのか
というのが、皆目見当もつかない状態だったんで調べてみたところ…


https://github.com/mrdoob/three.js/issues/1689



本家が Tweenjs を推しておられる… _(:3 」∠)_



色々調べると確かにでてくるわけなんですがベストアンサーなのか微妙にわからんかったんですね
が、実際に推している魚拓がとれしまっては Tweenjs で組むしかないですよねぇー


Tweenjs の組み方はここを見るとベターです


https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes_tween.html


ソースコード的な


実際に組むとこんな感じ


function myOnload_Anim_func(){ //if you want custom function, chenge is this console.log( scene ); loopAnimate(); camera_looAt.position.set( camera_looAt_posNomal[0],camera_looAt_posNomal[1]/4,camera_looAt_posNomal[2] ); set_tween_animation(); setInterval("set_tween_animation()",animaiton_interval); } function onEnterframe_Custom_func(){ //If you want onEnterframe function is here playAnimation(); //mixer update update_debug_text(); TWEEN.update(); //tween update camera.lookAt(camera_looAt.position); //update the camera.lookAt every frame } function set_tween_animation(){ new TWEEN.Tween( camera.position ).to( { x: Math.sin(camera_parameta[0]*Math.random()*camera_move_length), y: camera_parameta[1], z: camera_parameta[2] }, animaiton_interval ).easing( TWEEN.Easing.Sinusoidal.InOut ).start(); new TWEEN.Tween( camera_looAt.position ).to( { x: Math.sin(camera_looAt_posNomal[0]*Math.random()*camera_move_length), y: camera_looAt_posNomal[1], z: camera_looAt_posNomal[2]+Math.random()*camera_move_length }, animaiton_interval ).easing( TWEEN.Easing.Quartic.InOut ).start(); }

コード組んでみた感じのポイント


・コメントでも書いていますが camera.lookAt は毎フレーム更新しないと反映されません
・Tween の発火は一定時間ごとなので、都度実行する必要があります
・camera.lookAt を設定するときは『どのパラメータをみるのか』を設定しないといけないです
 ⇒ 『camera_looAt』という Object3Dを指定するのではなく『camera_looAt.position』を参照しないといけません
・ぶっちゃけ範囲を決めたループモーションなら Math.sin() の方が使い勝手いいきがします


ストーリーライクなカメラ設定を行う場合は、座標と到達時間を配列にいれておいて
Tween効果ごとに function を仕込んで実行していくのがよさそうな気がします


これ、やっぱり AnimationMixer で制御したいよなあ…jsonだし…



愛純さんおひろめー


実際に組んでみたのがこれです
カメラ位置をプラグラマブルに動かしています






gtlf の単位はメートル っぽいから、これでもまだでかいんだろうな…



|д゚)ノシ オワリダヨ


| ここな | サンデーぴーぽー | comments(0) | trackbacks(0) |

Comment










Trackback
url: http://kurobee.kokona.lomo.jp/trackback/1038090

new | top | old


累計 本日 昨日

無料ブログ作成サービス JUGEM
(C) 2018 ブログ JUGEM Some Rights Reserved.
-Paging Navigation-

new | old

▲PageTopへ▲