three.jsのアニメーションについて

Question

three.jsでモデルを読み込んでアニメーションをさせたいのですが、モデルは読み込めるのですが、動作しません。

GLTFLoaderはCDNで読み込んでいます。

以下のようなコードです。

/**
 * Models
 */

const gltfLoader = new THREE.GLTFLoader();

let mixer = null

gltfLoader.load(
    '../static/models/Fox/glTF/Fox.gltf',
    (gltf) => {

        gltf.scene.scale.set(0.025, 0.025, 0.025)
        scene.add(gltf.scene)

        // Animation
        mixer = new THREE.AnimationMixer(gltf.scene)
        const action = mixer.clipAction(gltf.animations[0])
        action.play()

    }

)

const clock = new THREE.Clock()
let previousTime = 0

const tick = () =>
{
   

    // Mixer
    if(mixer)
    {
        mixer.update(deltaTime)
    }


    
    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

回答よろしくお願いします。

Answer 1

モデルは読み込めるのですが、動作しません。

ブラウザのコンソール（F12）にエラーが出ていませんか？
deltaTime が設定されていないのがアニメーションされない原因ではないかと思います。

■ サンプル
https://jsfiddle.net/cx20/dejuzg2t/

const tick = () => {
    let deltaTime = clock.getDelta();

    // Mixer
    if (mixer) {
        mixer.update(deltaTime);
    }

    // Render
    renderer.render(scene, camera);

    // Call tick again on the next frame
    window.requestAnimationFrame(tick);
}

■ 実行結果

Comments

[soci0926]

回答ありがとうございます。

最後の部分これで書き直しましたけど、駄目でした。

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
const deltaTime = elapsedTime - previousTime
previousTime = elapsedTime

// Mixer
if(mixer)
{
mixer.update(deltaTime)
}

// Update controls

controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()

[cx20]

> 最後の部分これで書き直しましたけど、駄目でした。

どのようにダメだったのでしょうか？
モデルは表示されるけれど、アニメーションされない、ということでしょうか？

断片的なコードだと状況が良く分からない為、
https://jsfiddle.net/
等に、現状の動作するコードをアップしてもらえますか？

[cx20]

参考までに提示されたコードでサンプルを修正してみました。
https://jsfiddle.net/cx20/9e3mcn1v/

[soci0926]

たびたび回答ありがとうございます。

>どのようにダメだったのでしょうか？
>モデルは表示されるけれど、アニメーションされない、ということでしょうか？

モデルは表示されますが、アニメーションされません。

https://jsfiddle.net/1ohfs0t4/

これが現状のコードとなります。ご覧になれますでしょうか？

ファイルが読み込まれてませんが、github使い慣れておらずすみません。

度々の質問で申し訳ありませんが、見ていただけるとありがたいです。

[cx20]

> モデルは表示されますが、アニメーションされません。
事象確認しました。

three.js のバージョンの問題のようです。
GLTFLoader と本体の three.js のバージョンが異なるためではないかと思います。
<script src="https://unpkg.com/three@0.131.3/build/three.min.js"></script>
を使うようにしたところアニメーションが行われることを確認しました。

https://jsfiddle.net/cx20/bkgcnL1e/

[soci0926]

教えていただいた three.js のバージョンで試してみると、動きました！！

お手数おかけしました。丁寧な対応ありがとうございます。