How can I overlay an environment map onto existing materials in ThreeJS?

Hello, I am a beginner in ThreeJS and I'm currently working on adding an Environment Map on top of the materials loaded using JSON loader. This is my approach:

var gun = null;
var loader = new THREE.JSONLoader();
loader.load("obj/nissan/nissan-gt-r-nismo.json", function(geometry, materials){

    var mat = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        envMap: cubeMap,
        shininess: 2.0
    });

    materials.push(mat);

    var matface = new THREE.MeshFaceMaterial(materials);

    gun = new THREE.Mesh(geometry, matface);
    gun.scale.set(0.5,0.5, 0.5);
    scene.add(gun);

} );

However, I noticed that the environment map gets overwritten by the materials loaded with JSONLoader. (Environment mapping works when I remove the loaded materials)

By the way, should I use JSONLoader or ObjectLoader for this task?

UPDATE: I RESOLVED THIS ISSUE BY UPDATING EACH MATERIAL TO INCLUDE THE ENVIRONMENT MAP.

    for(var i = 0; i < materials.length; i++){
        materials[i].envMap = cubeMap;

        if(materials[i].name =="body-paint"){
            materials[i].reflectivity = 0.2;
        }
    }

Is this the recommended method to achieve the desired outcome?

Answer №1

Avoid adding a new material for the envMap; instead, apply it to your current (potentially only) material.

When you are certain that your JSON file has a specific format, using JSONLoader is a reliable choice, as demonstrated in many examples.

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

Is there a method to prevent the repetition of this loop?

I have a question regarding my React app development. I am currently using useEffect to loop through six items every time, even when only one item has changed. How can I optimize this so that only the variable that was changed in the reducer function is ...

When I click on the left side menu, it should automatically scroll upwards

How can I make the right side page scroll go up when clicking on the left side menu? Please assist me with this issue. https://i.sstatic.net/doamN.jpg ...

The Kenburn zoom image effect fails to function

I want to implement a zoom effect on an image using the Ken Burns effect when it is clicked. However, the code I have written does not seem to be working as expected. Here is the code snippet: $(document).ready(function () { $('.kenburns').on( ...

Limiting drag and drop in Three.js with specified distance thresholds

Is there a way to restrict the distance an object can be dragged and dropped in Three.js using DragControl? I am looking to set a maximum distance from the object's original position to prevent users from dragging it too far. ...

Which is better for creating a curved plane surface: CSS3 or Three.js?

Is it possible to achieve a curved plane surface resembling the one shown in the image using CSS3 or Three.js? ...

Setting a radio button as default based on a variable value can be accomplished by following a few

I am working with 2 radio buttons and I need to dynamically check one based on a variable value. <input type="radio" name="team" id="team_7" value="7"> <input type="radio" name="team" id="team_8" value="8"> The variable number is set dependin ...

Display previous messages in React JS chat when scrolling upwards

https://i.sstatic.net/mcJUp.png I am currently working on a chat application, as depicted in the image. Once the chat is initiated, it automatically scrolls down to display the most recent messages. My goal is to implement a feature where when a user sc ...

Why does `npm init react-app` automatically select yarn as the default package manager? (npm version 6.14.5)

After executing the command npm init react-app, I noticed that npm automatically selects yarn as the default package manager for the newly created app. To resolve this, I followed the steps provided in How Do I Uninstall Yarn to remove yarn from my system. ...

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

What techniques can I implement with puppeteer to efficiently warm up the cache?

I have a lengthy txt document containing around 1000 URLs that need to be accessed in order to warm up the Varnish cache. Since Puppeteer is required, it's crucial that there is important content loaded through AJAX calls. This is my initial attemp ...

Tips for reducing the size of Javascript code upon clicking a button while also implementing validations

I need help with a textEditor feature. I want users to be able to write Javascript functions, and when they click a button, the code should be validated for correct syntax and then minified. This functionality needs to be implemented using either Javascrip ...

Creating a dynamic JSON array with a single key as an array

After converting data from an excel sheet into a json array, here is the structure: [{ 'booktitle': 'Leading', 'bookid': '56353', 'bookauthor': 'Sir Alex Ferguson' }, { 'booktitle&ap ...

Struggling to get a basic HTML form to function with JavaScript commands

In my form, there are two input fields and a button. Upon clicking the button, a JavaScript function is triggered which multiplies the values entered in the inputs. The result is then displayed in a <p> element and evaluated through an if else statem ...

How can you implement div slide animations using AngularJS?

Is there a way to slide a div when a user clicks on a tab? I have created a demo in jQuery Mobile (view demo here) with three tabs that show transitions. Can you provide guidance on how to achieve the same functionality in Angular? I have been attempting t ...

JQuery Mobile fails to apply consistent styling to user input check items within a list

I have successfully implemented the functionality to add user input items to a checklist. However, I am facing an issue where the newly added items are not adhering to Jquery Mobile's styling. Here is a screenshot showcasing the problem: Below is th ...

Javascript: Efficient ways to populate multiple inputs upon clicking

Is there a way to populate all input fields on my page with the id toinput using an onclick button? In this code snippet, only the first input field is currently being filled out. How can I fill out both of these inputs with just one click when launching ...

How can I use jQuery to merge the values of two <h> tags?

There are two <h4> tags, one with a price and the other with a percentage value. I need to calculate the percentage and display it in a new <h4> tag. My previous attempts at calculation resulted in NaN. Even using alert(parseFloat(price)+parseF ...

Avoid using `@typescript-eslint/no-floating-promises` when using a `const` function

Can anyone help me understand why the @typescript-eslint/no-floating-promises rule works with some async functions but not all? To my understanding, these two functions should be equivalent: const getUser = async (userId: string): Promise<User> => ...

How can you locate the position of a selector within a parent or set using jQuery

Could someone please help me determine the position of the current selector within its parent using jQuery? I need this information in order to effectively use the .insertAfter() and .insertBefore() methods to rearrange elements within their nested structu ...

Error: Trying to access "dishes" property on an undefined object gives a TypeError

Need Assistance Urgently! I have developed a web application using react and integrated it with node js. In the app, I am required to pass the status of a dish to the DishDetail Component indicating whether it is marked as "Favorite" or not. If a dish is ...