如何在 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) }, 

},