Trouble with Three.js: Obj material not appearing as imported

My main question pertains to the best method of importing 3dsmax models or scenes into three.js, as most existing threads on this topic are several years old. Currently, I have created a simple coke can with a basic texture applied, but I am encountering issues when using the obj loader from examples/js/loaders since the texture fails to load.

I attempted to utilize a python script for converting obj files to js, but it seems redundant given the presence of an obj loader. However, I still face difficulties getting the textures to function properly. Does this mean the obj loader renders the python conversion script obsolete?

Upon loading the scene, an error message appears in my console:

Not allowed to load local resource: file:///C:/wamp/www/gordon/skins/coke_uv_map.jpg

Below is the code snippet:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
    </body>
        <script src="three.min.js"></script>
        <script src="controls/OrbitControls.js"></script>
        <script src="DDSLoader.js"></script>
        <script src="MTLLoader.js"></script>
        <script src="OBJMTLLoader.js"></script>
        <script>
            ...
        </script>
</html>

Furthermore, the issue lies in the discrepancy between what I desire and what I currently observe (excluding the lighting):

https://i.sstatic.net/4gebE.jpg

Answer №1

If you're experiencing a similar issue, I was able to fix it by editing the file extension .mtl that was included with the original .obj file using a text editor and updating the image path.

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

Java Entity Framework Indexing Tables

I am currently utilizing ASP.Net Core and have implemented EntityFramework to create a controller with views. Specifically, I am in the process of enhancing the Index view to make it dynamic with dropdown selections. I have successfully completed everythin ...

Unable to utilize class method via a proxy object

Issue: Why can't I access a class method through a proxy object? TypeError: sth.getNumber is not a function Prior to this error, the method was accessed like a property as indicated by the "get" log in the terminal. I am uncertain about the cause of ...

The step-by-step guide on utilizing npm for converting MP3 files to WAV

When trying to convert an mp3 file to wav using the command npm mp3-to-wav, an error message pops up in the console saying, "mp3 to wav exec err: saveForWav err: Path must be a string. Received [ 'C:\Projects\Weatherman\meme.wav&ap ...

What are the steps to apply a transparent color mask to a 3D object using three.js?

I've been attempting to create a 3D effect where a cube appears partially submerged in a semi-transparent water plane, but I'm struggling to achieve the desired result after experimenting with custom blending modes extensively. You can view my p ...

The json_encode() function yields an empty result

I am facing an issue with a PHP script that is supposed to parse an array using the json_encode() method, but it returns a blank output. Here is the PHP code snippet: $companies = $db->getCustomerNames(); print_r($companies) if (!empty($companies)){ $ ...

The variable loses its definition within the promise

Currently, I am developing a cutting-edge Ionic 3 application that incorporates the sensational Ionic Native Google Maps plugin. As part of my project, I aim to implement a marker pool utilizing node pool. The hiccup I am facing revolves around the new Pr ...

What are some ways to enhance the speed of swipe and scrolling on mobile devices using Javascript, CSS, and HTML?

Dealing with slow scrolling on iPhones has been a challenge for me. The application was developed using Vue.js. I was able to increase the scrolling speed on desktop using Javascript, but unfortunately, it doesn't translate well to mobile devices due ...

Creating visual content on a website

I'm currently working on a project where I need to showcase the results of a numerical model I am operating. My goal is to gather user input in the form of latitude/longitude coordinates, utilize php (or a similar tool) to trigger a python script that ...

Utilizing Ajax: Sending Customized Data to a Modal

Having never worked with jquery before, I struggled to find a solution for my specific case. On the cockpit.php page, I have a form that retrieves content from a mysql database. Currently, I am able to display this content in a div on the same cockpit.php ...

Switching Profiles in XPages

In my Xpages project, I have two different user profiles set up. I am currently attempting to develop a function that would allow me to easily switch between these two profiles. However, I am unsure of the steps needed to accomplish this task. ...

The manipulation of geometries in Three.js through rotation and positioning

I have been working on exporting a 3D plant modeling software to Three.js, but I am struggling with the rotations and translations of the objects. So far, I have experimented with using quaternions and transformation matrices, but neither approach has yie ...

Encountering a glitch while trying to launch the Angular application on Heroku

After successfully deploying my angular2 application to Heroku, I encountered an issue where the page displayed an error message saying: "An error occurred in the application and your page could not be served". The application runs smoothly when tested lo ...

The functionality of Next.JS Cpanel Deployment Server.js appears to be malfunctioning

Trying to deploy my website on cpanel, I am utilizing a node.js application with cpanel. Here is the configuration: https://i.sstatic.net/AXap3.png However, when I start my server, it displays "503 service unavailable." https://i.sstatic.net/17JAu.png ...

In order to activate the input switch in Next.Js, it is necessary to initiate a

Currently, I am working on implementing an on-off switch in Next.Js. To seek assistance, I referred to this helpful video tutorial: https://www.youtube.com/watch?v=1W3mAtAT7os&t=740s However, a recurring issue I face is that whenever the page reloads, ...

When $(.class) displays result, Javascript ceases execution

In the code snippet below, I am trying to load a group of products from a category when the user clicks on the .expandproducts button: $('.expandproducts').click(function(){ id = $(this).attr("data-id"); urlajax = document.location.origi ...

A step-by-step guide on breaking down words into individual letters using React hooks

I have decided to break down the Text into smaller chunks. Now, my goal is to further divide it into individual letters/characters and then expand this splitting process to include an array within the content. Take a look at my custom React code: imp ...

Issue: A React component went into suspension during the rendering process, however, no alternative UI was designated

I'm currently experimenting with the code found at https://github.com/adarshpastakia/ant-extensions/tree/master/modules/searchbar Although I followed the tutorial instructions, I encountered an error. Could it be that the library is malfunctioning? I ...

How can I add a value to an array only if it doesn't already exist, and remove it if it does?

I am facing a challenge with arrays. Let's say I have an initialArray = [1,2,3,4,5,6] My goal is to add another array [1,2,3] to it. 1 / If the array [1,2,3] already exists in the initialArray, I need to remove it. The expected result at this stage ...

The JSON Blender exporter fails to include the mirror or reflectivity values of materials in its export

Recently, I've been experimenting with the Three.js JSON exporter plugin within Blender to export a simple test model. After successfully loading the JSON file in Three.js, I encountered an issue where the 'mirror' effect I applied to certai ...

Increase the index value for retrieving property names in JavaScript

Using this array-like object, I am attempting to obtain the index for each property. However, I am encountering an issue when trying to output the result by logging the object. Can you help me identify what I am doing wrong? // Array-like object var pic ...