Altering the texture of a mesh in Three.js can completely transform the appearance

I'm facing an issue with my model that contains multiple meshes. I only want to apply a texture to one specific mesh, but when I do, the entire model ends up with the same texture. What could be the mistake I'm making?

function load_models(callback) {
    var loader = new THREE.OBJLoader(manager);
    loader.load(baseDir + 'files/' + model.model_name, function (object) {
        object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                var mesh = model.meshes.filter(function(mesh) {
                    return mesh.name == child.name;
                }).shift();

                if (mesh.is_fiberboard == true) {
                    child.material.map = mesh.material.texture;
                    child.material.needsUpdate = true;
                    child.geometry.buffersNeedUpdate = true;
                    child.geometry.uvsNeedUpdate = true;
                }
            }
        });
        callback();
    });
}

https://i.sstatic.net/0srNC.jpg

Answer №1

The problem was present in Three.js version 76 but was resolved upon upgrading to Three.js version 79.

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

Strategies for redirecting search queries when adding a new path

Issue I am facing a challenge with pushing a new path to the URI while maintaining existing search queries. For example: Current URL: https://example.com/foo?bar=123&foobar=123 When I use history.push('newPath'), I end up with https://exa ...

The state in Reactjs is not displaying as expected

Check out my ReactJS todo app that I created. However, I am facing an issue with deleting todos. Currently, it always deletes the last todo item instead of the one I click on. For example, when trying to remove 'Buy socks', it actually deletes ...

Using HTML5 Canvas to draw intersecting polygons

Recently, I came across a polygon drawing function that caught my attention: Polygon.prototype.draw = function(ctx) { ctx.save(); ctx.beginPath(); var v = this.vertices[0] ctx.moveTo(this.position.x + v.x, this.position.y + v.y); var i ...

WebSocket connection issues are being experienced by certain users

While using socket.io, I encountered an issue where some users were unable to send messages with the message "I can't send a message why?". After researching the problem, it seems that the firewall or antivirus software may be blocking websockets. If ...

The challenge of handling scopes in Angular-seed

I am currently facing a challenge with creating a pre-routeProvider post. The problem I'm encountering is that $http is coming up as undefined, even though I am passing it to the function as per my understanding. I have made sure to declare angular.js ...

Implement an expand/collapse effect using CSS3 transitions

How can I implement a smooth expand/collapse effect? function expandCollapse(shID) { if (document.getElementById(shID)) { if (document.getElementById(shID + '-show').style.display != 'none') { document.getElem ...

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

Adjust the vertical size of the slider in Jssor

Hi there! I'm currently working on a slider that I want to have a dynamic width (100% of the container) and a static height of 550px on PCs, while being responsive on mobile devices. Below is my code snippet: <div class="col-md-6 right-col" id="sl ...

Everything runs smoothly when initiating the API call through npm start, but unexpectedly crashes upon attempting to

Here is an API call located at http://localhost:9000/testAPI. Within the bin/www file: var port = normalizePort(process.env.PORT || '9000'); app.set('port', port); Inside the routes/index.js file: var express = require('express&a ...

In the Rails environment, it is important to verify that the data sent through $.post method in jQuery is correctly

I’m facing an issue with my jQuery script when trying to post data as shown below: $.post({ $('div#location_select').data('cities-path'), { location_string: $('input#city_name').val() }, }); Although this code work ...

What is the best way to encode an image into JSON format?

let canvas = document.createElement('canvas'); let context = canvas.getContext( '2d' ); context.drawImage( video, 0, 0 ); let image_src = canvas.toDataURL('image/jpeg'); let dataURL = canvas.toDataURL("image/jpeg"); let image= ...

The nodes.attr() function is invalid within the D3 Force Layout Tick Fn

I'm currently experimenting with the D3 Force Layout, and I've hit a roadblock when it comes to adding elements and restarting the calculation. Every time I try, I keep encountering this error: Uncaught TypeError: network.nodes.attr is not a fun ...

Using JQuery to implement a date and time picker requires setting the default time based on the server's PHP settings

I have implemented a jQuery UI datetime picker in my project. As JavaScript runs on the client side, it collects date and time information from the user's machine. Below is the code snippet I am currently using: <script> // Function to set ...

Encountering an unknown provider error in AngularJS while using angular-animate

Upon removing bower_components and performing a cache clean, I proceeded to reinstall dependencies using bower install. However, the application failed to load with the following error message: Uncaught Error: [$injector:unpr] Unknown provider: $$forceRefl ...

I encountered a permission error while trying to npm install, despite running the command with root privileges

After running npm install as root, I am still encountering permission errors. This is unfamiliar territory for me. I have attempted using chmod -R 777 *, and chown nobody:nogroup -R * within the project folder, but to no avail. Here's the specific er ...

What is the reason for the maximum alias number in the npm YAML library?

I have been utilizing the npm module yaml to convert complex, interdependent JavaScript objects into a text format that can be easily restored in Javascript. Additionally, I use this package for deep copying of deeply nested objects by serializing and then ...

In Angular components, data cannot be updated without refreshing the page when using setInterval()

Here's the Angular component I'm working with: export class UserListComponent implements OnInit, OnDestroy { private _subscriptions: Subscription; private _users: User[] = []; private _clickableUser: boolean = true; constructor( priv ...

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

Make sure a specific piece of code gets evaluated in a timely manner

To ensure the default timezone is set for all moment calls in the app's lifetime, I initially placed the setter in the entry point file. However, it turns out that this file is not the first to be evaluated. An issue arose with one of my reducers wher ...

Output data to file in a sequential order using JavaScript

I am struggling to comprehend this particular issue. In the context of executing the runOneCombination function across numerous files, my goal is to extract specific information, perform calculations, and then append the results to a file. However, the ch ...