Question

如何在一个对象中设置dat.gui的颜色为三个

我想用对话框选择颜色，如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

没有必要制作“new 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 3

将 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);
};

Answer 4

这个例子http://jaanga.github.com/blode/#jaanga.github.com/Blode/DAT.GUI-User-Controls不够好吗？

Answer 5

没有多余对象的简化版本：

var gui = new dat.GUI();

var conf = { color : '#ffae23' };    
gui.addColor(conf, 'color').onChange( function(colorValue) {
    obj.material.color.set(colorValue);
});

用dat.GUI选择颜色设置三个js中的一个对象的颜色

5 个答案: