What is the process for exporting meshes with morph changes from a threejs application?

I'm having trouble customizing a mesh and exporting it using the gltfExporter from Threejs. Despite my efforts, the export still includes all morph/shape keys, which I want to remove from the final exported mesh.

Attempts to clone the scene/mesh have been unsuccessful.

function exportModel() {
    var exporter = new THREE.GLTFExporter();
    if (!gltfExportEnabled) gltfExporterConfig.binary = false;

    var finalRenderModel = mainScene.children[2];
    // Remove Morph Targets
    if (!!removeExportMorphs) {
        // finalRenderModel.children[0].children[1].morphTargetDictionary = [];
        // finalRenderModel.children[0].children[1].morphTargetInfluences = [];
    }
    exporter.parse([finalRenderModel], function(gltf) {
        if (!!gltfExportEnabled) generateDownload([gltf], exportFileName + ".glb");
    }, gltfExporterConfig);
}

var generateDownload = (function() {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function(data, name) {
        var blob = new Blob(data, { type: "octet/stream" }),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = name;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

The exported mesh retains all morphs/shape keys or fails to export altogether.

Answer №1

Would it be beneficial if you also ran the following code snippet:

finalRenderModel.children[0].children[1].geometry.morphAttributes = {};

The geometry is assigned morph attributes here. Whenever a new instance of Mesh is created, Mesh.morphTargetInfluences and Mesh.morphTargetDictionary are generated based on this data.

This pertains to version three.js R107.

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

Invoking JavaScript function from an Android Activity

I have a simple JS function that is supposed to set values of some html contents, but it doesn't seem to be working properly. Here is the code for the JS function: function SetEdits(name,email,pic,date) { document.getElementById("myPic").src=pic; doc ...

Detecting the specific button that was selected with PHP

I am in the process of developing a website for a production company where, upon clicking on a director's name from the menu, all other menu items disappear and only the selected director's biography and work are displayed. My current challenge ...

If a particular <td> element is present on the page, exhibit a unique <div>

I have a webpage with various HTML elements. <div class="alert">Your message was not sent.</div> <p class="pending">Email Pending</p> I would like to display the div.alert only if the p.pending is present. Is ...

Instructions on selectively sorting an array within a MongoDB collection document

Seeking guidance as a newcomer to MongoDB. I am attempting to create a collection in my database with a single document that contains a key `cities`, which is an array comprising of 124247 objects. Below is the code snippet for reference: const express = ...

Incorporating YouTube links into calendar events for each specific date

Our team is currently developing an online class website where our client wants to incorporate recorded classes. These recorded classes will be uploaded to YouTube in unlisted format and then linked to specific calendar dates. I will share the code for the ...

The npm postinstall script is functional, however, it does not complete successfully and ends

I have encountered an issue while trying to solve a problem with my project. In my package.json file, I have included a postinstall script that connects to a database and calls a function to write data into it. The script seems to be working fine as the da ...

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css. While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `ani ...

Restrict the occurrence of a specific element in the array to a maximum of X times

Functionality: A feature in this program will randomly display elements from an array. Each element can only be shown a certain number of times. Issue: I am unsure how to limit the number of times each element in the array is displayed. Currently, all ...

Uploading my application on multiple servers after making changes using AngularJS and PHP

Currently, I am working on an angular-php web application that is live online for multiple users, each on their own subdomain. These subdomains include: sub1.mydomain.com sub2.mydomain.com sub3.mydomain.com sub4.mydomain.com sub5.mydomain.com Issue: An ...

Remove the background color from a semi-transparent circular CSS div when it is being dragged

My circular div is being dragged for a drag and drop operation, but there's always a translucent square around it. How can I remove this unwanted effect? body{ background : #BBD1DF; } .dragdemo { width: 170px; height: 170px; line-hei ...

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

Angular - ui-router states are not being detected

I'm currently working on a Spring and Angular JS web application project. The structure of the project is as follows:https://i.sstatic.net/xgB4o.png app.state.js (function() { 'use strict'; angular .module('ftnApp') .con ...

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Upon receiving a response from the backend, I am saving it in a variable called "allinfo" in my controller. The data received includes the name, date of birth, and hobby of a person. The hobby is an array that can contain any number of elements. In my vie ...

Struggling to meet PWA lighthouse test requirements even with service worker correctly installed

Recently, I've been diving into PWA development and I've encountered a roadblock. Despite successfully setting up my service worker and caching files, my app is not receiving the PWA mark for being installable when tested with Lighthouse. I' ...

The use of callbacks in Model.findById() is now deprecated due to a MongooseError

Hello there! I've run into an issue and could use some assistance, thank you in advance! Running MONGOOSE VERSION: "mongoose": "^7.0.3" Error Message: MongooseError: Model.findById() no longer accepts a callback at Function.findB ...

How can one hand over a file to the http.write method in Node?

When I attempt to print a file using the res.write() method, I encounter an error: TypeError: First argument must be a string or Buffer This is my code snippet: var fs = require("fs"); var http = require("http"); http.createServer(function (req, res){ ...

Parse the XLSX file to extract data needed for the update query

When using the XLSX NPM library to read an XLSX file and converting it to JSON, my XLSX sheet follows this format: skill id name xx abc 4578 express-basic 30 4698 express-advanced 60 qwerty 7856 express-basic ...

What steps can I take to set a strict boundary for displaying the address closer to the current location?

While the autocomplete feature works perfectly for me, I encountered an issue where it suggests directions away from my current location when I start typing. I came across another code snippet that uses plain JavaScript to solve this problem by setting bou ...

Enable Class exclusively on upward scrolling on the browser

Is there a way to dynamically change the class of an element only when the user scrolls the browser page upwards? Issue Filide>> JavaScript $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll <= 100) { ...

How can I configure my React Project to direct users to example.com/login.html when they land on the root URL?

My goal is to verify a user's identity through a third-party authentication server. The redirect_uri indicates that after the user logs in, they will be redirected to example.com/login.html. Inside the login.html file, there will be specific html/scr ...