There was an error in Threejs' PropertyBinding as it attempted to parse the trackName ".bones[].position

Version: THREE.WebGLRenderer 91dev

Struggling to achieve a basic chest opening animation using three.js. Unfortunately, encountering an error while trying to create an action.

PropertyBinding: Unable to interpret trackName: .bones[].position

Link to the complete animation JSON object on pastebin: Full JSON String. Here's a brief summary:

{
    "name": null,
    "fps": 30,
    "length": 0.5333333333333333,
    "hierarchy": [{
                "parent": -1,
                "keys": [{
                            "time": 0,
                            "rot": [
                                0,
                                0,
                                0,
                                1
                            ],
                            "scl": [
                                1,
                                1,
                                1
                            ],
                            "pos": [
                                0,
                                0,
                                0
                            ]
                        },

Created an Animation clip using the following commands.

    var clip = THREE.AnimationClip.parseAnimation(animation, armSkeleton.bones);
    geometry.animations.push(clip);

Value of clip:

duration: 0.6
name: "default"
tracks: […]
0: Object {
    name: ".bones[].position",
    times: […],
    values: […],
    …
}
1: Object {
    name: ".bones[].quaternion",
    times: […],
    values: […],
    …
}
2: Object {
    name: ".bones[].scale",
    times: […],
    values: […],
    …
}
3: Object {
    name: ".bones[].position",
    times: […],
    values: […],
    …
}
4: Object {
    name: ".bones[].quaternion",
    times: […],
    values: […],
    …
}
5: Object {
    name: ".bones[].scale",
    times: […],
    values: […],
    …
}
length: 6
__proto__: Array[]
uuid: "3E37E10B-74D0-4421-92AF-7A366CF3804F"

Error arises when trying to use the clip:

mixer = new THREE.AnimationMixer(mesh);
mixer.clipAction(mesh.geometry.animations[0]).play();

Error indicating threejs cannot interpret the trackname ".bones.position" despite the output from the parseAnimation function. Seeking guidance to identify any oversights. Appreciate any assistance.

Answer №1

Exploring the issue further, I discovered that the root cause of the error lied in the requirement for AnimationClip to have named bones. By assigning a unique name to each bone before utilizing THREE.AnimationClip.parseAnimation, I successfully resolved the error.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with Semantic UI Calendar not displaying properly

I am currently experimenting with the Semantic UI Calendar, where there is a date input field and a calendar that pops up when selected as demonstrated in this initial example. Since I am not familiar with this process, I am uncertain if I have properly li ...

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

Combining Server-Side HTML with React Components and Functions: A Guide

Utilizing Vue makes it simple for me to incorporate a Vue application as a container above the server-side rendering HTML like so: <body> <div id="appMain"> <!-- This serves as the primary element for Vue --> <!-- ...

Creating a thumbnail with a close button using an image

My code is available at the following link: https://codepen.io/manuchadha/pen/PBKYBJ In this form I have created, I am trying to implement an image upload feature using a file input. The goal is to display a thumbnail of the selected image below the file ...

Filtering an array of parent elements in Javascript based on a specific value found in

Trying to filter data from a 3-layer array based on child array values. Making progress but hitting a roadblock at the end. { "id": 1, "grandparent": "Timmy", "parents": [ { "id&q ...

Leveraging API data within React: A step-by-step guide

I have a React application where I am making API calls. To manage these calls, I created a separate file called dataService.js to contain all the functions for interacting with the API. However, when trying to log the data in my component, I am getting a ...

Using PHP Escape Functions in JavaScript

Can anyone help me with displaying item descriptions retrieved from a database query? Here is the code snippet that should display the description along with other details... <?php $type = "item"; $limit = 16; $preparedStatement = $SQL->prepare(& ...

What is the best way to retrieve the http.server object from the express application?

Currently, I am in the process of developing a server-side node.js application utilizing express to manage HTTP requests. In addition to this, I am incorporating websockets (socket.io) support into the application. The challenge I face is that I do not hav ...

Guide on how to validate react-multiselect with the use of Yup validation schema

If the multiselect field is empty, the validation message 'Product is required' is not being displayed. How can I validate this field? Here is the validation schema: validationSchema={ Yup.object().shape({ productID: Yup.string().requi ...

What is the level of visibility in Nextjs?

Is it safe to expose the sources of files located in the 'pages/' directory? For instance, if you set up a page specifically for administrators at pages/admin and restrict access through Middleware, does this enhance security measures? ...

Google Chrome's development tools are unable to detect the manifest

I have a file named manifest.json, and I included it in my HTML using <link rel="manifest" href="./manifest.json">. Despite everything seeming correct, Chrome developer tools are unable to detect my manifest file! This is the content of my manifest ...

The ng-click function ceases to trigger after the $location dependency is included in the controller

I need some help with running a ng-click function from my controller. The strange thing is, when I don't use the $location dependency, the ng-click function works fine. But as soon as I add $location to the controller, the ng-click function stops work ...

The size of objects on canvas is not consistent when loading with fabric.js loadFromJSON

Click here to view the code var canvas = new fabric.Canvas('canvas_1'); var canvas2 = new fabric.Canvas('canvas_2'); var imgObj = new Image(); imgObj.src = "https://gtaprinting.ca/wp-content/uploads/2021/05/blank-t-shirt-front-gre ...

Unable to access the value of an undefined property

In my HTML view, I have the following code: <form name="adduser" id="signupForm" novalidate> <span>First Name</span> <label class="item item-input" id="profileLabel"> <input id="profileInput" type="text" ...

The improper utilization or replacement of Jest mock in an Angular standalone component's unit test is causing issues

Presented here is a streamlined Ionic/Angular component with unnecessary code removed. import { IonicModule, ModalController } from '@ionic/angular'; @Component({ selector: 'my-component', templateUrl: 'my-component.html' ...

What is the best way to retain previous values without using an object array to store values in a React state?

My approach involves storing the previous values in an array of objects, where each object represents a key-value pair. For example: [{ActFollow: 'BlN'},{ActSendGift: 'BlY'},{ActSubscribe: 'BlY'}]. However, I aim to transform ...

Updating the styles of React Native components using stylesheets

I've created a unique React component with the following structure: import { StyleSheet } from 'react-native'; import { Input, Item } from 'native-base'; import Icon from 'react-native-vector-icons/FontAwesome'; import { ...

In JavaScript, how is the symbol "." referred to as?

While I am familiar with its purpose and the language terminology, could you please provide the official name for the period/dot used in Javascript/jQuery? Appreciate your help! ...

My React project is altering the direction of my image

Below is the code snippet used to retrieve the user's favorite products import React, { useEffect, useState } from "react"; import { Pagination, Row } from "react-bootstrap"; import { useDispatch, useSelector } from "react-red ...

`Finding and including the additional object in JavaScript`

Seeking guidance on how to manipulate a specific object in Javascript, I have successfully retrieved the object based on a filter, but I am unsure how to append `'in'='bank' and 'out'='bank'` of non-filtered ids to ...