Javascript 如何在ThreeJS中更改着色器颜色
我是三个Js新手,当我按下html页面上的按钮时,我不知道如何更改我的材质的颜色。 你有什么建议吗?我把代码附在这里 以下是我如何申报我的材料:Javascript 如何在ThreeJS中更改着色器颜色,javascript,three.js,3d,Javascript,Three.js,3d,我是三个Js新手,当我按下html页面上的按钮时,我不知道如何更改我的材质的颜色。 你有什么建议吗?我把代码附在这里 以下是我如何申报我的材料: var color2= new THREE.Color(0xff0000) var customMaterial = new THREE.ShaderMaterial( { uniforms: { p: { type: "f", value: 2 }, glowColor:
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
时,不需要为统一的文件定义类型。该类型自动从编译的着色器派生。在应用程序级别上,这就足够了
制服:{
p:{value:2},
glowColor:{value:new THREE.Color(0x00ff00)},
},
感谢您的帮助,它成功了!!祝你今天愉快:)