Dynamic buffer geometry featuring morph attributes fails to refresh the shadow animation

Recently, I revamped the MD2 code within the library to utilize THREE.BufferGeometry instead of THREE.Geometry, resulting in a significant reduction in memory usage. The process involved converting the model to THREE.BufferGeometry post-loading and making adjustments to the MorphBlendMesh code to incorporate attributes for the morphTargetInfluences.

While this modification has been successful overall, there is one lingering issue: the shadows fail to update during animation, remaining fixed at the shadow displayed in the initial frame of the animation.

Unfortunately, documentation regarding the use of morphTargetInfluences attributes is scarce, leaving me with limited resources to address the problem effectively.

Regrettably, the extensive spread of the code throughout various parts of the base makes it challenging to share it here.

Thus, I am hopeful that someone may possess valuable insights into how shadows can be updated during morph animations and offer guidance on where to begin investigating this particular issue.

javascriptthree.jsbuffer-geometry

Answer №1

After thorough investigation, I have successfully identified the issue and devised a temporary fix!

Upon inspecting the code within the shader renderer, it has been determined that it checks for the existence of geometry.morphTargets with a length greater than zero before setting the 'usemorphing' flag. However, in the case of converted buffer geometries, the .morphTargets field is absent as this information seems to have transitioned to .morphAttributes for buffer geometries.

To address this discrepancy, my creative workaround involves creating a pseudo .morphTarget list by executing the following:

BufferGeometry.morphTargets = [];
BufferGeometry.morphTargets.push(0);

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

Implement dynamic configuration injection by allowing users to specify the name of a configuration file during runtime, instead of having it fixed in the code

In my development using webpack, I am exploring ways to make my application configurations more dynamic. Presently, the project is a create-react-app that has been ejected. For instance, when creating a local build in my package.json file, I include the f ...

javascriptjsonnode.jswebpack

How to access an HTTP website from an iframe hosted in an HTTPS parent window

I'm currently troubleshooting an SSL issue that is being caused by insecure content loaded within an iframe. Both of my domain addresses are hosted on the same server, but only one has SSL. When I access the first site with SSL and then navigate to th ...

javascripthtml.htaccessiframessl

Developing a react component with personalized characteristics

Hello there, I am just starting out with React and building my first app. Currently, I am working on creating a custom element that includes specific data attributes. Right now, I am coding in plain ES5 without using JSX, Babel, or ES6 – those will be in ...

javascriptreactjs

Ways to enhance the functionality of an input component

Within my React app, I have an input component that triggers an onChange event when connected to another component: <input type="text" onChange={onChange} /> Now, I am looking to enhance this input component by incorporating a prop from another com ...

javascriptreactjsecmascript-6

An issue in cordova android related to cross-domain restrictions

My small cordova app utilizes beacon plugins to send a get request to a specific page once beacons are discovered. However, I have been facing issues with sending the get request to my server using the code snippet below with jsonp. Despite trying out di ...

javascriptandroidajaxcordovacross-domain

Show the flex items arranged horizontally

This template is generated dynamically by Django: <div class="center row"> <h3><span>The Core</span></h3> {% for member in core %} <a class="core_img " href="#"> <div class="img__overlay"> ...

javascripthtmlcss

The mongoose library is not throwing any errors, indicating that the database connection has been established successfully

There are no errors in my code and it's a simple mongoose query - const posts = await Post.find(); console.log(posts); res.status(200).json({ status: 'success', results: posts.length, data: { ...

javascriptmongodbapimongoose

Ways to retrieve an object initialized within a function

I'm sorry if my title is a bit confusing. I'm currently working on creating an object that contains key-value pairs of other objects. Below is the code snippet I'm testing in the Chrome console. When I try to create the object using the Cha ...

javascriptfunctionobjectreturn

Ways to extract the value from a v-for loop within a <select> and <option> element

Currently seeking assistance in extracting a value from a v-for loop. Can someone provide guidance on this matter? Below is the code I am working with: Select Country: <select @change="selectCountryStats(country.code)"> ...

javascriptvue.jsvuejs2

Encountering an Unexpected Token Import Issue with Page Objects in Webdriver.io and Node.js

Hi, I've encountered an issue while attempting to run my test scripts using Node.JS and Webdriver.io. Everything was functioning correctly until I decided to implement the Page Object Pattern. I am now receiving an error in the console output: ERROR: ...

javascriptnode.jswebdriver-io

What is the best way to integrate various JQuery and DataTables functionalities and organize them in a specific order

I managed to implement some features into jQuery datatables by following tutorials. However, I am struggling to combine these features and make them work together seamlessly. If you search for these features online, you will likely find where they originat ...

javascriptjquerydatatables

Issue with display of 3D model in THREE.js due to graphical glitch

I've encountered a visual anomaly with a model I imported using JSONLoader. It's difficult to describe, you'll have to see it for yourself. It seems to be related to the different materials and the camera's point of view. You can acc ...

javascript3dthree.js

The commitment to Q ensures that errors and exceptions are effectively communicated

Here is a code snippet that I am using to transform a traditional nodejs function into a promise-based one: Object.defineProperty(Function.prototype, "toPromise", { enumerable: false, configurable: false, writable: false, value: function ...

javascriptnode.jserror-handlingq

AngularJS Directive for Creating Dynamic Menus

I am looking to implement a custom mmenu directive in my Angular application. Currently, I have set it up and utilized link: function(){} within the directive. For more information about the jQuery Plugin, you can visit their webpage here: Below is the c ...

javascriptjqueryangularjs

Mocking functions using Sinon and Asynchronous calls

I am working on a project where I have a file called mainFile that utilizes a method named helperMethod. This method, which resides in a separate file called helperFile, returns a Promise. How can I mock the output of the helperMethod? Here is the structu ...

javascripttypescriptsinon

Verify whether the input is currently being focused on

My current issue involves an input field that requires a minimum number of characters. If a user begins typing in the field but then switches to another without meeting the character requirement, I would like to change the text color to red. I attempted u ...

javascriptangularjs

Take command of the asynchronous loop

I have two Node.js applications that serve different purposes. The first is an Express.js Server (PROGRAM1), responsible for providing the user interface and RESTful APIs. The second is a web crawler (PROGRAM2), tasked with continuously reading items, do ...

javascriptnode.jsmongodbexpress

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

javascripthtmlnode.jsexpress

Incorporating server-side rendered components into a Vue.js parent component

I have a server-side rendered page that includes information about "orders" and a root Vue object initialized as the "parent object." Is it feasible to assign the rendered HTML orders as children of that parent Vue object? Vue.js is known for its dynamic ...

javascripthtmlvue.jsserver-side-rendering

How can validation of input fields be implemented in React Js?

Currently, I am dealing with a variable (in my actual application it is an API) named data, which contains nested items. Starting from the first level, it includes a title that is already displayed and then an array called sublevel, which comprises multip ...

javascripthtmlreactjsformsvalidation