【Three.js】アニメーション付きGLTFモデルのマテリアルを置換するとアニメーションが動かなくなる現象を解決したい

Question

実現したいこと

• Three.jsで、アニメーション付きGLTFモデルをマテリアル名で取得し、シェーダーマテリアルに置き換えたい。

前提

GLTFモデルはBlenderのシェイプキーアニメーションで作成しています。下のように球が変形するアニメーションをWeb上で再生するところまでは上手くいきました。

発生している問題

後述のソースコードの39行目あたりで、メッシュをマテリアル名（bg_mat）で取得してシェーダーマテリアルに置き換えたところ、色は意図通りに変わったのですが、アニメーションが動かなくなってしまいました。

アニメーションに関わる何かが上書きされてしまったのでしょうか？
アニメーションが消えてしまう原因や消えない方法をご教示いただけると幸いです。

該当のソースコード

window.addEventListener('load', init);

function init() {
    // レンダラーを作成
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#canvas'),
        antialias: true,
        alpha: true,
    });
    // シーンを作成
    const scene = new THREE.Scene();

    // カメラを作成
    // new THREE.PerspectiveCamera(視野角, アスペクト比, near, far)
    const camera = new THREE.PerspectiveCamera(45, 1, 1, 2000);
    camera.fov = 50;
    camera.position.set(0, 0.5, 8);
    // 原点方向を見つめる
    camera.lookAt(0, 0, 0);
    //camera.rotation.x = THREE.Math.DEG2RAD * (-45);
 
    // Load GLTF or GLB
    const loader = new THREE.GLTFLoader();
    const url = '3d/sample.glb';
    
    let model = null;
    // clockを作成する
    const clock = new THREE.Clock();
    loader.load(
        url,
        function (gltf) {
            model = gltf.scene;
            model.traverse((node) => {
                if (!node.isMesh) return;
              });
            model.scale.set(1, 1, 1);
            model.position.set(0, 0, 0);

            //マテリアルを置換
            const bgMesh = getMatbyName(model, "bg_mat");
            //バーテックスシェーダ
            const vertexShader =`void main() {gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`;
            //フラグメントシェーダ
            const fragmentShader =`precision mediump float;
            void main() {
            // オレンジ色のRGB値を定義 (1.0, 0.5, 0.0)
            vec3 orangeColor = vec3(1.0, 0.5, 0.0);
            // 最終的に出力される色に代入
            gl_FragColor = vec4(orangeColor, 1.0);
            }`;

            const bgMat = new THREE.ShaderMaterial({
            vertexShader:vertexShader,
             fragmentShader:fragmentShader,
             side:THREE.DoubleSide,
            });

            bgMesh.material = bgMat;
  

            // アニメーションを読み込む
            let mixer = new THREE.AnimationMixer(model);
            gltf.animations.forEach((clip) => {
            mixer.clipAction(clip).play();
            });

            scene.add(model);

        // アニメーションを更新する関数を定義する
        function update() {
            if (mixer) {
                mixer.update(clock.getDelta());
            }
        }

        // アニメーションを再生するイベントを設定する
        renderer.setAnimationLoop(() => {
            update();
            renderer.render(scene, camera);
        });

        },
        function (error) {
            console.log('An error happened');
        }
    );

    //テクスチャをガンマ補正
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.2;
 
    // ライト追加
    hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x4169e1, 4);
    scene.add(hemisphereLight);

    // カメラコントローラーを作成
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.2;

    // フォグを設定
    scene.fog = new THREE.Fog(0x2a2a5f, 150, 200);

    // 初回実行
    var frame_num = 0;
    tick();
    onResize();
 
    // リサイズイベント発生で実行
    window.addEventListener('resize', onResize);
 
    function onResize() {
        // サイズを取得
        const w = window.innerWidth;
        const h = window.innerHeight;
        // 描画サイズ
        renderer.setSize(w, h);
        // ピクセル比
        renderer.setPixelRatio(window.devicePixelRatio);
        // カメラのアスペクト比を正す
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
        console.log('h' + h + 'h' + h);
        // レンダリング
        renderer.render(scene, camera);
    }

    function tick() {
        requestAnimationFrame(tick);        
        renderer.render(scene, camera);
        controls.update();
        
    }
}

function update() {
    controls.update();
    requestAnimationFrame(update);

}

// 指定したマテリアル名がセットされている[ mesh ] を返します
function getMatbyName(_o, _name){
    let refO = null;

    if(_o.material && _o.material.name.indexOf(_name) > -1 ){
        return _o;
    }

    if(_o.materials){
        for(let i =0; i < _o.materials.length; i++){
            refO = getMatbyName(_o.materials[i], _name );
            if(refO) {return refO;}
        }
    }

    for(let i =0; i < _o.children.length; i++){
        refO = getMatbyName(_o.children[i], _name );
        if(refO) {return refO; }
    }

    return refO; 
}

補足情報（FW/ツールのバージョンなど）

Blender3.6
three.js r124

Comments

[cocy_eng]

補足です。
標準のマテリアル、例えば MeshBasicMaterial などであればマテリアルに下記オプションを付けることでアニメーションを再生することができました。

morphTargets : true
（アニメーションの種類によっては skinning : true が良い場合もあるようです）

しかし、上記コードのようなシェーダーマテリアルでは機能しませんでした。
惜しいところまで行っている気がするのですが…。引き続き情報ある方はお待ちしております。

Answer 1

[香車]東上☆Aho(英帆)☆海美「
teratail での回答を求めるなら [3DCG][Blender] 等のタグをつけた方がいい。

回答をもとめるなら、#3DCG や #Blender #b3d とか、つけて X (旧 Twitter) に投げた方がいいかも。
」

Comments

[cocy_eng]

ご指摘ありがとうございます。タグが消えてしまっていることに気づきました。
一度誤って解決済みにしてしまい、それを取り消したからだと思います。
タグを復活させる方法がないか、確認してみます。