error in three.js occurs when attempting to load .obj files

I've been encountering issues with OBJ files that I've downloaded from the internet. All of these files render like this: View Obj File Pic
I'm using the standard OBJLoader for rendering.

var loader = new THREE.OBJLoader();
loader.load( objURL, function ( object ) {
    scene.add( object );
} );

I'm struggling to pinpoint what might be causing the problem.

UPDATE: Here is my full loader code:

    loader = new THREE.OBJLoader(manager);

    loader.load(filePath, function (object) {
        object.traverse(function (child) {

            if (child instanceof THREE.Mesh) {
                if (count == 1) {
                    child.material = material;
                    var box = new THREE.Box3().setFromObject(child);
                    xyzSizes = box.size();

                    var geometry = new THREE.Geometry();
                    geometry = child.geometry;

                    var volume = myVolume(geometry);
                    THREE.GeometryUtils.center(geometry);

                    scene.add(child);
                    DOM.children(".loading").remove();
                    myObj = child;
                    myObj.name = 'GL' + idfile;
                    maxSize = Math.max(xyzSizes.x, xyzSizes.y, xyzSizes.z);

                    maxSize = 2 / maxSize;
                    DOM.parent().find('.volumeVal').html(myRound(volume, 2));
                    DOM.parent().find('.sizesVal').html('x: ' + myRound(xyzSizes.x, 3) + ' y: ' + myRound(xyzSizes.y, 3) + ' z: ' + myRound(xyzSizes.z, 3));
                    console.log('il volume è: ' + volume + ' e gli assi xyz sono: ' + xyzSizes.x, xyzSizes.y, xyzSizes.z);
                    if (maxSize == 0)
                        maxSize = 0.1;
                    object.scale.set(maxSize, maxSize, maxSize);
                } else {
                    child.material = transparent;
                }
            } else {

            }
            count++;
        });


    });

Answer №1

It looks like your code is correct.

Have you tried running it in Firefox and double-checking that your objUrl is set correctly?

My suspicion is that possibly your objUrl is still pointing to https://i.sstatic.net/26Zsk.png somewhere and not being updated to the image you want.

Also, make sure that the obj files you downloaded from the internet are in the same folder as the ones created using Blender.

I followed your code along with and placed Zuccarello.obj next to my index.html.

var loader = new THREE.OBJLoader();
loader.load( "Zuccarello.obj", function ( object ) {
    scene.add( object );
} );

If these suggestions don't work, please provide more of your code, especially anything related to your objURL variable.

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

The React Router Dom V6 triggers loaders as soon as the router is initialized

I'm currently working on implementing routing into my application using react-router-dom V6, specifically utilizing the new createBrowserRouter function and RouterProvider component. The issue I'm facing is that when attempting to integrate a lo ...

Customize your Material-UI theme with a unique hover effect for contained buttons

Currently, I am in the process of setting up a theme for Material-Ui on my React application. Within the app, there are two types of buttons that I utilize - contained and outlined. The issue lies with the hover effect on the contained button (while the ou ...

Using the setTimeout function with asynchronous tasks

I have a situation where I need to introduce a 5000ms delay before firing an asynchronous function. To accomplish this, I attempted to utilize the setTimeout() method. This async function is called within a loop that runs multiple times, and each time it i ...

Check to see if the ContentEditable div is currently focused

I'm struggling to determine if a contenteditable div has focus with my current code. Here is what I have so far: if ($("#journal-content:focus")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); } The issue I'm encounter ...

Creating a dynamic interaction between HTML forms and JavaScript using the onsubmit event handler

Having trouble getting my JavaScript file to fire when clicking the submit button on my simple HTML form. Can anyone provide some assistance? **UPDATED CODES Here is a snippet of my condensed HTML file: <html> <form name="form01" id="form01" ac ...

Updating the background of a div in HTML through the power of JavaScript

I am having trouble changing the background of a DIV. I believe my code is correct, but it doesn't seem to be working. I suspect the error lies with the URL parameter, as the function works without it. Here is my code: <script language="JavaS ...

Expanding Perspective in React Native

Having trouble with implementing a camera feature that isn't scaling correctly. The issue seems to be related to the styling of the container View, as when the camera is rendered independently it works fine. The goal is for the camera to activate when ...

The method item.appendChild does not exist as a function

Despite being a common error, I've researched extensively and still can't figure out why it's happening. It seems like it should be an easy fix, but I'm struggling to find the solution on my own. var item = document.createElement("div" ...

The Drop Down Menu feature in Bootstrap is malfunctioning within the context of a NextJS project

I've built a NEXT.JS application using VS Code. The issue I'm facing is with the drop down menu in the navigation bar - it's not sliding down to display the menu when clicked. Here is the code I'm working with: const loggedRouter = () ...

Passing arguments from an Angular directive to a controller function within an element's HTML

Is there a way to pass the URL of an anchor tag in the directive to the controller function "itemClicked"? The code below successfully logs the "post" object when clicked. HTML: <div ng-repeat="post in posts" > <div find-urls link-clicked="i ...

Storing props in JSX components using variables in React.jsLearn how to set props in JSX components and

If I have already created a component: class Co extends React.Component { render = () => { const name = this.props.name; return ( <p>Hello, my name is {name}</p> ) } } and stored it in a variable ...

Including a variable in an array within a function

I'm encountering an issue with inserting a variable into my array. Below is the code snippet: var data = new Array(); google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/r ...

Creating a user-friendly form with validation in a Vue application using Vuetify.js

I am in the process of incorporating a contact form with basic validation on a Vue.js website using an example from Vuetify.js. Being new to this, I'm unsure about how to implement it within a Vue component. My goal is to have simple client-side form ...

Adjust the bootstrap switch component to be in the 'checked' state when the mode is set to Dark

I have stored a theme for my web application in the localStorage and I want to dynamically add the checked value to the Switch component if the mode is set to 'dark', or unchecked if the mode is 'light'. However, whenever I set the them ...

Is there a way to export a specific portion of a destructuring assignment?

const { a, ...rest } = { a: 1, b: 2, c: 3 }; If I want to export only the rest object in TypeScript, how can I achieve that? ...

Obtain the content window using angularJS

I've been attempting to retrieve the content window of an iframe element. My approach in JQuery has been as follows: $('#loginframe')[0].contentWindow However, since I can't use JQuery in Angular, I've been trying to achieve thi ...

What is the best way to send HTML content from a controller using ajax?

Here is the code in my controller: public async Task<ActionResult> GetHtml(int id) { var myModel = await db.Models.FindAsync(id); return Json(new { jsonData = myModel.MyHtml }, JsonRequestBehavior.AllowGet); } This is ...

"Encountering a hang while using the .save() function and only

Issue with storing data in MongoDB This is only my second attempt at saving data to a database and I am still relatively new to the process. I have a form on my HTML page that sends string data to be saved in a MongoDB database. I successfully connected t ...

Encrypting data between two Node.js servers

I am looking to create a Node.js daemon that can operate across multiple computers while facilitating message exchange between the daemons. Security is paramount, so I want to ensure the communication is encrypted. However, I am uncertain about which encry ...

`Developing reusable TypeScript code for both Node.js and Vue.js`

I'm struggling to figure out the solution for my current setup. Here are the details: Node.js 16.1.x Vue.js 3.x TypeScript 4.2.4 This is how my directory structure looks: Root (Node.js server) shared MySharedFile.ts ui (Vue.js code) MySharedFi ...