Изменить цвет three.line на кнопку click three.js

Question

Я новичок в Three.js, я пытался изменить цвет линии, когда нажата кнопка, которую я создал с использованием основного материала, но цвет линии не изменяется.

мой код

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

Этот сценарий только INIT материал на сцену, если вы хотите изменить материал в живой сцене, вы должны установить материал снова.

Просто позвоните OnClick функцией

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

Answer 2

Не знаю, правильно ли это или неправильно, но я получил результат, просто добавив имя в строке (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

найти здесь на примере ссылку Change color

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

Если пример не ясно, пожалуйста, ша введите свой код в jsfiddle, чтобы я мог вам помочь.