The issue of THREE.js failing to render .obj files with .mtl files has been a common problem when exporting assets

After further investigation, it seems that the issue lies with the exported files and their formatting, although I am unsure of the exact problem. Interestingly, additional example models I downloaded render perfectly fine.

I have encountered a problem with Three.js while attempting to load .obj and .mtl files.

The files, consisting of objects and corresponding materials, were exported from 3ds Max by someone else. While I am not a professional 3D modeler, I can request the original creator to re-export the files if necessary.

In my previous uses of THREE.js, I never faced this particular issue. The file loading process involves the following code:

mtlLoader.load("stands/objects/Table&Chairs.mtl", function(materials){

            materials.preload();
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);

            objLoader.load("stands/objects/Table&Chairs.obj", function(object){

                scene.add(object);
                object.position.set(-5, 0, 4);
            });

        });

Although no errors occur during loading, the object is not visible in the scene. Curiously, replacing the uploaded files with assets from different sources results in successful rendering.

This discrepancy suggests a possible issue with the exporting process of the files.

Screenshot displaying my rendered .obj file

https://i.sstatic.net/43VTR.png

Screenshot showcasing the rendered example .obj file

https://i.sstatic.net/jG9Ky.png

Any assistance in identifying the root cause of this problem would be highly valued.

The objects and materials can be accessed here.

The Table&Chairs files belong to me, while the Tent_Poles_01 files are provided as examples.

Answer №1

An interesting feature of .OBJ files is that they can be easily opened in any text editor to reveal their contents, providing a basic understanding of position and scale:

  • Upon inspection of the vertices in the tent model, it appears to have dimensions of approximately 2 units in each direction, centered at the origin.
  • Examining the vertices in the Table & Chairs model, they seem to span hundreds or thousands of units, with a starting point near (+6000,0,-2000).

Therefore, the initial suspicion may be that your model is being rendered far outside the visible viewport.

Typically, when collaborating with a 3D artist, discussions about the desired scale are held beforehand, ensuring proper alignment of the model with the origin.

While it is possible to make adjustments in code, it may not be the most practical solution.

  1. mesh.geometry.center() will reposition the geometry to (0, 0, 0)... however, this may not always yield the intended result. For instance, a table might end up intersecting the floor when centered by default.

  2. To scale the geometry to an absolute size, consider using something like the following pseudocode:

    var currentSize = new THREE.Box3().setFromObject(model).getSize();
    mesh.geometry.scale(
        targetWidth / currentSize.X, 
        targetHeight / currentSize.Y, 
        targetDepth / currentSize.Z)
    

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

Is there a way to retrieve a JSON result from an API call using jQuery (or plain JavaScript) without relying on Ajax?

As someone new to JS and jQuery, I am working on building a key-value map from an API call that returns an array of key-value pairs. [{"key":"191","value":244}, ... , {"key":"920","value":130}] I have created the following ajax code in my attempt to achi ...

Tips on how to dynamically update information with Angular

Looking to dynamically update data when a user selects an option from a dropdown menu using the Angular framework This is what I currently have: <div> <button type="button"> {{tests[0].test}} </button> <ul c ...

The AJAX request encountered an unexpected failure that cannot be identified (Using jQuery)

