如何在 ThreeJS 中更改着色器颜色答案

【问题标题】：How to change Shader color in ThreeJS如何在 ThreeJS 中更改着色器颜色
【发布时间】：2020-12-01 01:52:06
【问题描述】：

我是 Three Js 的新手，当我按下 html 页面上的按钮时，我不知道如何更改材质的颜色。你有什么建议吗？我会附上代码

这是我声明我的材料的方式：

  var color2= new THREE.Color(0xff0000)
  var customMaterial = new THREE.ShaderMaterial(
    {
      uniforms: {
        p: { type: "f", value: 2 },
        glowColor: { type: "c", value: color2 }, 
      },
      vertexShader: $('#vertexShader').text,
      fragmentShader: $('#fragmentShader').text,
      side: THREE.DoubleSide,
      blending: THREE.AdditiveBlending,   
      transparent: true,
      depthWrite: false
    });

这是我更新颜色的方法：

function render() {

renderer.render(scene, camera);
document.getElementById("colore").onclick= function(){
  console.log("prova caramella");
  var customMaterial = new THREE.ShaderMaterial(
    {
      uniforms: {
        p: { type: "f", value: 2 },
        glowColor: { type: "c", value: new THREE.Color(0x00ff00) }, 
      },
      vertexShader: $('#vertexShader').text,
      fragmentShader: $('#fragmentShader').text,
      side: THREE.DoubleSide,
      blending: THREE.AdditiveBlending,   
      transparent: true,
      depthWrite: false
    });
    customMaterial.needsUpdate = true

 }

最后这是我将材料链接到我的 3d 模型的方式：

function petali2(){
var loaderpetali = new THREE.ColladaLoader();
loaderpetali.load('petali3.dae', function (collada) {
petali = collada.scene;
petali.traverse( function ( child ) {
  if (child instanceof THREE.Mesh) {
    console.log(child);
    child.material = customMaterial; 

  }
} );

petali.scale.x = 2;
petali.scale.y = 2;
petali.scale.z = 2;
//flower = dae;
scene.add(petali);
});
}

【问题讨论】：

标签： javascript three.js 3d

【解决方案1】：

更新颜色时，这样做就足够了：

customMaterial.uniforms.glowColor.value.set( 0x00ff00 );

无需创建新材质。

此外，当使用最新版本的three.js 时，无需为制服定义类型。该类型自动从编译的着色器派生。在应用层面，这样做就足够了。

uniforms: {
    p: { value: 2 },
    glowColor: { value: new THREE.Color(0x00ff00) }, 
},

【讨论】：

感谢您的帮助！祝你有美好的一天:)