設置顏色的一個對象在三個JS與dat.GUI選擇顏色

Question

如何設置dat.gui顏色在一個對象中的三個JS

我想選擇與對話的顏色有些像Box 3 in this example

如何做到這一點？

Answer 1

我提出以下功能：使得以選配顏色

function cambiarColor(obj) 
{ 
    var gui = new dat.GUI(); 


    var Configuracion=function(){ 
      this.color = "#ffae23"; 
    } 
    var conf = new Configuracion(); 

    var controlador = gui.addColor(conf, 'color'); 
    controlador.onChange(function(colorValue ) 
    { 
     //the return value by the chooser is like as: #ffff so 
     //remove the # and replace by 0x 
     colorValue=colorValue.replace('#','0x'); 
     //create a Color 
     var colorObject = new THREE.Color(colorValue) ; 
     //set the color in the object 
     obj.material.color = colorObject; 
    }); 
} 

Answer 2

是不是這個例子http://jaanga.github.com/blode/#jaanga.github.com/Blode/DAT.GUI-User-Controls不夠好？

Answer 3

有沒有必要做一個「新Three.Color」改變顏色。我不確定這是甚麼事情。嘗試下面的代碼。它爲我工作。

function cambiarColor(obj) 
{ 
    var gui = new dat.GUI(); 


var Configuracion=function(){ 
     this.color = "#ffae23"; 
} 
    var conf = new Configuracion(); 

    var controlador = gui.addColor(conf, 'color'); 
    controlador.onChange(function(colorValue ) 
    { 
     //the return value by the chooser is like as: #ffff so 
     //remove the # and replace by 0x 
     colorValue=colorValue.replace('#','0x'); 
     //set the color in the object 
     obj.material.color.setHex(colorValue); 
    }); 
} 

Answer 4

實施three.js所色彩或色彩均勻，以dat.gui一個簡單的方法：

dat.GUI.prototype.addThreeColor=function(obj,varName){ 
    // threejs & dat.gui have color incompatible formats so we use a dummy data as target : 
    var dummy={}; 
    // set dummy initial value : 
    dummy[varName]=obj[varName].getStyle(); 
    return this.addColor(dummy,varName) 
     .onChange(function(colorValue ){ 
      //set color from result : 
      obj[varName].setStyle(colorValue); 
     }); 
}; 
dat.GUI.prototype.addThreeUniformColor=function(material,uniformName,label){ 
    return this.addThreeColor(material.uniforms[uniformName],"value").name(label||uniformName); 
};