Are you facing issues with a service that returns JSON data? Check out this URL: If you're attempting a simple AJAX request, here's some sample code to get you started: $.ajax({ type: "get", url: "http://api.drag2droid.shamanland.com/ca ...

Is Next.js compatible with CSS caching?

I'm currently working on a project with Next.js (version 12.1.0) and SCSS modules. I've noticed that my CSS seems to be caching extremely aggressively, requiring me to restart the server (npm run next dev) in order to clear it. Has anyone else en ...

How can I access a component variable within a foreach loop in Typescript?

Can anyone please explain how I can access a component variable within a foreach loop? Check out my code on Plunker public exampleVariable:number; test(){ console.log('fired'); var x =[1,2,3,4]; x.forEach(function (e){ th ...

Upgrade the jQuery code from version 1.4.2 min to version 1.10.2 min

Hey there, I'm looking for assistance with updating the code below to use jQuery 1.10.2. The backslashes are present because I am using it with PHP and need to escape special characters. I'm not very familiar with JavaScript and unsure of the ch ...

I am searching for a way to apply a conditional class to the chosen element in react, as the toggle method does not

I'm working on customizing a dropdown menu and I want to add a functionality where if a parent li menu has an arrow class before the ul element, then clicking on that parent li menu will add a class called showMenu only to that specific sub-menu. Her ...

Display a div based on user selection using Ajax and Laravel

There are two div elements on the index page containing a datatable. By default, these two divs should be hidden. When an option is selected from the dropdown menu, the corresponding div should be displayed. The webpage is designed for searching within a ...

Generating a default template for an Angular ag-Grid cell with a custom field name - how to do it?

I am currently working with ag-grid and have specific templates for many columns. However, some of the data I am inputting into the table are just plain text. I want to enhance the default case: <ng-template #defaultRecord let-record> ADDITIONAL E ...

Vue.js Class-based Decorator not Transmitting Event from Child to Parent Component

I'm fairly new to working with Vue.js and I've encountered an issue with the child to parent emit functionality. Essentially, I have a Box component that contains a Search component. In the Search component, I attempted the following: @Watch("se ...

The process of uploading a file to the server directory via ajax is not functioning correctly. Despite attempts to upload the image, it does not successfully transfer to the designated upload

I am encountering an issue with uploading files to the server upload directory using AJAX. The image is not being successfully uploaded and I keep receiving a "connection reset" error. Can you please review my code below to see if there are any mistakes? T ...

Validating properties of a class using Typescript's Class-Validator

I tried using the class-validator decorator library for validation processes on my sample project. However, it doesn't seem to be working as expected. The sample project aims to create projects based on user inputs, and I'm attempting to validate ...

The functionality of the Bootstrap toggle button seems to be malfunctioning

I'm having trouble with the toggle button in my Bootstrap code. When I resize the window, the toggle button appears but clicking on it doesn't do anything. This is my first time using Bootstrap, so I might have made some silly mistake. Any assist ...

Determine the presence of an element using its selector and retrieve a true or false value using jQuery or JavaScript

Is there a way to determine if an object is present on the page based on its selector? This method typically works: startpageentry = $('#' + startpageid) However, it does not return anything. I require a boolean value that can be used in an if ...

When Index.html is hosted via Express, the component fails to render

Following a tutorial has led me to the end and I've made changes to my App.js as shown below: import React, { Component } from "react"; import "./App.css"; class App extends Component { render() { return ( <div> <p>lm ...

What is the best way to extract the value from a React date picker every time the dates are modified?

Currently, I am utilizing a React library known as react-date-picker and my goal is to retrieve the date every time it is modified. Below is the default code given by the library for selecting the date from a dropdown: import React, { Component } from "r ...

What are the best strategies for eliminating element cloning and duplication in Vue?

As a novice programmer, I've developed a web app similar to Trello. It allows users to create boards and within those boards, lists can be created. Each list is displayed uniquely with different IDs. However, the list items are displayed with the same ...

One-Of-A-Kind Typescript Singleton Featuring the Execute Method

Is it feasible to create a singleton or regular instance that requires calling a specific method? For instance: logger.instance().setup({ logs: true }); OR new logger(); logger.setup({ logs: true }); If attempting to call the logger without chaining the ...

Dealing with a Node and Express server can be tricky, especially when trying to proxy a POST request along with parameters. You might encounter the error

I am trying to forward all requests made to /api/ from my local node server to a remote server, while also adding some authentication parameters to them. Everything works smoothly for GET requests with query parameters and POST requests without specifying ...

React text hover image functionality

Just diving into the world of React and attempting to create a cool image popup effect when you hover over text in my project. I could really use some guidance on how to make it function within React, as the logic seems a bit different from plain HTML. Any ...