单击按钮 three.js 更改 three.line 的颜色

Question

我是 Three.js 的新手，我一直在尝试在单击我使用 line basic material 创建的按钮时更改线条的颜色，但是线条的颜色没有改变。

我的代码

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);

我正在使用带有轨迹球控件的 webGlRenderer，我的版本是 r66。有没有办法做到这一点。我一直在努力寻找解决这个问题的方法。请任何帮助都会有所帮助。

提前致谢

Answer 1

此脚本只初始化material场景，如果要在现场场景中更改material，必须重新设置material。

按函数调用onclick即可

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

Answer 2

不知道对不对，我只是在一行中加了个名字得到的结果(line.name = "line name")和

    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);

Answer 3

这里找例子linkChange color

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

如果示例不清楚，请在 jsfiddle 中分享您的代码，以便我可以帮助您。

单击按钮 three.js 更改 three.line 的颜色

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

javascript

three.js