亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 ThreeJS 中更改 Shader 顏色

如何在 ThreeJS 中更改 Shader 顏色

蠱毒傳說 2023-09-21 16:20:52
我是 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);});}
查看完整描述

1 回答

?
慕妹3242003

TA貢獻1824條經驗 獲得超6個贊

更新顏色時,這樣做就足夠了:


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

無需創建新材料。


此外,當使用最新版本的 時three.js,沒有必要定義制服的類型。該類型是從編譯的著色器自動派生的。在應用程序級別上,這已經足夠了。


uniforms: {

    p: { value: 2 },

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

},


查看完整回答
反對 回復 2023-09-21
  • 1 回答
  • 0 關注
  • 108 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號