Error loading OBJ file in Three JS OBJLoader module

i'm having trouble importing an obj file using OBJLoader

The obj file looks like this - Obj Image
https://i.sstatic.net/HPdR8.png

But when imported into Three.js, it looks like this - Obj in Three.js
https://i.sstatic.net/CoSYz.png

The obj file is not importing correctly. What can I do to fix this issue?

The code I am currently using is

var objLoader = new THREE.OBJLoader();
        var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setTexturePath("obj2/");
            mtlLoader.setPath(  "obj2/"  );
            mtlLoader.load( "Mules/Base_10.mtl", function( materials ) {
                materials.preload();
                objLoader.setMaterials( materials );
                objLoader.load( 'obj2/Mules/Base_10.obj', function ( object ) {

                        object.traverse( function ( child )
                        {
                            if ( child instanceof THREE.Mesh )
                            {
                                meshes.push(child);
                            }
                        });
                        var object = meshes[meshes.length-1];
                        object.position.y = -0.05;
                        object.position.x = 0;
                        object.position.z = 0;

                        object.name = "salto";
                        scene.add(object);
                    }, onProgress, onError );
            }); 

Any help or suggestions would be greatly appreciated. Thank you!

Answer №1

Here is the issue at hand:

                object.traverse(...);
                var object = meshes[meshes.length-1]; //<-- you are reassigning the object with the last mesh. 
                object.position.y = -0.05;
                object.position.x = 0;
                object.position.z = 0;

                object.name = "salto";
                scene.add(object); //<-- then you add the object to your scene.

Avoid overriding the object. Furthermore, there is no need to traverse through the objects since you will be adding the entire object to your scene. Plus, you are not doing anything with your meshes anyway :)

Therefore, I suggest trying this instead:

                object.position.y = -0.05;
                object.position.x = 0;
                object.position.z = 0;

                object.name = "salto";
                scene.add(object);

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

Understanding the extent of testing coverage in a project using karma and webpack

For my project, I am incorporating ES6 syntax and testing my code with Karma. While I have successfully set up testing, I encountered an issue with the coverage report. Instead of including the source code, the coverage report is highlighting spec file ...

Looking for a solution to split barcode data across two text fields

I am looking to enhance my data input process by utilizing a barcode scanner in conjunction with JQuery. The barcode scanner I have reads both the serial number and model name of each product, but currently displays them together in one text field. Is ther ...

"Utilizing Ramda's map function to integrate dynamic keys: A step-by-step guide

I am currently working with an array structured like this : array = ['2020-06-03', '2020-06-05', '2020-06-06'] My task is to transform it into the following format : Object { "2020-06-03": Object { "selec ...

Perform a series of clicks

I'm attempting to click a button multiple times. After each click, the button takes 1 second to load, then reappears and can be clicked again. My goal is to click this button a total of 5 times. for(i=0;i<5;i++) $('.class').click(); ...

Switch out everything except for the initial one

Can all instances be replaced except for the first one? For example, 123.45.67..89.0 should turn into 123.4567890. Edit: Specifically seeking a regex solution. I am aware of how to achieve it through concatenation or using the index. ...

How can we extract validation data from a function using Ajax and then transfer that information to another Ajax query?

I have an AJAX function that validates a textbox on my page. After validating, I need to perform an action with that value (search in the database and display results in the textbox). However, I also need the validation function for another separate functi ...

The Twitch API is providing inaccurate channel information

Currently facing an issue while working with the Twitch API. When making a GET request to /api.twitch.tv/helix/search/channels?query=[STREAMER_NAME], it seems to be returning the wrong streamer/user. For instance: /api.twitch.tv/helix/search/channels?quer ...

Monitor modifications to a DOM element's ClientRect dimensions

I have developed a component that utilizes the context feature to register a DOM node and include it in a QuadTree. export default class SelectableGroup extends React.PureComponent { getChildContext() { return { register: this.register, ...

Dynamic jquery panel that remains expanded while concealing the menu on large screens

The page demonstrating jquery features automatically opens a side panel on large screens and displays a logo image instead of the standard 'open panel' icon. It remains open until the screen size is reduced. Take a look at the demonstration here: ...

How can we ensure only one click event is executed per element type in jQuery?

Here's the issue: I have a list of items with their own content organized in lists. Using jQuery, I've set it up so that when you click on an item, the list expands to show its content. However, when clicking on another item, the previously click ...

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

Here is a question for beginners. Please be kind. I have created a select field in an HTML component using Angular, populated from an array of objects. My goal is to retrieve the selection using a method. However, I am facing an issue where I cannot use ...

Unlocking numerical input solely by executing the specified command within the most up-to-date iteration of the Chrome Extension of Selenium IDE

After executing the command in Selenium IDE, I successfully extracted the sentence, "Your booking ID is 1234", and saved it in a variable named myText. <table> <tr> <th>Command</th> <th>Target</th> < ...

Tips on how to patiently wait until the database connection is established and all queries are successfully executed for every database specified in an array

A file containing JSON data with database details needs to execute a series of queries for each database connection. The map function is currently waiting for the database connection. Below is the start function function start() { console.log('func ...

Is it possible to conceal the source code within the dist js file using Vue JS?

I am looking to create a detailed logging page that showcases the logs without revealing the specific type of logging. I want to prevent users from accessing the minified vue JS script and easily reading the logged information. Is there a way to implemen ...

Is the typeahead feature acting unusual - could this be a glitch?

My input field uses typeahead functionality like this: <input type="text" id="unit" name="unit" class="form-control form-input" ng-model="item.unit" autocomplete="off" typeahead-min-length="0" uib-typeahead="unit a ...

Tips on modifying the interface based on the selected entry using jQuery

I am attempting to display a text when different options are selected from the dropdown list. Here is the code for the drop-down list: <div class="dropdown"> <select class="form-control" id="ltype" name="ltype"> <option value=""&g ...

The reliability of next router events can sometimes be called into question as they do not always function consistently

I've been working on creating a loading screen for my Next.js project. The issue I'm facing is that sometimes the loading message stays on the screen and doesn't go away even after the page has loaded. I suspect this may be due to the state ...

What is causing the CSS loader to continue showing up even after all the items have finished loading?

I have been developing an innovative newspaper/blogging platform using CodeIgniter 3.1.8 and Twitter Bootstrap 4. Currently, my focus is on implementing the AJAX functionality to load more posts dynamically. The default setup paginates the posts, display ...

Discovering the value of an item when the editItem function is triggered in jsGrid

Within my jsGrid setup, I have invoked the editItem function in this manner: editItem: function(item) { var $row = this.rowByItem(item); if ($row.length) { console.log('$row: '+JSON ...

Is there a way to stop TD from going to the next line?

I am using Javascript to dynamically generate a table and I want it to extend beyond the boundaries of the page. When I manually create the table, it works fine and extends off the page, but once I put it into a loop, the <td> elements wrap onto a se ...