When a map is assigned to object.children[0] in Three.js, it affects the entire object's map

In my attempt to assign a map to every object loaded with OBJLoader in an obj file, I encountered a problem. When trying to assign a different map to only one object from the file while keeping the rest with the previous map, the map changes for every object.

function loadOBJ( geometry, name ) {
    loader.load( geometry, function( object ){
        object.traverse( function (child) {
            if ( child instanceof THREE.Mesh ) {
                child.material.map = map;
                child.material.envMap = textureCube;
                child.castShadow = true;
                child.receiveShadow = true;
                child.material.needsUpdate = true;
            }
        });

        object.children[0].material.map = new THREE.TextureLoader().load("img/ground.jpg");
        object.name = name;
        scene.add( object );
        console.log(object.name);
    });
}

Even when I run a traverse only for object.children[0] and assign the map there, the result remains the same. What could I be doing wrong?

Answer №1

When modifying a property of a material, the alteration will be reflected in all objects that share that same material. This seems to be the case in your situation.

Follow this approach:

newMaterial = object.children[ 0 ].material.clone();

newMaterial.map = new THREE.TextureLoader().load( "img/ground.jpg" );

object.children[ 0 ].material = newMaterial;

This code is compatible with three.js version r.75

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

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

My objective is to extract the values from the IDs #username-l and #pwd-l in an HTML form upon the user clicking the submit button. I aim to compare these values with those stored in a SQL database, and if they match exactly, redirect the user to a specifi ...

Identifying when a paste event occurs within a contenteditable field

How do you detect and prevent a paste event in a content editable div so that you can intercept and sanitize the paste to only include text? Another concern is not losing focus after completing the paste + sanitize process. ...

Changing URI to File Object using JavaScript

I have successfully retrieved the URI of a selected file in my Ionic app using the cordova-fileChooser plugin. https://i.sstatic.net/NxXti.jpg Next, I used the cordova-plugin-filepath to obtain the absolute path of the file from the nativeURL on the phon ...

Implementing AJAX to dynamically update the href of the edit path

On my Bookings show page, there is a next button implemented with ajax to navigate through a user's bookings and update their attributes. However, I am looking for a way to dynamically modify the edit and cancel paths for each individual booking on th ...

Guide to organizing a calculated attribute in vue.js

I'm struggling with organizing the already computed array of results. Within Vue, I have successfully filtered images based on their ratio. Now, my goal is to sort these filtered results by date, name, or any other possible category. Although I atte ...

Three.js rendering malfunctioning after updating renderer

Update: Revised the question for a broader context. (Original here for reference) In my project, I am using Three.js WebGLRenderer to render a scene. I need to replace the existing renderer with a new WebGLRenderer by swapping out the canvas and then re-r ...

Custom script for Greasemonkey that modifies a parameter within the URL

While using Google Analytics, I have noticed that some pages display a variable in the URL with a default value of 10. The format usually looks like this: ...&trows=10&... Is there a method to alter this to trows=100 in order to change th ...

Ways to select a single checkbox when other checkboxes are selected in JavaScript

var select_all = document.getElementById("select_all"); //reference to select all checkbox var checkboxes = document.getElementsByName("testc"); //retrieving checkbox items //function to select all checkboxes select_all.addEventListener("change", function ...

Working efficiently with query selectors in React using useRef

I have created a typewriting effect function and now I am trying to display the code associated with this effect within a specific div element (typingRef). Currently, I am using typingRef.current = letter, but I am wondering if this is equivalent to docu ...

Attempting to transform HTML code received from the server into an image, but encountering an error while using ReactJS

This app is designed to automate the process of creating social media posts. I have a template for the vertical "Cablgram" stored in the backend, and when I make a request, it returns the HTML code for that template. However, I encounter an error when tryi ...

Troubleshooting: The issue of Vue JS not successfully navigating between web

After countless attempts, I am still struggling to get my Firebase login function to appropriately switch the component upon signing in. I urgently need assistance with configuring my router to seamlessly transition to the next page once the sign-in proces ...

Convert the existing JavaScript code to TypeScript in order to resolve the implicit error

I'm currently working on my initial React project using Typescript, but I've hit a snag with the code snippet below. An error message is popping up - Parameter 'name' implicitly has an 'any' type.ts(7006) Here is the complet ...

Deciding Between Transmitting Shop Cart Information: Ajax or PHP Posting?

Shoutout to Marcel Gwerder for crafting the code I'm about to ask a question on. I would've dropped a comment or message, but the thread seemed lifeless (who revisits old threads anyway?) and I'm clueless about PMing people. Dive into this ...

Information bubble from HERE Maps -

Currently, I am integrating HereMap into my Vue.js application. You can find the code for implementing HereMap in Vue.js here. Next, I need to add an InfoBubble to this map using the code available here. However, I encounter a problem where the InfoBubbl ...

Merging audio files using Node Stream

Currently facing an issue with joining 2 .wav files together, as my output file only contains the first item in the array: const writeStream = fs.createWriteStream('server/playback.wav'); const inputFiles = [ `${path.resolve(__dirname, 'r ...

Struggling to incorporate z-index for a tooltip component that overlaps in a project utilizing React, Tailwind, and DaisyUI

Hello everyone, I trust you are all doing great. I have a query regarding a Fireship IO tutorial on incorporating TailwindCSS and DaisyUI into React. I've managed to create a side navbar similar to Discord, complete with tooltips that display as span ...

SVG to create a gradient mask that appears transparent

I require assistance with working on svg's. I have a "background image" with another "image" layered over it. The "image" needs to have a hole cut out of it so that the background image can shine through. I managed to achieve this by utilizing svg: ...

Using jQuery to strip inline styling from copied webpage content

When I copy content/paragraph from Wikipedia and try to paste it as code on my webpage dynamically, it ends up with a lot of inline styles. I want the code to be clean and properly formatted in HTML. I have tried several methods, but they remove all the ta ...

Please ensure to log out when the user exits the tab

I am looking for a way to automatically log out users from my Django site when they close the browser tab or window. Ideally, I want users to be forced to re-enter their username and password if they try to access the site again after closing it without cl ...

Conceal Navigation with jQuery

Seeking assistance with jQuery for a new project. I'm trying to create a navigation menu that will automatically disappear after 3 seconds when a user enters the page. In its place, an arrow will be displayed instead of the original menu. Once the a ...