Как изменить цвет фона в three.js с помощью dat.GUI?

Question

[zeni1agent]

у меня есть код

var option_default = function() {
this.colr_scene = '#C8C7C7';
};
var option_array = new option_default();  
var opt_none ;   
var gui = new dat.GUI({ autoPlace: false }); 
var action_colr_scene = gui.addColor(option_array_ise, 'colr_scene');

action_colr_scene.onChange(function(opt_none){renderer.setClearColor.color.setHex(opt_none.replace("#", "0x"));});

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor (0xC8C7C7 );

Проблема в том что у меня не как не получается изменить цвет в setClearColor
Я пробовал все возможные методы

При попытке изменить

var cotl2 = '0xC8C7C7' ;
	renderer.setClearColor (cotl2 );

цвет фона исчезает, становится по умолчанию

Ошибок не возникает только новое желтое окно
THREE.Color: Unknown color 0xC8C7C7

alert(renderer.setClearColor);
выдает мне

function(){
[][][]background.setClearColor.apply(background, arguments);
[][]}

кто не будь знает как изменить параметр color в setClearColor
Поскольку у меня кончаются идеи

Answer 1

[zeni1agent]

Я нашел вот такой вариант решения проблемы

action_colr_scene.onChange( function (opt_none) {
 scene.background.setHex(opt_none.replace("#", "0x"));  
} );
 scene.background = new THREE.Color(0xff00ff);

Answer 2

[Артем Андреев]

А цвет случайно не в hex'e надо указывать? #000000 - в таком формате

Comments

[zeni1agent]

Я уже пробовал так

action_colr_scene.onChange(function(opt_none){renderer.setClearColor.setHex = opt_none });

и так

action_colr_scene.onChange(function(opt_none){
	renderer.setClearColor (opt_none ); 
	});

и так

action_colr_scene.onChange(function(opt_none){renderer.setClearColor.color= opt_none });

но не помогло
Я просто не понимаю как узнать параметр к которому нужно обращаться для изменения значения

[Артем Андреев]

zeni1agent, пришли хекс цвета на который нужно поменять.

[zeni1agent]

мне нужно интерактивно поменять цвет именно для этого я и создал опцию colr_scene для dat.GUI которая принимает любой цвет какой только можно.

если бы мне надо было поменять на какой то определенный цвет то я просто бы измени значения в setClearColor (0xFFFFFF )

Answer 3

[Vitaliy]

Смотрите документацию. setClearColor может принимать только Color объект

Comments

[zeni1agent]

я уже пытался передать или получить renderer.setClearColor.color но это не работает

[Vitaliy]

zeni1agent, все работает: renderer.setClearColor(new THREE.Color(0x444400));

[zeni1agent]

И как мне получить значения цвета из?
renderer.setClearColor(new THREE.Color(0x444400));
поскольку значение
alert(renderer.setClearColor.Color );
нечего не находит

[Vitaliy]

zeni1agent, setClearColor это метод. С чего вдруг у него должно быть свойство Color ?

[zeni1agent]

Виталий Столяров,
если я напишу
renderer.setClearColor (0xC8C7C7 );
то цвет фона поменяется с черного на серый
если я напишу

cort.onChange(function(hos){directionalLight.color.setHex(hos.replace("#", "0x"));});
var directionalLight = new THREE.DirectionalLight (0xfff2e8, 0.8 );

то смогу меня цвет света на любой какой захочу
и следуя этой логике
В
renderer.setClearColor(new THREE.Color(0x444400));

Я должен обратится к renderer.setClearColor.Color где Color это свойство THREE.Color.

или как мне обратится к свойству
renderer.setClear.??? =0x444400;
что бы поменять цвет фона?

[Артем Андреев]

zeni1agent, может renderer.getClearColor().getHexString()?

[zeni1agent]

Артем Андреев, вроде бы я разобрался
Но теперь появилась новая проблема
для того что бы динамически редактировать фон мне нужно написать

action_colr_scene.onChange(function(opt_none){renderer.getClearColor().setHex(opt_none.replace("#", "0x"));});

setHex меняет цвет фона только вот я не могу изменить его динамически так как нужен onChange для этого
https://workshop.chromeexperiments.com/examples/gu...

var cotl =option_array_ise.colr_scene.replace("#", "0x") ; 
renderer.getClearColor().setHex(cotl)

а проблема в том что getClearColor не может находится в функций
Uncaught TypeError: renderer.getClearColor is not a function
а onChange работает только если функция есть
Uncaught TypeError: this.__onChange.call is not a function

[zeni1agent]

Артем Андреев,
я даже так пытался цвет выводится но не обновляется

var colt = new THREE.Color();
	var cotl =option_array_ise.colr_scene.replace("#", "0x") ; 
	colt.setHex(cotl)
	action_colr_scene.onChange(function(opt_none){colt.setHex(opt_none.replace("#", "0x"));});
	renderer.setClearColor(colt);