three.jsで、blenderから書き出したglbファイルを動かしたいと思っています。
blenderでアニメーションを作り、それをthree.jsでアニメーションさせる方法は分かったのですが、
glbファイルで読み込んだキャラクターのアニメーションをthree.jsの中に書く方法が分かりません。
経過時間とアニメーションを設定して、それを繰り返し(たり止めたりし)たいです
読み込みの部分と、こんな感じかな?と思った書き方をのコードを以下に記載いたします。
(x軸方向に動かす→z軸方向に動かしながらy軸基準で回転させる→y軸基準で回転しながら元の場所に戻る。としたかったのですが、同じ場所でくるくる回転してしまいます。)
参考のサイト等でも良いので、教えていただけると嬉しいです。
よろしくお願いいたします!
loader.load( 'blender/santa_pastel.glb', // called when the resource is loaded function (gltf) { const objSantaInShop = gltf.scene; const animations = gltf.animations; objSantaInShop.scale.set(1, 1, 1 ); objSantaInShop.position.set(-10, -2, -8) //obj.rotation.y = Math.PI / 2 * 3; scene.add(objSantaInShop); //objSantaInShopArray.push(objSantaInShop); console.log(objSantaInShop.position); //アニメーションこんな感じで書ける?? for(let i = 0; i < 25; i++){ function animateInShop() { if(i < 5){ objSantaInShop.position.x += 0.5; }else if(i <10){ objSantaInShop.position.z += 0.5; objSantaInShop.rotation.y += Math.PI / 2 / 5; }else if(i < 24){ objSantaInShop.position.set(-10, -2, -8); objSantaInShop.rotation.y += 1.5 * Math.PI / 10; } console.log(objSantaInShop.position); requestAnimationFrame(animateInShop); scene.add(objSantaInShop); } animateInShop(); } }, // called while loading is progressing function ( xhr ) { //console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' ); }, // called when loading has errors function (error) { console.log('An error happened'); console.log(error); }, );// ========== ここまでloader.load

0 コメント