Guide on refreshing threejs morph targets using blender GLTF shape keys

I have been working with a Blender file that contains multiple shape keys. By adjusting the slider in Blender, I am able to manipulate these shape keys.

(screenshot):

Currently, I am exporting the GLTF and then importing it into Three.js.

Upon console.loging the mesh from the GLTF, I noticed that the shape keys from Blender are present in the morphTargetDictionary. I have also set up a GUI to adjust the morphTargetInfluences for each shape key:

folder
.add(params, "influence2", 0, 1)
.step(0.01)
.onChange(function (value) {
  console.log(dodec.morphTargetInfluences[1]);
  dodec.morphTargetInfluences[1] = value;
  //dodec.updateMorphTargets();
});

Despite my efforts, updating these morphTargetInfluences does not seem to produce any changes. How can I configure this setup so that I can replicate the same effects in Three.js as I achieve in Blender by adjusting the sliders for each shape key?

update

For reference, here is a codepen showcasing my current progress:

https://codepen.io/heaversm/pen/xxVNmdb

javascriptthree.jsgltf

Answer №1

If you are looking to target a specific object, be sure to focus on the mesh by using 

dodec = scene.getObjectByName("Solid_0");
. Examining the details of dodec will guide you to the desired mesh.

Remember that GLTF exports include nested groups, so your mesh could potentially be within a group structure.

Additionally, make sure to enable morphTargets: true in your material settings:

const material = new THREE.MeshStandardMaterial({
  color: 0xffa400,
  emissive: 0xbb5a5a,
  side: THREE.DoubleSide,
  flatShading: true,
  morphTargets: true, // don't forget this setting
});

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

React throwing error: Context value is undefined

Why is the Context value showing as undefined? The issue lies in src/Context.js: import React, { Component } from 'react'; const Context = React.createContext(); export class Provider extends Component { state = { a: 1, b: 2 }; render( ...

javascriptreactjs

Bootstrap carousel button that tracks the number of clicks

Unfortunately, I am facing a challenging issue with creating a click counter for the Bootstrap carousel button. The problem seems to be related to the span element for the previous and next icons. The button counter is not registering clicks on the respec ...

javascriptbootstrap-5buttonclick

switching the icon for custom sorting in AngularJS

I managed to implement a custom grid style and sorting icon in AngularJS successfully, except for the toggling of the sorting icon. Here is my HTML code for headers: <div ng-app="myApp"> <div ng-controller="TableCtrl"> <table ...

javascriptjqueryangularjs

Utilize a script to interact with CasperJS

When it comes to running my CasperJS script, I typically do so from the command line interface using this command: casperjs --ignore-ssl-errors=true --ssl-protocol=any scrape.js In order to fully automate the process, I am now looking into calling the sc ...

javascriptnode.jsphantomjscommand-line-interfacecasperjs

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...

javascriptjquerycssajax

When is the best time to assign properties to mobx domain objects?

When it comes to tackling a specific problem in my react/mobx application, I'm facing challenges finding an optimal solution. Imagine having multiple boxes that need to be positioned on the screen based on various factors such as interdependency betwe ...

javascriptreactjsmobxmobx-react

Tips for controlling focal length using Aframe

I am currently developing a web application using the Aframe.js framework built on top of Three.js. The main purpose of this application is to display 360 degree renderings created by 3D artists using Unreal Engine. Although everything is functioning well ...

three.jscameraaframe

Fetching and displaying JSON objects in a Rails view

I have implemented a search functionality on my Rails application. The Search controller is responsible for fetching spaces based on a query in the model, and then returning them as JSON. In order to retrieve this data, I am utilizing $.getJSON within a vi ...

javascriptjqueryruby-on-railsajaxjson

Error: The variable $traceurRuntime has not been defined in the AngularJS application

Currently, I am utilizing [gulp-traceur][1] to convert es6 to js within my angularjs application (version 1.x). However, when attempting to compile a for loop, an error occurs: ReferenceError: $traceurRuntime is not defined It appears that I may need to ...

javascriptangularjsgulpecmascript-6gulp-traceur

What is the preferred workflow for client-side modules: (Browserify + npm + gulp) or (RequireJS + Bower + gulp)?

As I delve into various client-side Javascript modules workflows for my current Node.JS Express project, I find myself torn between Browserify + npm + gulp and RequireJS + Bower + gulp. While I lean towards CommonJS due to its syntax, the idea of sharing ...

javascriptnode.jsbowerbrowserifycommonjs

Turning a text into a JSON data structure

How can I make JavaScript recognize a string as JSON? I have a function that only works when passed a JSON object. If I pass a string with the same format as JSON, it doesn't work. I want to find a way for the function to treat the string as JSON, ev ...

javascriptajaxjson

Identify when a request is being executed using AJAX by checking the URL

My current code includes multiple ajax requests from various JavaScript files. I am looking for a way to identify specific ajax requests and interrupt their execution in order to prioritize a newer one. Is it possible to detect and stop ajax requests based ...

javascriptjqueryajax

How can I implement two dropdowns in jquery?

One of my dropdown menus is currently utilizing this code to fetch the selected value: $(document).on('change','#DropDown1',function() { var value1 = $(this).children("option:selected").val(); var data = {"key": value1}; ...

javascriptjqueryajax

What is the process for uploading an image using fetch?

After just starting to learn react, I decided to create a gallery App. However, I am facing an issue when trying to post pictures to the API. Whenever I click on the ADD button, nothing happens except for an error 500 being logged in the console. Below is ...

javascriptreactjspostfetch-api

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

javascripthtmlcss

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

javascripthtmlcsstwitter-bootstrap

React - Triggered a higher number of hooks compared to the prior render (potentially based on a condition

I have encountered this error numerous times: The number of hooks rendered is higher than during the previous render. From my understanding, this issue is related to an early return statement. I am currently developing a library for our company where I w ...

javascriptreactjsreact-hooks

Styling Based on Conditions in Angular

Exploring the unique function of conditional formatting in Microsoft Excel, where color bars are utilized to represent percentages in comparison to the highest value. https://i.sstatic.net/nTGCJ.png Is there a way to replicate this functionality using HT ...

javascriptcsshtmlangularhtml-table

Is it feasible to capture a screenshot of a URL by using html2canvas?

Is it possible to take a screenshot of a specific URL using html2canvas? For example, if I have the following URLs: mydomain.com/home mydomain.com/home?id=2 mydomain.com/home/2 How can I capture and display the screenshot image on another page? window ...

javascriptjqueryhtmlcsshtml2canvas

Utilizing JavaScript to dynamically set the height and width of a canvas based on the user input

How can I take user input for height and width values and apply them to a newly created canvas? I am able to retrieve the values, but I'm unsure how to set them as the style.height and style.width properties. var createNewCanvas = document.getEleme ...

javascriptcsshtmlcanvas