Adjust the hue of the three.line when a button in three.js is clicked

Hey there, I'm just starting out with Three.js and I've been having trouble changing the color of a line when a button is clicked. I've created the line using Line Basic Material, but for some reason, the color isn't updating as expected.

Here's my code:

if (color === "color") {
        material = new THREE.LineBasicMaterial({
            color: 0xff0000,
            opacity: 1,
            linewidth: 5
        });
    } else {
        material = new THREE.LineBasicMaterial({
            color: 0x000000,
            opacity: 1,
            linewidth: 1
        });
    }

    var tmp_geo = new THREE.Geometry();
    tmp_geo.vertices.push(new THREE.Vector3( -10, 0, 0 ));
    tmp_geo.vertices.push(new THREE.Vector3( 10, 0, 10 ));

    line = new THREE.Line(tmp_geo, material);

    line.material.needsUpdate = true;
    line.geometry.colorsNeedUpdate = true;

    line.scale.x = line.scale.y = line.scale.z = 1;
    line.originalScale = 1;
    geometries.push(tmp_geo);

    scene.add(line);

I'm using WebGLRenderer with Trackball controls and my version is r66. If anyone has any suggestions on how to make this work, I'd really appreciate it. I've been searching for a solution with no luck so far.

Thanks so much in advance!

javascriptthree.js

Answer №1

To apply new material to an existing scene, you need to reassign the material properties.

Simply trigger a function using onclick event.

line.material.color = new THREE.Color( 0xffffff );         
line.material.needsUpdate = true;

Answer №2

Check out this example link Change the Color

onClick = function() {
line.material.color = new THREE.Color(0xffffff * Math.random());
line.material.needsUpdate = true;
};

If you need further clarification, please feel free to share your code on jsfiddle and I'll assist you.

Answer №3

Unsure of its accuracy, but I managed to obtain the outcome simply by assigning a name to a line (line.name = "line name") and

    var material;
    if (color === "color") {

        var lineColorChange = scene.getObjectByName(linename);
        lineColorChange.material.color = new THREE.Color(0xff00ff);
        line.geometry.dynamic = true;
        line.material.overdraw = true;
        lineColorChange.material.needsUpdate = true;

    } else {
        material = new THREE.LineBasicMaterial({
            color: 0x000000,
            opacity: 1,
            linewidth: 5
        });

    }

    var tmp_geo = new THREE.Geometry();
    tmp_geo.vertices.push(10,0,10);
    tmp_geo.vertices.push(-10,0,-10);

    line = new THREE.Line(tmp_geo, material);
    line.name = linename;


    geometries.push(tmp_geo);
    scene.add(line);

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

What is the process for creating a list using layers that are published in Geoserver?

