Guide on transferring morph targets from Blender to three.js?

Is there a way to export morph targets from a Blender file to three.js? I'm aiming to create a json file containing an array called "morphTargets." Any advice on how to achieve this?

Answer №1

If you're working with Three.js, you're in luck because it has a built-in Blender exporter available.

All you need to do is copy the io_mesh_threejs folder from three.js/utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs to the scripts/addons folder in Blender. For example, on OSX, you can find it at /Applications/Blender/blender.app/Contents/Resources/2.73/scripts/addons (remember to right-click on blender.app and choose Show Packages Content).

After copying the folder, restart Blender and go to the Preferences Panel to enable the exporter in the Add-ons tab. You'll see a new option in the menu: File > Export > Three.js(.json)

When you have your morph animated mesh selected, use this option and be sure to check the Morph animation option in the Animation section of the Exporter options:

This process should produce the .json file you need with "morphTargets" included.

Answer №2

After some experimenting, I managed to solve the issue at hand. By assigning a keyframe to each morph target and adjusting the timeline to include only those keyframes, I was able to successfully export the animation with the morph effect intact.

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

"Efficiently handle JSON and binary data passing with the enhanced functionality of Express Body Parser

Within my express app router, I have routes set up to handle both POST requests with JSON data and binary data. The issue arises when I use body parser to parse the JSON data, as it incorrectly interprets the binary data as JSON and causes errors during th ...

In Vue.js, when attempting to arrange an array of objects in descending order based on a specific key (such as "name"), the intention is to prioritize data containing uppercase letters to be displayed

I am struggling to organize an array of objects based on a specific key (name). My goal is to have the data with uppercase letters appear first, but for some reason, it's displaying the lowercase data first. I've been using the lodash method "ord ...

Is there a way to trigger the vue-cli build command automatically when specific files are modified?

One way I can build my JavaScript file is by using the following command: vue build main.js --dist dist --prod --lib While this works, I am looking for a way to automate this process whenever I make changes to my JS or Vue files. I prefer not to rely on ...

What is the process of displaying JSON response data in AngularJS?

I am attempting to retrieve URL information using get_meta_tags in Laravel and then display it in my AngularJS application. However, the issue is that the response is returned in the following format: Array ( [title] => Mercy Badshah Full HD [d ...

How can I stop jQuery mobile from updating the document title?

It appears that jQuery mobile automatically uses the text content of data-role="header" to set the document.title. For example: <div data-position="fixed" data-role="header"> <h1>This text</h1> </div> To work around this, I ha ...

Checking a sequence using a list of strings

I have an array containing a list of IDs: var listId: string[] = []; var newId: boolean; for (let i in data.chunk) { listId.push(data.chunk[i].aliases[0]); } My objective is to compare a new ID with the entire list. If the new ID is found in the list ...

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

After the modal finishes fading out, I want my form to be submitted and sent to the email file "refreshform.php". However, currently after the modal fades out, the form does not submit or post anything to the PHP file for sending the email. It simply fades ...

Is there a way to implement jQuery.closest() using DOM manipulation or pure JavaScript?

Here is the HTML I am attempting to target. Given this HTML structure: <table class="non-unique-identifier table"> <tr><td><div id="unique-identifier"></div></td></tr> </table> I am trying to select #unique ...

JavaScript Event Listener not Working Properly

I've been attempting to implement a feature on my website where the header hides when scrolling down and re-appears when scrolling up. However, I'm struggling to make use of the code snippet below to achieve this functionality. Despite my thoroug ...

Is it recommended for Protractor Page Objects to reveal ElementFinder?

Our team is currently debating whether or not to prohibit the exposure of "ElementFinder" and "ElementArrayFinder" in our Page Objects. The main point of contention is a quote by Simon Stewart. Page Objects Done Right - selenium conference 2014 (page.7) ...

Error: The reset function cannot be executed on $(...)[0]

Purpose My aim is to clear a form once it has been successfully submitted. Problem Upon submitting the form, I encounter the error message in my console: Uncaught TypeError: $(...)[0].reset is not a function When examining the content before resetting, ...

The tablesort feature is experiencing difficulty sorting tables with dynamically changing content

I have a question about sorting columns in a PHP file that calls a JS file. The PHP file contains two tables with the table sorter plugin implemented, but one of them works and the other doesn't. The working table is populated through an Ajax call, wh ...

Upon sending a POST request, an UnhandledPromiseRejectionWarning was triggered due to an unhandled promise

Whenever I try to make a post request, I keep encountering this particular error message: UnhandledPromiseRejectionWarning: Unhandled promise rejection. If anyone out there can shed some light on why this issue is occurring, I would be extremely grateful ...

(JS) utilizing an external .js function by using the <script> tag

Looking to execute the function cookiefix() from main.js, which is linked at the bottom of my HTML file. echo '<body>'; if(!isset($_COOKIE['clicked'])) { if(!isset($_COOKIE['count'])) { echo '<script type="text/ ...

Instructions on changing the color and font weight of an asterisk within a Textfield using Material UI

Is there a way to style the asterisk in red and bold within a Textfield using material UI? I have a placeholder text without a label, as my label is null or empty. I would like to make the placeholder star RED. Is this possible? Here is the code snippet: h ...

What is the process for adding JSON data to a dropdown menu using PHP AJAX?

I am trying to populate a select html element with data from a list of JSON results. Here is the code I have attempted: JSON output: jquery loop on Json data using $.each {"Eua":"Eua","Ha'apai":"Ha'apai",& ...

Error: An issue occurred with the tasks in the Gruntfile.js file

pm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74041506001a1106041b0600151834445a445a44">[email protected]</a> No description npm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" ...

Checking for the existence of a row in Node.js using Sqlite3

Wondering if it's possible to verify the existence of a row using node.js and the sqlite module. I currently have this function in place, but it always returns false due to the asynchronous nature of the module. function checkIfRowExists(username, pa ...

Struggling with Three.js: Texture Shader Flickering Issue

In my search across various forums, I have not come across anyone facing the same issue as me. The problem I am encountering involves using a shader on a sphere to achieve an inner glow effect and apply a texture of the earth. Despite successfully implemen ...

I am experiencing an issue with my Node.js query, as it is not successfully adding a user to my database using

I'm currently working on developing an API using Node.JS, express, and MySQL with the Sequelize ORM. I wanted to do this project properly without relying on the CLI for every task. However, I've encountered a problem where my API fails to create ...