Exporting an imported obj with Draco compression in Three.js

My javascript skills are limited, but I can get basic things working in threejs. Currently, I am struggling with the Draco exporter.

The Threejs.org website has an example of the Draco exporter

This example demonstrates exporting a generated mesh and it is functioning perfectly:

// export mesh

var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true;
mesh.position.y = 25;
scene.add( mesh );

I am able to import the .obj file successfully as well

new OBJLoader()
.setPath( '../models/mymodel/' )
.load( 'mymodel.obj', function ( mesh ) {

    mesh.traverse( function ( child ) {

        if(child.name=='mymodel_part1'){                        
                    child.material = Material1;
        }
        if(child.name=='mymodel_part2'){                        
                    child.material = Material2;
        }
        if(child.name=='mymodel_part3'){                        
                    child.material = Material3;
        }

    } );

    scene.add( mesh );

} );

However, when I try to export the mesh, it's not working and I receive a "TypeError: mesh is undefined".

It seems like the type is incorrect, but I am unsure what it should be and how to make the necessary changes.

javascriptthree.js

Answer №1

The issue here lies in the fact that when you use OBJLoader.load(), it doesn't create a group, but rather an instance of THREE.Group. This means you need to first identify the correct mesh within the descendants of the group. However, this process can vary depending on the content of the asset as OBJ files often include multiple mesh definitions. To illustrate this workflow, I have set up a live example. The key code snippet is:

var loader = new OBJLoader();
loader.load( 'https://threejs.org/examples/models/obj/tree.obj', function ( obj ) {

    scene.add( obj );
    mesh = obj.children[ 0 ];

} );

https://jsfiddle.net/bquxjf28/2/

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

What kinds of items can be sent out through socket.io?

What types of objects can be sent to the client using the socket.emit method in the server side with the socket.io library? For instance, an example from the socket.io website shows: socket.emit('news', { hello: 'world' }); But there ...

javascriptnode.jssocket.io

Tips for updating multiple documents in a MongoDB database using an array of values

I have a range of Product items in my inventory and when a client places an Order, they submit an array of objects. Each object in the array includes the _id product (objectId) and the quantity they purchased. [ {producId: "dshsdsdh72382377923", quantity: ...

javascriptmongodbmongoose

Check if the element with the ID "products" exists on the page using JQuery. If it does, then execute a certain action

Is there a way to create a conditional statement that executes if the element with the ID "products" is present in the HTML code? Thanks in advance for your help! Pseudo code using JavaScript (JQuery) if ( $('#products').length ) { // do s ...

javascriptjqueryhtmlif-statementconditional-statements

Is it possible to incorporate vector graphics/icons by simply adding a class to a span element in HTML5?

In order to add a glyphicon icon to our webpage, we simply need to include its class within a span element, as demonstrated here: <span class="glyphicon glyphicon-search"></span> We also have a few files in .ai format that can be converted to ...

javascriptcsshtmltwitter-bootstrapglyphicons

resetting dropdown selections upon page refresh using jQuery and AJAX

Is there a way to reset or clear the values of two select boxes after refreshing the page in CodeIgniter? Currently, both select boxes retain their values after a refresh. Below is the code I am using: <?php echo form_dropdown('cat_id', $ ...

phpjavascriptjqueryajaxjson

Setting Start and End Dates in Bootstrap Vue Datepicker to Ensure End Date is After Start Date

My Vue.js form includes two BootstrapVue datepickers for holiday management. Users can define the start date and end date of their holiday, with the condition that the end date must be equal to or greater than the start date. Here is my current implementat ...

javascriptvue.jsdatepickerbootstrap-vue

Activating a certain class to prompt a drop-down action

My PHP code is displaying data from my database, but there's a bug where both dropdown menus appear when I click the gear icon. I want only one dropdown to appear when clicking the gear of a specific project. Can you help me fix this issue? It's ...

javascriptphpjqueryhtmlcss

"The power of React Hooks combined with the capabilities of ActionCable

Currently grappling with integrating React new Hooks and ActionCable, facing an issue where the correct data is not being received in Rails when attempting to send state. My attempts to use the send() method immediately after utilizing the setState() func ...

javascriptruby-on-railsreactjsactioncable

Vuetify: the item-text attribute causing issues with v-combobox

As I embark on my journey with Vue.js and Vuetify, I've encountered a simple issue with the v-combobox component that has me stumped: Picture this scenario: I want a combobox that offers three distinct options. The code snippet below functions perfec ...

javascriptvue.jsvuetify.js

Ways to troubleshoot an issue that arises when the `onChange` event is not utilized in a radio button component on a

When using this component for radio buttons without the Onchange function, I sometimes encounter the following error on the page related to onUpdate: TypeError: this.props.onUpdate is not a function onChange(e) { let value = e.target.value; this ...

javascriptreactjsradio-button

Tips for Identifying Connection Type using JavaScript

My browser is not receiving the current connection type when using the following function. I don't think there is an issue with getting the value in ScriptNotify, as other functions are working fine with this method. It appears that navigator.connecti ...

c#javascripthtml

You cannot make a hook call within the body of a function component, unless you are using useNavigate and useEffect in conjunction with axios interceptors

Currently, I am delving into React and attempting to include a Bearer token for private API calls. My approach involves writing a private axios function to intercept requests and responses. Subsequently, I invoke it in my API.js file to fetch data from the ...

javascriptreactjsreact-hooksaxios

Using Vue to create a component that binds an array as its data source

Having trouble binding an array as a variable and accessing it in the child component, resulting in the variable being undefined. Is there a way to pass an array from a view to a component so that the component can use this array to create a child componen ...

javascriptvue.js

Tips for properly halting an AJAX request

My challenge is to halt an Ajax request when a user clicks a button. Despite using .abort(), the Ajax request continues to occur every 2 seconds. Essentially, the user waits for a response from the server. If the response is 2, then an Ajax request should ...

javascriptphpjqueryajax

Load a webpage using javascript while verifying permissions with custom headers

Seeking guidance as a novice in the world of JavaScript and web programming. My current project involves creating a configuration web page for a product using node.js, with express serving as the backend and a combination of HTML, CSS, and JavaScript for t ...

javascriptnode.jsexpressaxios

The JQuery script functions properly when directly embedded in an HTML file, but fails to work when linked from an external file

While I'm working on some code using JQuery's .hover method, I've encountered an interesting issue. It seems to work fine when written directly in the main HTML file index.html, but for some reason, it fails to execute when written in a Java ...

javascripthtmljquery

Dealing With HttpClient and Asynchronous Functionality in Angular

I've been pondering this issue all day. I have a button that should withdraw a student from a class, which is straightforward. However, it should also check the database for a waiting list for that class and enroll the next person if there is any. In ...

javascriptangulartypescriptasync-awaithttpclient

How can I display the console log output from JavaScript on an HTML webpage?

If I have a JavaScript function that logs its output in the console using console.log(), is there a way to then export that result into the HTML console? Appreciate any advice on this. ...

javascripthtmlconsoleconsole.log

Is it true that eliminating white spaces can enhance a website's loading speed?

I'm curious about something. Can removing white space actually make a website load faster? For instance, take a look at the following CSS snippet - body{ overflow-wrap:break-word; word-break:break-word; word-wrap:break-word } .hidden{ display:none } . ...

javascripthtmljquerycssajax

How to grab JSON data within a CakePHP 2.2 controller

Trying to transmit JSON data from a web page using JQuery, as shown below: $.ajax({ type: "post", url: "http://localhost/ajax/login", data: '{username: "wiiNinja", password: "isAnub"}', dataType: "json", contentType: "applica ...

javascriptjsoncakephp