Three JS does not support dynamic color changing functionality

In my ThreeJS project, I have created a 3D wall and am attempting to change its color dynamically on a click event. However, the code doesn't seem to be working as expected. Can you help me identify the error in the following code snippet?

var materials = [ materialFront, materialSide ];

var material = new THREE.MeshFaceMaterial( materials );

if(path_type=="wall")
{
    var mesh1 = new THREE.Mesh( geometry1, material );
    object.add( mesh1 );
}
else {
    var mesh2 = new THREE.Mesh( geometry1, material );
    object.add( mesh2 );
}

object.rotation.x = Math.PI / 2;
object.position.y = parseInt(default_height*(floor_number-1));  
scene.add( object );    

The code for changing the color on click event is below:

function color_change(color){ 
 mesh1.material.color = new THREE.Color( color );         
 mesh1.material.needsUpdate = true;
}

When executing this, I encounter the following error message:

mesh1 not defined

Answer №1

if(path_type=="wall")
{
    let newMesh = new THREE.Mesh( geometry1, material );
    object.add( newMesh );
}

The variable newMesh is defined within the scope of the if statement, making it inaccessible outside of that block. To make it accessible to other functions, you should declare it in the global scope like this -

let newMesh;
if (path_type == "wall") {
    newMesh = new THREE.Mesh(geometry1, material);
    object.add(newMesh);
}

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

The React Native Expo is throwing an error stating that it is unable to locate the module 'minizlib'

At the instructions available in the read.me of https://github.com/react-community/create-react-native-app Upon selecting my template using the expo init command, I encountered the following error: Cannot find module 'minizlib' Error: Cannot fi ...

Verify if the radio element is marked as selected in the AJAX reply

My ajax response contains two radio elements and I need to check if they are checked in the response. I've tried using the code below to check the radio status but it's not working: $('#input[type=radio]').each(function(){ alert($( ...

The bxSlider reloadSlider() function is not defined once the page has finished loading

I am currently working on developing an interactive upload and refresh gallery using AJAX and jQuery. The application allows for the upload of multiple images through drag & drop. After uploading, I need to visualize how the new gallery will appear with t ...

Running a function following several iterations of angular.forEach

let values1 = [1, 2, 3]; angular.forEach(values1, function(value){ $compile(value)($scope); }); let values2 = ['a', 'b', 'c']; angular.forEach(values2, function(value){ $compile(value)($scope ...

Rule: attribute should indicate a specific function

I am currently trying to implement the functionality from https://github.com/rpocklin/angular-scroll-animate in my project, but I keep encountering an error in my console: Error: Directive: angular-scroll-animate 'when-visible' attribute must ...

Implementing jQuery slideDown effect on a nested table element

I am facing an issue where the nested table does not slide down from the top as intended when a user clicks the "Show" button. Despite setting the animation duration to 500ms with jQuery's slideDown() function, the table instantly appears. I am using ...

Preventing line breaks (endline) from PHP variable when passing to JavaScript

Check out my code snippet below: <td onclick="openFile('<?php echo htmlentities ($row['name'])?>',' <?php echo htmlentities ($row['content'])?>')"> <a href="#nf" dat ...

Using vuex-class to interact with Vuex in non-Vue components

Is it possible to access Vuex outside of a Vue component using vuex-class? In a typical scenario, the process is quite straightforward: // some JS file import store from './../store'; // path to Vuex store store.commit('ux/mutationName&ap ...

What is the best location to place Sentry's setUser function in a Next.js application?

I have been working on integrating user data into Sentry's scope globally so that user information is passed to it every time an error or event occurs. My application is developed in Next.js, and I followed the configuration mentioned in Sentry' ...

Rearranging div placement based on the width of the screen

I am currently working on building a responsive website and I need two divs to switch positions depending on the screen width, both on initial load and when resizing. Despite my efforts in researching and trying various options, I have not been successful ...

The scrolling experience in Next js is not as smooth as expected due to laggy MOMENTUM

Currently, I am in the process of constructing my portfolio website using Next.js with Typescript. Although I am relatively new to both Next.js and Typescript, I decided to leverage them as a learning opportunity. Interestingly, I encountered an issue with ...

Simple JavaScript timer with loop and pause

Having trouble with a countdown script and encountering multiple issues. The script does not run smoothly Difficult to make it repeat (closure) Struggling with delaying the start and repeat (closure) Seeking assistance in fixing this code which should i ...

Bringing life to web pages through captivating animations when showing and hiding div elements, utilizing the power

After extensive research on various online platforms, including stackoverflow, I unfortunately couldn't find a suitable solution to my problem. However, with the invaluable assistance of you all, I managed to successfully implement a code for my proje ...

Obtaining the data from the React material-UI Autocomplete box

I have been exploring the React Material-UI documentation (https://material-ui.com/components/autocomplete/) and came across a query. Within the demo code snippet, I noticed the following: <Autocomplete options={top100Films} getOptionL ...

Xstream produced a JSON response for a collection of objects

Utilizing Xstream for generating JSON in my application. Utilizing JSON for ajax support as well. When attempting: xstream.alias(classAlias, jsonModel.getClass()); //Note classAlias="records" responseStream.println(xstream.toXML(jsonModel)); where j ...

Having trouble retrieving parameters within the expressjs router.delete endpoint implementation

Check out my code snippet below where I utilized Express router and Mongoose Model. I am encountering an issue accessing the id parameter. router.delete('/task/:id', function (req, res) { Task.remove({ ...

display a div positioned relatively next to another div

I'm having trouble displaying a textbox next to another div on my webpage. Instead of appearing next to the div, it is showing up below it. The textbox needs to have an absolute position. You can see the issue in action by checking out this demo. Than ...

Exploring the Node.js view object within a function and delving into the reasons why a property of

As a beginner in programming, I am seeking tips on how to effectively learn node.js. Currently, I am utilizing the "Learning Behavior Driven Development with JavaScript" book for my learning journey. I would greatly appreciate any advice on how to view ob ...

What is the best way to determine in component.html whether the column type is equal to 1 to show the label text "Active,"

Having trouble checking the value of an object named ReportControl. If the column type is 1, display the label "active"; otherwise, display the label "not active" on reportcomponent.html. The data for the ReportControl object is as follows: {"reportId": ...

Creating a header for an HTML table with merged columns in jQuery DataTables

Whenever I attempt to implement the jQuery DataTables plugin, it encounters an error stating c is undefined on line 256 (as seen in the minified version). The structure of my table is as follows: <table class="datatable"> <thead> ...