As I work on creating a portfolio using three.js, I've encountered an issue with my animation sets not playing after triggering an event. Initially, the code worked fine, but now I keep receiving a series of warnings and the code doesn't run at all.
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:3581These errors are repetitive for every bone in the armature and the mesh itself (the model being a character that represents me with an added armature). Interestingly, the mesh does not encounter the scale error. Below is the relevant code snippet:
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 );
// Animation setup
mixer = new THREE.AnimationMixer( model );
intro = mixer.clipAction( gltf.animations[2], model ).setLoop(THREE.LoopRepeat);
mixer1 = new THREE.AnimationMixer( model );
afkone = mixer1.clipAction( gltf.animations[0], model ).setLoop(THREE.LoopRepeat);
mixer2 = new THREE.AnimationMixer( model );
trans = mixer2.clipAction( gltf.animations[3], model ).setLoop(THREE.LoopOnce);
mixer3 = new THREE.AnimationMixer( model );
afktwo = mixer3.clipAction( gltf.animations[1], model ).setLoop(THREE.LoopRepeat);
// Play initial animation
intro.play();
}, undefined, function ( error ) { console.error( error ); } );
// Renderer setup
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;
// Ambient light setup
const ambientLight = new THREE.AmbientLight(0xFFFFFF);
ambientLight.intensity = 4;
scene.add( ambientLight );
// Animation loop
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 );
}
And the model: download
To summarize, I'm facing issues with missing properties in the armature according to three.js, despite them being present in Blender and during AnimationAction printing. This prevents any animations from running, and I seek assistance in resolving this error. Any guidance would be appreciated, and feel free to let me know how I can assist you in solving this challenge. (FYI: This was done on GitHub Codespaces)
Despite attempting to revert to a previously functional model and implementing the animation set, the same error persists without any visible discrepancies in the code.
EDIT: For those encountering similar issues, try simplifying your code to its essential components for operation before gradually expanding it. My oversight was adding too much too quickly and overlooking crucial parts of the code, particularly setting model = gltf.asset. Special thanks to Don McCurdy for the support!