Three.js动画大量节点缺失问题排查与解决求助

运行Three.js个人作品集项目时，触发动画后出现大量重复警告，代码完全无法执行，错误信息如下：

THREE.PropertyBinding: No target node found for track: LowerBone.position. index-e8a71580.js:3581 
THREE.PropertyBinding: No target node found for track: LowerBone.quaternion. index-e8a71580.js:3581 
THREE.PropertyBinding: No target node found for track: LowerBone.scale. index-e8a71580.js:3581

该错误会针对绑定骨骼的角色模型的每根骨骼重复出现，模型本身仅会出现位置和四元数错误，无缩放错误。此前代码可正常运行，替换之前能工作的模型后问题依旧，Blender中骨骼属性均存在。

相关代码 #

Index.html #

<!DOCTYPE html>
<html>
    <head>
        <title>Portfolio</title>
        <style>
            canvas#Rendered {
                position: absolute;
                top: 0px;
            }
            body {
                background-color: black;
            }
        </style>
    </head>
    <body>
        <script type="module" src="main.js"></script>
    </body>
</html>

Main.js #

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

function windowWidth() {
    return window.innerWidth / 2;
}

var phaseone, phasetwo = false;

let mixer, mixer1, mixer2, mixer3/*, mixer4*/;
let intro, afkone, trans, afktwo;

const clock = new THREE.Clock();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, windowWidth() / window.innerHeight, 0.1, 1000 );

var model;
const loader = new GLTFLoader();
loader.load( 'untitled.gltf', gltf => {

    model = gltf.asset;

    scene.add( gltf.scene );

    console.log( gltf.animations );

    mixer = new THREE.AnimationMixer( model );
    intro = mixer.clipAction( gltf.animations[2], model ).setLoop(THREE.LoopRepeat);
    console.log( intro );
    mixer1 = new THREE.AnimationMixer( model );
    afkone = mixer1.clipAction( gltf.animations[0], model ).setLoop(THREE.LoopRepeat);
    console.log( afkone );
    mixer2 = new THREE.AnimationMixer( model );
    trans = mixer2.clipAction( gltf.animations[3], model ).setLoop(THREE.LoopOnce);
    console.log( trans );
    mixer3 = new THREE.AnimationMixer( model );
    afktwo = mixer3.clipAction( gltf.animations[1], model ).setLoop(THREE.LoopRepeat);
    console.log( afktwo );
    intro.play();

}, undefined, function ( error ) { console.error( error ); } );

const renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( windowWidth(), window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.domElement.id = "Rendered";
renderer.domElement.width = windowWidth();
renderer.domElement.style.left = windowWidth() + "px";
document.body.appendChild( renderer.domElement );

camera.position.z = 10;

const ambientLight = new THREE.AmbientLight(0xFFFFFF);
ambientLight.intensity = 4;
scene.add( ambientLight );

function animate() {

    requestAnimationFrame( animate );

    const delta = clock.getDelta();

    if ( delta && mixer)  {
        mixer.update( delta );
    }

    renderer.render( scene, camera );

}

window.onresize = function () {

    camera.aspect = windowWidth() / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( windowWidth(), window.innerHeight );

}

问题解决方法 #

遇到此类问题可先将代码简化至最小运行版本，确认可用后再逐步添加功能。本次问题根源是代码添加过快遗漏关键部分：错误地将model赋值为gltf.asset，正确的做法应该使用gltf.scene作为AnimationMixer的目标对象。

内容的提问来源于stack exchange，提问作者Medaturd76