Switching between different types of materials on a single object

As a newcomer to using three.js, I've been attempting to apply two different materials to a single object and toggle between them using a visibility flag, but so far, I've had no luck. Is there an alternative method to achieving this, or is it even possible?

var materials = [
    new THREE.MeshPhongMaterial( { color: 0x00ff00, visible:true, shininess: 1 } ),
    new THREE.MeshPhongMaterial( { color: 0xff0000, visible:false, shininess: 1 } )
];

obj= THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
scene.add(obj);

scene.traverse(function (node){
    if(node instanceof THREE.Mesh) {
        node.visible = !node.visible;
    }
});

This technique will eventually be applied to all objects within the scene, which is why I am utilizing scene.traverse.

javascriptthree.js

Answer №1

It seems like you are attempting to modify the visibility of materials, but inspecting the meshes while traversing through them. To fix this issue, simply remove the visibility: true/false from your material definitions and insert the following line:

obj = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
obj.children[1].visible = false; // include this statement
scene.add(obj);

By doing so, you will set visibility = false for the second mesh created by createMultiMaterialObject. This adjustment allows your traverse function to correctly toggle the visibility of the meshes.

As you delve deeper into using THREE.js, consider exploring THREE.MultiMaterial and geometry groups to effectively apply multiple materials to a single mesh.

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

Retrieve the data contained within a displayed embed tag that includes a src attribute

Can anyone provide guidance on how to retrieve the content of an embed tag using src attribute? I have an embed tag pointing to a custom page as src. I tried to use jquery to access the rendered content but I am not getting anything back. Any suggestions ...

javascriptjqueryhtml

Having trouble retrieving user data that is being passed as a context value using React's useContext

Currently, I am integrating Google login into my React application and facing an issue with passing the response data from Google login (i.e. user data) to other React components using the useContext hook. Unfortunately, I am unable to retrieve the user da ...

javascriptreactjsreact-hooksuse-contextreact-google-login

Ways to conceal text or a div element and substitute it with asterisks

I'm seeking assistance with a concept involving a simple toggle button that can hide an object and replace the empty area with ****. My initial idea was similar to a password form input where you can conceal the password by clicking an eye icon. Howe ...

javascripthtmljquerybootstrap-4

How can I configure Expressjs to handle the '/' route for all incoming requests?

Using ExpressJs to build an app, users now have the ability to request a user profile using localhost:5000/user/12345. Here is how the server processes it: app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'index.html&a ...

javascriptnode.jsexpressroutes

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

javascriptjquerycsssyntax

Conceal the top section of the navigation bar as you smoothly scroll

Hello, I recently personalized a Bootstrap navbar with 2 rows - the upper section containing just the logo and social links, and the lower section with navigation links. I have been attempting to hide the upper section when scrolling, but so far, I have no ...

javascriptcssscrollnavbartransitionend

Using THREE.js to pass an array of vec2 to a shader

I've spent quite some time browsing the internet but haven't found the right solution yet. I came across a list of uniform types used by THREE.js and believe the code below should be accurate. I'm defining a uniform array of Vector2 at the ...

javascriptarraysthree.jsglslshader

Establish a seamless UDP connection using JavaScript and HTML5

Is it feasible to establish a direct two-way connection with a UDP server using javascript/HTML5 (without node.js)? While WebRTC is an option, my understanding is that it does not support sending datagrams to a specific server. I am primarily focused on c ...

javascripthtmludpwebrtc

Angular.js: automatically select default option based on ID

In my angular.js single page application, I am retrieving initial data from a rest endpoint. The data consists of a list of IDs representing saved models and a tree of options for cascading dropdowns. How can I automatically set the default path in the t ...

javascriptangularjsangularjs-ng-repeatng-options

Using React Native to trigger a function based on a conditional statement

<Pressable onPress={()=> { if(newID) { EditPress(newID) } else { AddPress } }} style={styles.logBox} > <Text style={{ textAlign:"center", ...

javascriptreactjsreact-nativeonpresspressable

The concept of looping within Angular directives

Exploring various recursive angular directive Q&A's can lead to different solutions that are commonly utilized: Creating HTML incrementally based on runtime scope state Check out this example [Stack Overflow discussion] Here's another exa ...

javascriptrecursionangularjs

How does the behavior of instanceof change when used within JSON.stringify()?

I am utilizing the decimal.js library for conducting financial calculations within Node. In my code, I have crafted a custom JSON.stringify replacer function. However, I have noticed a discrepancy in the results of property type tests conducted using insta ...

javascriptjsondecimal.js

Clone all documents from a NodeJS mongoose collection and transfer them to a different server's database

I need assistance with migrating my database to a new server. My collection consists of approximately 410,000 documents, and I am looking to transfer them in batches of 100 to my new server that runs on mongodb. Below is the code I have written for this ...

javascriptnode.jsdatabasemongoose

Modify the array dynamically within the Factory

I am currently working on a simple app where I want to display embed videos with the click of a button. It was quite challenging for me to dynamically bind my embed players, but I managed to do it successfully. I created a factory that contains my data in ...

javascriptangularjs

Change the color when hovering over the select box

Using jQuery, my goal is to change the hover color in a select box from its default blue to red. I understand that the hover color of the select input may vary based on the operating system rather than the browser, but I am making progress towards achievin ...

javascriptjqueryhtml

Unrecognized OnClick Function in AJAX

As someone who is relatively new to AJAX, I am trying to work on a project that involves fetching data from a route and using AJAX to create a table. Within this table, each row has a button that, when clicked, should trigger a POST request to add some dat ...

javascriptjqueryajax

Encountering download issues with the FileTransfer API on Android while using Phonegap

I'm currently working on incorporating the FileTransfer API into my Phonegap App using Javascript. However, when I use the code below to call it, I encounter the following error: 01-24 00:36:10.495: I/Web Console(14802): Error: SyntaxError: Unexpecte ...

javascriptandroidphonegap-pluginsfile-transfer

Using ng-repeat to display table data in AngularJS

There is an array with 7 elements, each containing an object. The goal is to display these elements in a table with one row and 7 columns. The desired output should look like this: some label1 | some label2 | some label3 | some label4 | some label5 som ...

javascriptangularjs

Tips for adding a picture to a server and applying CSS filters to enhance it

I recently came across a set of CSS filters that can be applied to images by simply specifying the filter ID. Now, I'm looking to create a button that will allow me to save the edited image (with the filter applied) to a designated file location. I&a ...

javascriptphphtmlcsscanvas

Providing Arguments to a Named Function Using Dependency Injection

I am currently working on an Angular app where I am passing a named function into a controller. The issue arises when I try to inject a provider into that controller for use, as I receive a TypeError: object is not a function in the console. My question i ...

javascriptangularjsdependency-injection