I am currently working on developing a webmapping application. One of the tasks I need to accomplish is parsing the WMS request in order to retrieve the title of each layer within the layers section: var xhr = new XMLHttpRequest(); xhr.open(' ...

javascriptjqueryopenlayers-3geoserverwms

Open multiple accordion sections simultaneously

In my current setup, I have a paginated loop of elements that contains an accordion. The accordion is implemented using angular-ui-bootstrap. <div data-ng-repeat="m in results"> <div class="stuff_in_the_middle"> <accordion id="a ...

javascriptangularjsaccordionangular-ui-bootstrap

Pass the selected ID from a Vue.js select component to an Axios post request and then render another select

Forgive me if this is a silly question, as I am new to Vue.js and JavaScript. I'm having trouble getting the id from one select element and using it in another API to display models in the next select element. The listings are working fine when I hard ...

javascriptvue.jsaxiosvue-component

Experiencing a problem with my JavaScript code in Node.js due to an asynchronous issue arising when using a timeout

My goal with this code is to retrieve JSON questions and present them to the user through the terminal. The user has 5 seconds to respond to each question before the next one appears. However, I encountered an issue where the next question times out automa ...

javascriptnode.jsreadline

Dealing with event delegation on elements that are not nested

Working with Bootstrap group radio buttons where I need to implement event delegation. <div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" class="btn- ...

javascriptbootstrap-5event-delegation

Efficiently managing modules with requirejs and Backbone.Marionette

After organizing the file structure of my web app, utilizing RequireJs and Backbone.Marionette, it now looks like this: |- main.js |- app.js |- /subapp1 |- subapp1.js |- subapp1.router.js |- /subapp2 |- subapp2.js | ...

javascriptbackbone.jsrequirejsmarionette

Issue Arising from Printing a Custom Instruction in a Schema Generated Document

When dynamically adding a directive, the directive is correctly generated in the output schema. However, it seems to be missing when applied to specific fields. Here is how the directive was created: const limitDirective = new graphql.GraphQLDirective({ na ...

javascripttypescriptgraphqlgraphql-jsgraphql-tools

When a HTML table is generated from imported XML, DataTables will be applied

I am facing a challenge with my code and would appreciate some help. I am trying to load an XML file using jQuery and then use DataTables on my HTML table. However, the plugin doesn't seem to be functioning correctly. When I manually create an HTML ta ...

javascripthtmlajaxxmldatatables

The most secure method for retrieving User Id in AngularFire2

I'm currently facing a dilemma in determining the most secure method to obtain an authenticated user's uid using AngularFire2. There seem to be two viable approaches available, but I am uncertain about which one offers the best security measures ...

javascriptangulartypescriptfirebaseangularfire2

Display a division upon choosing an option

I am working on a project that involves a selection menu in the form of a drop-down list. <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> Also, I ...

javascriptjqueryhtmlcss

utilize Angular's interface-calling capabilities

In the backend, I have an interface structured like this: export interface DailyGoal extends Base { date: Date; percentage: number; } Now, I am attempting to reference that in my component.ts file import { DailyGoal } from '../../interfaces' ...

javascriptangulartypescript

Updating the content with HTML and JavaScript

Hello everyone, I am currently working on a project to change the content of a div using JavaScript for educational purposes. Here is what I have done so far - <div id="navbar"> ... <ul> <li> <text onclick="getWordProcessing() ...

javascripthtmlonclick

Adjust the DIV shape to fit perfectly within the browser window without overlapping with any other elements

http://jsbin.com/iGIToRuV/1/edit Currently, I am working on developing a WYSIWYG website designer as part of an experimental project for various purposes. The ultimate goal is to ensure that it is both desktop and mobile-friendly. However, I have encount ...

javascriptjquerycsslayoutcss-position

Challenge: RxJS timeout function not functioning as expected

I am facing an issue with exiting the Observable stream after 3 seconds if there is no new string input. The problem arises when I paste the same value multiple times, as the distinctUntilChanged operator prevents the input stream from progressing. I wan ...

javascripttimeoutrxjs

Activate a function when the VueJS countdown timer hits zero

I've successfully created a countdown timer in the template that decrements a number perfectly. Now, I'm facing the challenge of triggering a function declared within the methods section once the countdown reaches 0. Despite attempting to check i ...

javascriptvue.jsvuejs2nuxt.js

What is the best way to implement window.load in React Native?

I'm encountering an issue with a simple button on my page in Expo/React Native. When I try to navigate to a new page using window.open upon clicking the button, I receive an error message saying "undefined is not a function." Although I am utilizing ...

javascriptreactjsreact-nativeexpo

Rails encountered a syntax error while attempting to parse JSON data, due to an unexpected character found at line 2, column 1

I'm a beginner when it comes to using AJAX in Ruby on Rails. What I'm trying to achieve is that when a user clicks on a link with the class .link (redirecting to an external site, for example www.google.de), it should send data - specifically the ...

javascriptjqueryruby-on-railsjsonajax

What could be causing the "Cannot POST /api/" error to occur when attempting to submit a form?

Having issues with my basic website and struggling to find a solution. As a complete beginner in this field, I am stuck and need some guidance. Accessing http://localhost:3000/class/create works perfectly fine when running the server. However, trying to a ...

javascripthtmlnode.jsexpressroutes

Each time the Angular children component is reloaded, the user is redirected to localhost:4200

In my Angular project, I encounter an issue with route parameters in children components. While navigating to these child components from the parent is seamless, reloading the child component causes the application to redirect to localhost:4200 and display ...

javascriptangularangular-ui-router

Testing the update functionality of meta content in the Vue Quasar Meta component using Jest

I am currently working on unit testing the process of updating meta content for a Vue & Quasar page by utilizing the useMeta component offered by Quasar. My approach to testing this involves creating a mock Vue component called UseMetaComponent, which is ...

javascriptvue.jsunit-testingjestjsquasar-framework