Change the color of three.line on button click three.js

Question

I am new to Three.js, I have been trying to change the color of the line when a button is clicked which I have created using line basic material, but the color of the line is not getting changed.

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 am using webGlRenderer with Trackball controls and my version is r66. Is there anyway to do this. I have been trying to find a solution to fix this. Please any help will be helpful.

Thanks in advance

what you trying to do? trying to change material or material color on clicking the button? — Iam Coder
– Iam Coder, Commented Apr 20, 2015 at 18:21
Material color i.e color of the line which I have created for highlighting the path — Rohit
– Rohit, Commented Apr 21, 2015 at 4:00

Martin · Accepted Answer · 2015-04-19 08:05:09Z

4

This script only init material to the scene, if you want to change material in live scene, you must set material again.

Just call onclick by function

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

answered Apr 19, 2015 at 8:05

Martin

2,6816 gold badges35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Martin Over a year ago

Can you post JS fiddle? there will be problem in another part.

Rohit Over a year ago

Sorry Martin, actually your code changed the entire line objects that I have created in my page, but I need to change the color of the particular line object when a object associated with line is clicked. Hence I created a line name for each line object I have created and highlighted the line by using those name, I acheived this by using var line = scene.getObjectByName(linename); and followed by your code.Thank you for your suggestion. Is that clear? Martin

Martin Over a year ago

This is possible solution, but have in mind, in each cycle scene.getObjectByName must list all items in scene, if you have animation, it is 40-60 per sec. But better solution depends on construction of your aplication.

Rohit Over a year ago

Martin, what is the best approach for getting the better solution that you are refering? thank you in advance

Martin Over a year ago

It depends on chain of events causing needs of color switching. I understand you know which lines is associated in which objects before you load the scene. If you changing lines in some visual connection with object, in initialization of this object make connection first. Best will be associate line into parent object and call not a line by name but child line of affected object. Or you can find another approach how to simple identify lines instead of searching all object again and again. And more solutions much simply for code handling ...

|

Iam Coder · Accepted Answer · 2015-04-21 16:48:20Z

2

here find the example link Change color

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

If the example is not clear please share your code in jsfiddle so that i can help you.

answered Apr 21, 2015 at 16:48

Iam Coder

1,0059 silver badges23 bronze badges

3 Comments

Rohit Over a year ago

Example is so clear.Thank you for sharing the answer.Similar thing I have executed in my code, problem is am having multiple number of line and want to highlight particular lines associated with the object when a click is made on the object.So I named each line and achieved the result by executing the code which I shared above. is there anything wrong in my code? Thank you so much user2089677

Iam Coder Over a year ago

Are you trying to change color of the line by clicking the line object(i.e. intersected line with the mouse pointer)

Rohit Over a year ago

No, I have connected the multiple objects(like cube,cylinder) with line objects. When I click on the objects, by then I need to change colour of the line associated with that object.Is that clear? user2089677

Rohit · Accepted Answer · 2015-04-20 08:00:33Z

Don't know whether it is correct or wrong, but I got the result by just adding 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);

Collectives™ on Stack Overflow

Change the color of three.line on button click three.js

3 Answers 3

6 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Related