définir la couleur l'un objet en trois js avec dat.GUI choisir la couleur

Question

Comment définir une couleur avec dat.gui dans un objet Trois js

Je veux choisir la couleur avec la boîte de dialogue certains comme Box 3 in this example

Comment faire cela?

Answer 1

Je fais la fonction suivante pour changer la couleur avec une couleur chooser

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

Cet exemple n'est-il pas http://jaanga.github.com/blode/#jaanga.github.com/Blode/DAT.GUI-User-Controls assez bon?

Answer 3

Il n'y a pas besoin de faire une « nouvelle Three.Color ». Je ne suis pas sûr que ce soit une chose. Essayez le code ci-dessous. Cela a fonctionné pour moi.

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

Une façon simple de mettre en œuvre Three.js couleurs ou des couleurs uniformes pour 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); 
};