如何在 ThreeJS 中更改 Shader 颜色

Question

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

});

}

Answer 1

更新颜色时，这样做就足够了：customMaterial.uniforms.glowColor.value.set( 0x00ff00 );无需创建新材料。此外，当使用最新版本的 时three.js，没有必要定义制服的类型。该类型是从编译的着色器自动派生的。在应用程序级别上，这已经足够了。uniforms: {    p: { value: 2 },    glowColor: { value: new THREE.Color(0x00ff00) }, },