我是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);
});
}
更新颜色时,只需执行以下操作:
customMaterial.uniforms.glowColor.value.set( 0x00ff00 );
无需创建新材料。
此外,当使用最新版本的时three.js
,无需定义制服的类型。类型是从编译的着色器自动派生的。在应用程序级别上,就足够了。
uniforms: {
p: { value: 2 },
glowColor: { value: new THREE.Color(0x00ff00) },
},
谢谢您的帮助,它奏效了!!祝你今天过得愉快 :)