How can I alter "diffuseMap" and "roughnessMap" in Three.js to become "cubeMap"?

I have a specific code snippet that I am trying to work with:

var container;
var camera, scene, renderer;
let exrCubeRenderTarget, exrBackground;
let newEnvMap;
let torusMesh, planeMesh;

var mouseX = 0,
  mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var object;

init();
animate();

function init() {
  // Rest of the initialization function goes here
}

// Additional code for loading models and textures

// Other functions such as onWindowResize, onDocumentMouseMove, render, animate, etc.

I am attempting to achieve a metallic material effect similar to this example. To do so, I removed some existing textures and added a cube map but encountered issues.

Here is my adjusted code:

// Revised code with changes for metallic material effect

var container;
var camera, scene, renderer;
let newEnvMap;
let torusMesh, planeMesh;

var mouseX = 0,
  mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var object;

init();
animate();

function init() {
  // Rest of the updated initialization function

}

// Further modifications for achieving the metallic material

// Loading manager, model loader, OBJLoader, WebGLRenderer setup, event listeners

// Other necessary feature implementations 

In the end, I aim to have a transparent background with only the OBJ object visible. Any assistance in resolving this issue would be greatly appreciated!

Answer №1

To achieve a metallic look, the key is in adjusting the material properties:

child.material = new THREE.MeshStandardMaterial({
  color: "#555",
  roughness: 0.0, // Set roughness to 0
  metalness: 1.0, // Increase metalness to 1
  envMapIntensity: 1.0
});

child.material.envMap = newEnvMap;

// To focus only on the environment map, remove other unnecessary settings
//child.material.map = diffuseMap;
//child.material.roughnessMap = roughnessMap;
//child.material.needsUpdate = true;

If you wish to remove the background, exclude it from the Render loop like so:

//scene.background = exrBackground;

Try out this live demo:

// Your JavaScript code goes here...
// Your CSS styles go here...
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffbe7fdfafadeeceecefeeeffafa4eae5">[email protected]</a>/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddb9a594858086afdabfb2babca7abb8d1fdcfdadbcf">[email protected]</a>/examples/js/loaders/OBJLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66827e6060634654606c6f66656f73">[email protected]</a>/examples/js/loaders/EXRLoader.js"></script>

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

Unable to trigger click event on dynamically added element using Chrome (jQuery)

My approach here involves dynamically creating a drop-down and binding the click event to the <option> within the <select> var $select = $('<select></select>'), $option1 = $('<option>a</option>') ...

Modify the name of the selected option value

I am working on an html code where I need to replace the values 0, 1, and 2 with USA, Australia, and Canada respectively. I also need to know the name of these values in my MySQL database. Thanks! HTML <form method="post" id="countriesForm" name="cou ...

Triggering animation with jQuery and CSS

I am working on a one-page site and I want to make a parallelogram disappear when a button is clicked for the next part. Currently, it is disappearing from right to left but I would like to change the direction to left to right. Additionally, I have a simi ...

Customize your Bootstrap navbar dropdown to showcase menu items in a horizontal layout

I have been developing a new project that requires a navbar to be positioned at the center of the page, at the top. The current HTML code I am using is as follows... <div class="navbar navbar-inverse navbar-fixed-top center"> <div class="con ...

What is the best way to exclude HTML tags from the innerHTML attribute?

Currently, I am in the process of developing a messenger application and facing an issue where my messages are not ignoring HTML tags. This is happening because I directly paste the input text into the innerHTML of the message. The code snippet responsible ...

Clearing a textarea in jQuery that is populated with text

Having an interesting dilemma. I'm trying to clear a <textarea> and then replace it with new content. The functions in the JSFiddle will work perfectly fine if the textarea is left empty, but as soon as any text is manually typed into it, the me ...

Troubleshooting problem with JSON array value in Petfinder's AJAX request

$(document).ready(function(){ var url = 'http://api.petfinder.com/shelter.getPets?key=99392cbf55ee6b2f9b97ed375eca907d&id=WI22&status=A&output=full&format=json'; $.ajax({ type : 'GET', ...

React and TypeScript threw an error: trying to execute setSearchQuery, which is not a function

I encountered an issue where I am receiving the error message: Uncaught TypeError: setSearchQuery is not a function in my Next.js / Typescript app. This error occurs while typing a search query into the search box. I have implemented a generic search funct ...

Spinning Loader During Ajax Request

I am currently working on an ajax script that retrieves a query file and loads new content from that file whenever the database is updated. However, I want to enhance the script by adding a loading spinner. How can I achieve this? < div id = "AjaxLoa ...

Php/JavaScript Error: Identifier Not Found

I've double-checked my code multiple times, but it still doesn't seem to be working properly. When the PHP runs, the browser console displays the following error: Uncaught SyntaxError: Unexpected identifier. I'm not sure if this is a si ...

Transform every DIV element into a TABLE, replacing each DIV tag with a combination of TR and TD tags

I have a code that is currently structured using DIV elements. However, I've encountered alignment issues when rendering it in EMAIL clients. To address this problem, I am looking to convert the DIV structure to TABLE format. Below is the original co ...

Tips for maintaining the active state of an item within a component that loops through a dataset

I am working with an array of objects (specifically, posts represented as strings) and I am looking to be able to edit each one individually. However, I am encountering an issue where clicking on the edit button triggers editing for all posts at once: co ...

Apexcharts tends to be unreliable upon dashboard loading, frequently appearing and disappearing unpredictably

Having trouble with displaying apexcharts on my dashboard. There are 5 charts on the dashboard and their behavior is acting strange. The charts only show up after reloading the page 3 to 4 times or when inspect element is clicked. Otherwise, only 2 or 3 ch ...

What is the process of rotating a vector by 90 degrees to align it with a perpendicular plane, and then adjusting it further by 15 degrees out of

My ultimate objective is to determine a vector that represents the direction of the green line depicted in the image below, based solely on the positions of the yellow and green dots. To clarify, the angle of the vector can vary as long as its endpoint ...

Efficiently loading and locally filtering data in Angular 2 using Observables

In my Angular 2 application, I have successfully implemented an input with autocomplete that calls an API for server-side filtering and value retrieval. However, I am now facing a challenge as I need to add more inputs to my page that do not require server ...

Using JQuery's onChange event triggers actions based on the current values of input fields. However, in some

I am currently tackling an issue with a module that is designed to automatically select the only valid value from a Multi- or Single selection field when there is just one valid option and an empty choice available. Initially, everything was working smoot ...

JavaScript struggles to obtain the timezone information when Daylight Saving Time is

Can someone help me with setting a user's timezone offset for PHP through ajax? When a page is loaded with session data, if there is no pre-existing data, the following script is inserted into the page: <script type="text/javascript"> $(doc ...

Retrieve a subsection of an object array based on a specified condition

How can I extract names from this dataset where the status is marked as completed? I have retrieved this information from an API and I need to store the names in a state specifically for those with a completed status. "data": [ { "st ...

Steps to switch the displayed ionicon when the menu is toggled

My goal is to display the 'menu-outline' ionicon on my website until it is clicked, at which point the icon will change to 'close-outline' and vice versa. I am utilizing jQuery for this functionality. Although I am aware of how to togg ...

The console is displaying the array, but it is not being rendered in HTML format in AngularJS

Can you please review my App.js file and let me know if there are any mistakes? I have provided the necessary files index.html and founditemtemplate.html below. Although it is returning an array of objects in the console, it is not displaying them as inten ...