The JSONLoader in THREE.js appears to be loading models with only half of their textures

Recently I created a house model in blender and exported it to three.js json format as a single object. However, upon adding it to the scene, only half of the textures showed up while the other half appeared as grey meshes.

If you want to see the JSON file with absolute texture image links, you can visit this URL: . You can also check out a screenshot comparison between what I achieved in blender and what I see in production.

Additionally, there are two instances of a barrel model, both perfectly mapped with materials. I attempted to use the barrel image as a material for the floor (which is a simple scaled box mesh), but unfortunately, it remained grey. Any suggestions on how to fix this issue?

Answer №1

There appears to be an issue with the file loaders/Loader.js (Rev56). Specifically, at line 332, it is recommended to make the following replacement:

if ( m.mapDiffuse && texturePath ) {

with

if ( m.mapDiffuse && texturePath != null ) {

(this bug applies to all types of textures)

I encountered this problem over the weekend when my textures were not showing up due to texturePath = "".

Answer №2

Boom! I successfully resolved the issue (maybe not in the most efficient way, but I ended up with a fully textured model).

Check out the result:

I faced an issue where Blender's three.js export was generating empty textures for some of my meshes. To fix this, I resorted to copying and pasting materials until I finally got the correct ones assigned after numerous page refreshes.

It was quite time-consuming, I might need to report this as a bug :(

UPDATE: Here's the explanation for why the exported materials were empty:

The first image shows a mesh with the texture intact during production, while the second one depicts a mesh without it.

Thank you for your attention!

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

Chrome Extension with UMD Modules

The definition of the UMD module can be summarized as follows: (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', ' ...

Discovering the file names of JavaScript files within a context path and dynamically loading them

I am currently working on a Struts application where I need to dynamically load a JSP file with its corresponding JavaScript file upon menu selection. Although the functionality is working smoothly, I am facing an issue in loading the JavaScript file along ...

Modifying td background color according to values in a PHP array

Trying to update the background color of a td element with the code below. However, it seems that the code needs some adjustment as the color is not being applied. Any assistance or alternative solutions would be greatly appreciated. Snippet of PHP code: ...

Understanding the Event Context of Elements using Browser Development Tools

I'm currently investigating the functionality of the search feature on the React Documentation page: https://reactjs.org/ . It's known that they utilize DocSearch, but I'm interested in understanding the inner workings. At the moment, I&ap ...

File not found: The specified file 'C:Self Project eact-shopper eact-shopperclientuildindex.html' does not exist

I followed the tutorial and startup code by Reed Barger exactly, but every time I try to run the server I encounter this error: Error: ENOENT: no such file or directory, stat 'C:\Self Project\react-shopper\react-shopper\client&bso ...

A method to retrieve the content of an input field and assign it to an onclick event

I encountered an issue with an ajax function that requires the lat and lng variables. Here is a simple HTML code snippet: <fieldset> <legend>Geocoding Services</legend> Latitude:<br><input type="text" id="lat" value="42.3600077 ...

What is the default method for automatically disabling drop down fields?

I've created a script that will gray out a drop-down field if a prior selection wasn't made. Once the appropriate choice is selected, the grayed-out field will become active. My query is, how can I set the drop-down field to be initially grayed ...

Hey there! I'm curious, do you know of any sleek alternatives to the standard JavaScript alert function? I'm looking for something a bit more innovative that allows me to personalize the appearance of

I attempted to create a customized alert box using HTML, CSS, and JavaScript. However, I am facing the issue of how to call it within the echo function of PHP. if (($con -> query($query) === TRUE) && ($con -> query($query1) === TRUE) &&am ...

The Backbone Model is producing unspecified data

Having crafted a backbone model, it looks like this: var note_model = Backbone.Model.extend({ default : { HistoryKey : "", InsertDate : "", MemberKey : "", NoteDate : "", ContactNote : "", User ...

Update the ng-repeat attribute in HTML using either vanilla JavaScript or AngularJS

When the user clicks on the 'sort by book title' button, I want to change the ng-repeat="x in books' to ng-repeat="x in books|orderBy:'country'" in the HTML code. How can I achieve this action using JavaScript/Angular? Here is a ...

Capture each touchdown and convert it to currency format

As a novice in the field of JS, I have put in a lot of effort into learning from various sources such as websites, documentation, friends, and other questions on Stack Overflow. However, despite all my efforts, I seem to be stuck at this point. $(docume ...

The most effective way to initiate an action following a popup

Here's a button that triggers the opening of a popup: <button type="button" id="btnBuscarCuenta" onClick="javascript:AbrirPopUpBusqueda('id_AyudaCuentas', 'pop_cuentas_contables.cfm','', '900px&a ...

Having trouble decoding JWE using the NPM Jose library

Although I can successfully decrypt a JWE using an older version of jose, I'm facing difficulties in utilizing the latest version API. The headers of my token are as follows: { "alg": "A128KW", "enc": "A128CBC-H ...

What steps can I take to persistently subscribe to SignalR from an Angular service even in the event of connection failures?

Is there a way to safely attempt to connect to SignalR with intervals between attempts until the connection is established? Also, does anyone have advice on how to handle the different stages of connectivity to the web sockets effectively? We are utilizin ...

Using React to create a fadeout effect and decrease the length of the photo

Is there a way to create a fade-out effect for each photo card and then shorten the length of the photos following the fade out? I have tried implementing a solution, but it doesn't seem to work when I click on each photo. Any suggestions or insights ...

Incorporating a flexible header size and scrollable content: Tips for avoiding the need to scroll through the entire page to find

I am currently working on creating a unique page template that has certain requirements: The height of the header may vary The content and aside containers should be independently scrollable Anchor links should not disrupt the page layout To see what I h ...

Determine the mean values to showcase at the center of a D3 donut graph

Check out this plunkr where I'm utilizing angularjs and d3.js. In the plunkr, I've created several donut charts. I'm interested in learning how to display the average data in the center of the arc instead of the percentage. Additionally, I& ...

Is it possible to count the number of days in between and then apply a specific class to each of those days

Here is the code snippet that I am working with: <div class="row"> <div class="test">02/12/2013</div> <div class="test">03/12/2013</div> <div class="test">04/12/2013</div> <div class="test"> ...

Utilizing Laravel to Send Table Data to Modal for Form Submission to Controller

In our users table, there is an edit modal that needs to retrieve specific user data from the table list and display it within the modal's input fields. This requires using Laravel logic to edit the data and submit it back to the controller as a form. ...

Updates to Firebase data do not automatically reflect in Google Charts

I've successfully connected my Firebase to Google Charts, however I am facing an issue in displaying a 'no data' message when there is no data available. Currently, I have set a Firebase data value of 'NA' for a single user, which ...