Exporting meshes from Object3Ds to GLTF files exclusively in Three.js

I've been searching high and low, but I can't seem to find the answer:

In Three.js, the GLTFExport feature allows for exporting specific objects when they are named in the exporter.

Here's my predicament:

In my scene, I have a varying number of Object3Ds with child Meshes that I want to export. However, even after removing everything from the scene except for the objects, their child meshes, and a helper to display face normals direction, I keep encountering this error:

Uncaught Error: THREE.GLTFExporter: userData can't be serialized

Before, I only had the meshes as children of the scene and the export worked perfectly. Unfortunately, it is necessary for the program to function properly to have the meshes within Objects, and according to the documentation, they should still be exportable.

Does anyone have any ideas on how to solve this issue?

javascriptthree.jsgltf

Answer №1

When working with Three.js, you can utilize the `userData` field on each Object3D to store custom data without affecting the object's internal properties. By default, this field is an empty object `{}` which allows for flexibility in adding your own data.

To check if any of your objects have `userData` set, you can use the following code: 

scene.traverse((o)=>{console.log(o.userData)})
.

If you need to export your scene while preserving the `userData`, you can create a copy of the scene by using 

var sceneCopy = scene.clone(true);
. Then, proceed to clear the `userData` from the copied scene with 
sceneCopy.traverse((o)=>{o.userData={};});
before attempting to export it.

Feel free to give this method a try and reach out if you encounter any issues!

Hope this helps!

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

Guide to utilizing Materialize with Angular 2

For the past 2 days, I've been struggling with an issue. I'm fairly new to Angular 2 and I'm attempting to use Materialize with Angular 2. I managed to resolve a couple of errors that were asking me to update the TypeScript version, which I ...

javascriptangularangular2-template

Deploying tracking scripts within GTM containers during Turbolinks transitions

Is there a solution for getting a Google Tag Manager container to fire all its tags under Turbolinks? In my Rails 4.0 application with Turbolinks, I have included the following code in a footer that is rendered on every page within the <head> tags: ...

javascriptruby-on-rails-4tagsgoogle-tag-managerturbolinks

Ways to integrate npm dependencies into your Cordova plugin

Currently working on implementing a Cordova plugin called core-cordova found in this repository. This particular plugin has a dependency on another NPM package. The issue arises after installing the plugin in my app using: $ cordova plugin add @aerogears ...

javascriptcordovatypescriptnode-modulesapache-cordova

Error caused by MongoClient TypeError

As a newcomer to NodeJS and someone exploring Dependency Injection for the first time, I encountered an error that led me to seek help. Before asking my question, I reviewed some similar threads on Stack Overflow: [1][2] Upon running my main code, I recei ...

javascriptnode.jsmongodb

Tips for transferring a dynamic set of objects to a controller within an MVC framework utilizing jQuery and Ajax

I have a form where fields are populated dynamically with objects, allowing for editing a new field before submitting the form to a different list of objects. Currently, I am employing an Ajax form for this purpose, but I am facing an issue where the < ...

javascriptjqueryasp.net-mvcasp.net-ajax

What methods can be used to ensure a required minimum delay time between function executions?

For my node function, I am aiming for a specific execution delay of around 5 seconds. The minimum delay needs to be implemented within the function itself, not externally, so external users are unaware of the delay. Therefore, I cannot rely on modules l ...

javascriptnode.jsdelay

Minimize the entire project by compressing the .css, .js, and .html files

After recently incorporating Grunt into my workflow, I was thrilled with how it streamlined the process of minifying/concatenating .css files and minifying/uglify/concatenating .js files. With Grunt watch and express, I was able to automate compiling and ...

javascripthtmlcssobfuscation

Angular.js ng app is known for much more than just its controllers

I'm a beginner in Angular.js and facing an issue with setting up the controllers. When I try to run my code in the browser, I encounter an error 'uncaught referenceError: myappApp is not defined' for myappApp.controller('HomeController& ...

javascriptangularjs

Using a React component to trigger an action when the Enter key

I have a react component that needs to respond to the "Enter" key press event. class MyComponent extends Component { componentDidMount() { console.log('componentDidMount'); document.removeEventListener('keypress', t ...

javascriptreactjseventscomponentsenter

Issue with the execution of Javascript code. Edit required

After creating a registration form that allows users to input their information for registration, I encountered an issue where if certain fields were left empty or if the user name was unavailable or the email address was already registered, a warning mess ...

javascripthtml

javascript ondrag while self-pressing

Within this div, I have a series of p elements. My goal is to drag the selected element into the input field. Here's an example: var input = document.getElementById("test"); input.addEventListener('drop', function (event) { event.pr ...

javascripthtmljquery

"Keep the div locked to the screen when the bottom of the div aligns with the

Hey everyone! I'm currently grappling with a project that requires me to keep a div stuck to the screen (prevent scrolling) when its bottom reaches the bottom of the screen. I have two divs on the page, both with varying heights. My aim is to keep div ...

javascriptjqueryhtmlcss

JavaScript - Validation Tool for Bootstrap

Currently utilizing a plugin called Plugin Link Attempting to validate whether at least one checkbox from a group has been selected. Unfortunately, the plugin does not offer this feature. After some research, came across a discussion by the plugin author ...

javascriptjquery

Unexpected outcomes experienced with AJAX in ASP.NET due to javascript integration

I experimented with two methods (server and client side) for initiating a JavaScript AJAX call to post a ticket on a website and then retrieve a link containing the ticket number for tracking or editing purposes. However, both approaches yielded different ...

c#javascriptjqueryasp.netajax

Remove the "hover effect" from an element using programming on mobile devices

There is an element on my webpage that has a specific set of styles for when it is hovered over. However, on mobile devices, this triggers the "sticky hover" effect, where touching the element applies the hover effect until the user touches another part of ...

javascripthtmlmobile

What is the best way to display a loading screen while awaiting the rendering process in ReactJS?

Recently, I created a CSS-animated "loading" element for my web page. However, I want it to only be visible when data is being loaded or rendered. Do you have any suggestions? I'm quite new to this and could use some guidance. This is how I implement ...

javascriptjqueryajaxreactjsweb

Leveraging JQuery to extract the numerical value located between the slashes within a hyperlink

I need to extract numeric values from a link like this. For example: /produkt/114664/bergans-of-norway-airojohka-jakke-herre In this case, I want to fetch 114664. To achieve this, I have written the following jQuery code: jQuery(document).ready(functi ...

javascriptjqueryarrays

Effortlessly upload multiple dynamic files using Nest JS

Attempting to upload files with dynamic keys, however nest.js requires key names. Attempted solution: @UseInterceptors(FilesInterceptor('files')) async uploadFile(@Query() minioDto: MinioDto, @UploadedFiles() files: Array<BufferedFi ...

javascriptnode.jsfile-uploadnestjs

Issue with sharing on Facebook via direct URI

I'm currently working on implementing an FB share button on my website. When a user clicks on the button (which features the FB image), they are redirected to . I am dynamically setting the URL as location.href through JavaScript, and the URL is autom ...

javascriptfacebook

Running PHP code within a JavaScript application

I am looking to create an app that can control the volume of my LG Smart TV. While exploring possibilities, I came across this repository. After delving deeper into PHP, I have configured my PC (the only place where I plan to use the app) with WAMP Server. ...

javascriptphp