Is there a way to export a modified OBJ geometry from a Three.js scene?

Every time I make changes and export my Three.js scene with a SkinnedMesh model, the original imported model gets saved instead of the updated version. Despite rotating bones and adjusting morph targets, the exported model remains unchanged.

Even though the console shows that the bone and morph target data has been modified, the exported model does not reflect these updates. It seems like the changes are not being captured during the export process.

Within my render() function, the model is exported as an OBJ file. Here's a snippet of the code:

function render() {
    // Code to manipulate mesh and lights
    // Exporting part of the code

}

To view the complete code, please visit this JSFiddle link - https://jsfiddle.net/markskelton/ord9gL1a/. Unfortunately, I couldn't find a way to include the model for others to interact with using the code provided.

Answer №1

In my personal save process, I always follow these steps after setting the size, position, and rotation:

    child.updateMatrix();
    child.geometry.applyMatrix(child.matrix);
    child.matrixAutoUpdate = true;
    //If you want to ensure that the matrix is ready for export, reset it to identity.
    child.matrix.identity();

Although this method works perfectly fine for me, some users seem to struggle with it. Below is the complete function I use, including comments. If anyone encounters issues, it's recommended to provide a new question with code examples.

objSaver.prototype.modifyMeshToRhinoObj = function (mesh) {
        var exporter = new THREE.OBJExporter();
        //We don't save the original extrusion geometry; instead, we clone it and adjust its axis and scale for external settings.
        var polygonGeometry = new THREE.Geometry().fromBufferGeometry(mesh.geometry._bufferGeometry);
        var volumeClone = new THREE.Mesh(polygonGeometry, [
                new THREE.MeshBasicMaterial({ color: 16711680 }),
                new THREE.MeshBasicMaterial({ color: 16711680 })
        ]);
        volumeClone.scale.set(1, 1, mesh.scale.z);
        volumeClone.rotation.x = de2ra(180);
        volumeClone.rotation.z = de2ra(-90);
        volumeClone.updateMatrix();
        volumeClone.geometry.applyMatrix(volumeClone.matrix);
        volumeClone.matrixAutoUpdate = true;
        volumeClone.matrix.identity();
        volumeClone.geometry.verticesNeedUpdate = true;
        mesh.userData.cloned = true;
        mesh.userData.baseline = mesh.userData.buildingHeight;
        return exporter.parse(volumeClone);
};

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

Tips for retrieving page source with selenium Remote Control

Looking to Develop a Basic Java Web Crawler. WebDriver driver = new HtmlUnitDriver(); driver.get("https://examplewebsite.com"); String pageSource=driver.getPageSource(); System.out.println(pageSource); The result is as follows: <!DOCTYPE html PUBLIC ...

Tips for implementing an if else statement in ReactJS while utilizing the useEffect hook

Below is the code snippet for returning a Plotly graph. I would like to display a message or alternative layout when there is no data available for the graph, such as showing "No data available". How can I achieve this? import React, { useEffect } from ...

Create a selection menu in an HTML dropdown list using unique values from a JSON object that is separated by commas

I'm working with a JSON object that contains multiple key value pairs, one of which is the Languages key. This Languages key holds comma-separated values such as "English, Hindi, French," and so on. My goal is to extract distinct values from the Lang ...

The Vue property or method is unrecognized when utilizing the non-minified version

When I attempted to display the name 'John' using an inline template in a simple Vue example, I encountered the following error message: [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. ...

Ways to resolve the angular error "Encountering an unhandled exception: Unable to locate module 'typescript' "?

I'm encountering errors when running ng serve. I've attempted the following code as well, but I'm still facing the same error: npm install -g typescript https://i.sstatic.net/Gyi71.png Error displayed in text format D:\xampp\htd ...

What is the process of converting an image taken with the 'react-camera-pro' into a byte array?

I am in the process of capturing an image using a camera through 'react-camera-pro' and I need to figure out how to convert the captured image into a byte array. Here is the snippet of code that I am working with: const camera = useRef(null); ...

FlexNav excluding

I have implemented FlexNav for my website navigation. The demo I used sets the width of top-level menu items to 20%, which works well with five menu items. .flexnav li { . . . width: 20%; } However, in my menu, the text lengths of the top ...

What is the best way to display a Vuex state based on a function being activated?

I have noticed similar questions on this topic but couldn't find a solution, so I decided to create my own. Here's the issue: I have an array named "allCountries" in the state, initially filled with 250 country objects. I am successfully render ...

Navigating through a large number of distinct items in Three.JS

I have hit a roadblock in my project development. I am striving to create a level using various phong materials on objects of unique sizes and shapes. However, Three.JS's default texture handling causes them to stretch out and look distorted on meshes ...

The functionality of json_encode seems to vary when applied to different PHP arrays, as it successfully encodes data for

My current challenge involves importing three arrays from PHP into JS using json_encode. Below is the code snippet I am currently working on: <?php $query2 = "SELECT * FROM all_data"; $result2 = $conn->query($query2); $bu = []; ...

What is the best way to transfer a string to a different Vue component?

Within my project, I have a masterData.js file that serves as a repository for my master data. This file retrieves data from my mongo db and distributes it to various components of the project. To facilitate this process, I have implemented a function with ...

Displaying Photo on Webpage using Bearer Authorization Token in JavaScript

In my JavaScript code, I am currently loading an image using the following method: var img = new Image(); img.onload = function () { .. }; img.src = src; However, I have recently realized that I need to secure the images on my server side with OAuth 2, j ...

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

NodeJS instructs open(html) to execute first before any other code is executed

I am evaluating whether nodeJS is a suitable solution for a project I am working on during my internship. To summarize: I need the basicNode.js file to wait until the open('./basic.html') command has completely opened the browser and loaded its c ...

Issue with Jest Test Trigger Event Not Invoking Method

Currently, I am in the process of writing tests for my Vue application. One particular test involves a button that triggers a logout function. The goal is to determine if the function is executed when the button is clicked. Initially, I attempted to mock ...

Using Selenium to handle asynchronous JavaScript requests

Having recently started working with Selenium and JavaScript callback functions, I've encountered a problem that I can't seem to solve on my own. My issue revolves around needing to retrieve a specific variable using JavaScript. When I manually i ...

Can someone guide me on how to locate and access the port number?

In my Reactjs project root directory, I've created a .env file. This is what's inside my .env file: PORT = 30001 ... In my App.tsx file, I'm trying to access the port like this: const PORT_NUMBER = process.env.PORT; When I run yarn start ...

Converting a jQuery function into AngularJS: A step-by-step guide

I'm completely new to AngularJs and I recently created a slider function using jQuery. Now, my goal is to convert this function into Angular. Below is the code snippet that I have: <div class="slide-container"> <div class="slide-s ...

Encountering a "self is not defined" error while utilizing the Jodti-React text editor within a Next.js project

Issue with 'self is not defined' error while using jodti-react in a Next.js project import React, { useState, useRef, useMemo } from "react"; import Dashborad from "./Dashborad"; import JoditEditor from "jodit-react" ...

Choosing between radio buttons either horizontally or vertically within a table

Here is the markup I am working with: <table> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></ ...