установить цвет экрана на один объект в три JS с dat.GUI выбрать цвет

Question

Как установить цвет с dat.gui в одном объекте Три JS

Я хочу выбрать цвет с помощью диалога некоторые, как Box 3 in this example

Как это сделать?

Answer 1

Я делаю следующие функции для изменения цвета с 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

Не этот пример 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); 
};