Using several materials on a single mesh in Three.js is a common practice

I am exploring ways to enhance a mesh by adding multiple materials. My goal is to layer a slightly transparent material on top of the existing one, allowing for opacity animation between the two. However, when I try to pass them as an array, the mesh simply disappears. There must be something crucial that I am overlooking here. The ultimate objective is to smoothly animate the opacity transition of the new material over the original.

Original Material

const originalMaterial = child.material.clone();

New Material

const newMaterial = new THREE.MeshStandardMaterial({
 name: 'New Mat',
 map: newTexture,
 emissiveMap: newTextureMap,
 side: THREE.DoubleSide,
 opacity: .5,
 transparent: true
});

Combining them

child.material = [originalMaterial, newMaterial]
child.material.needsUpdate = true
javascriptthree.jsaframe8thwall-web

Answer №1

When working with WebGL, it's important to note that multiple materials on a single mesh are not allowed. This limitation is why the THREE.Mesh constructor only permits one geometry and one material to be used.

If you want to achieve the effect of multiple materials, one workaround is to create two separate meshes with one material having its transparency set to 0.5. However, a more common approach is to utilize a single mesh and manipulate opacity variations through the use of the .alphaMap texture. By doing so, you have greater flexibility as you can incorporate numerous transparency values on a single object without the need to generate new materials for each one:

var textureLoader = new THREE.TextureLoader();
var alphaTexture = textureLoader.load("path/to/alpha.png");
mesh.material.alphaMap = alphaTexture;

mesh.material.transparent = true; // <- make sure to include this!

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

Share a Node.js Express.js npm package for universal access within the project

Here is my current folder structure. /app.js /src /routes /controllers Within the routes folder, there are multiple javascript files that all require the passport.js package like so: const passport = require('passport'); Is it possible to c ...

javascriptnode.jsexpress

"Troubleshooting issue: jQuery AJAX encountering problems with parsing JSON

I recently came across a Uncaught SyntaxError: Unexpected end of input error in my code. var dataURL = "LineChartController?tp=" + tpAtt + "&dept=" + dept + "&date=" + dateMY; alert(dataURL); var JSONdata = jQuery.aja ...

javascriptajaxjquery

Emergence of content missing on initial slide in a jQuery carousel

I am currently working on a website that includes a jQuery image slider. However, I have encountered an issue where in IE7, the text of the first slide does not show up until just before the script starts to change slides. After that, it displays correctl ...

javascriptjqueryimageslider

Is it feasible to use JQuery to automatically scroll a DIV with scrollbars to the very bottom?

Can you explain the process of achieving this with JQuery? ...

javascriptjquery

Python sends back a list containing garbled characters to Ajax

Need help fixing the output of a Python list returned to Ajax, as it appears strange. ap.py @app.route('/_get_comUpdate/', methods=['POST']) def _get_comUpdate(): comNr = request.form.get('comNr') com_result ...

javascriptpythonajaxflask

I am curious about how to switch between different modes in order to change the appearance, functionality, and interaction of a program. Currently, I am exploring this

const options_list = ['Exploring', 'Creating']; // an arraylist holding different activities for the bot to switch between. bot.on('ready', () => { setInterval(() => { const randomIndex = Math.floor(Math.random() * ( ...

javascriptnode.jsdiscorddiscord.js

Instructions for user to upload and play an MP4 file on their PC

For my web project that utilizes node.js, HTML, and JavaScript, I am looking to incorporate a video player element. I want users to have the ability to click a button and play an MP4 file directly on the webpage. How can I achieve this? I currently have s ...

javascripthtmlnode.jsvideo

Passing a node.js variable to an ejs template through a post request

In my nodejs application, I utilize Express JS to handle post requests. Within the INDEX.JS FILE, the following code snippet is present: this.app.post('/profile', (req, res, next) => { let password = req.bo ...

javascriptnode.jsexpressejs

Retrieve the data stored in a JSON object

After making an ajax call, the json object that gets returned looks like this: Object {0: "1", 1: "jake", 2: "#00ff00", tip_id: "1", tip_details: "jake", tip_color: "#00ff00"} Object {0: "2", 1: "jakee", 2: "#00ff00", tip_id: "2", tip_details: "jakee", t ...

javascriptajaxjson

Every time I attempt to bootstrap AngularJS and RequireJS, I consistently encounter a dependency injection issue

Recently, I've been working on a single page application using requirejs and angularjs. While I managed to load all the necessary files and run the app smoothly without any conflicts or dependencies from other angular apps, I encountered an error when ...

javascriptjqueryangularjsrequirejssingle-page-application

The options object provided for Ignore Plugin initialization in Webpack 5.21.2 does not conform to the API schema, resulting in an error

Here is the setup of my webpack.config.js on a backend server running webpack version 5.21.1: /* eslint-disable */ const path = require('path'); const webpack = require('webpack'); module.exports = { target: 'node', modul ...

javascriptwebpackwebpack-dev-server

Becoming an expert at managing and solving dependency conflicts

I am facing an issue while setting up a project from my work computer to my home computer due to fixed dependency versions. Here are the dependencies causing the problem: "dependencies": { "@nestjs-modules/mailer": "2.0.2&qu ...

javascriptnode.jsnpmnestjs

Differences Between Vuetify Breakpoints and CSS Helper Classes

As I browse through the Vuetify documentation and various code snippets on the web, I often come across examples that mention using either a Vuetify breakpoint or a CSS helper class to make an element responsive to screen size changes. Is there a preferre ...

javascripthtmlcssvue.jsvuetify.js

Incorrect colors are shown by Electron and Webkit browsers

As I work on developing an application using Electron, I encountered a curious color discrepancy. In Adobe XD, the color reads as rgb(0,55,200), but when I input this exact value into my app created with Electron, the displayed color shifts to rgb(4,48,193 ...

javascriptvisual-studio-codeelectroncolor-profilesrgb

Can a pledge be honored at a precise moment?

I have implemented transitions on my web page. When clicked, everything fades out to an opacity of 0 over a duration of 1 second. Then, a new page is swapped in and everything fades back in to an opacity of 1 over another 1-second duration. The issue aris ...

javascriptjquerycsspromise

I noticed a change in the state between dispatches, but I did not make any alterations to the state

Although this question has been previously raised, most of the discussions focus on the OP directly mutating the state. I have taken precautions to avoid this by using techniques like the spread operator with objects and arrays. However, despite these effo ...

javascriptreactjsecmascript-6reduxreact-redux

VueJS encountered an insecure XMLHttpRequest endpoint during the request

I am currently working on a project that consists of a VueJs app with a Laravel backend serving as the API. While testing the app locally, everything works smoothly with the Https protocol. However, upon deploying it to the production server, I encountere ...

javascriptlaravelvue.jsdigital-oceanlets-encrypt

Guide to organizing the legend section into two columns within Apache Echarts

I'm looking to customize the legend area layout in Apache Echarts for a two-column display. Can anyone provide guidance on achieving this using legend options? I have been unable to locate any examples demonstrating this particular layout. For refere ...

javascriptajaxecharts

How can we determine the variable type when passing a value from Django to Ajax?

In my Django project, I have a variable called flag=True. I tried to pass it to a script in HTML like this : <script> if({{flag}}==True) do something </script> I expected the code inside the script to be executed, but it seems that True i ...

javascriptpythonajaxdjango

I'm experiencing an issue with fullCalendar where the dayRender function is not functioning as expected

I have been using fullCalendar and I am looking to customize the color of specific days. I have successfully created an overlay that is displayed when a user clicks on a particular day. Everything works as expected with the overlay, but now I am encounte ...

javascriptfullcalendar