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

139

17 июля 2019, 15:40

у меня есть вот такой код

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 Я уже пробовал кучу разных способов

 №1
  action_colr_scene.onChange(function(opt_none){renderer.setClearColor.color.setHex(opt_none.replace("#", "0x"));});
 №2
  action_colr_scene.onChange(function(opt_none){renderer.setClearColor.setHex(opt_none.replace("#", "0x"));});
 №3
 renderer.setClearColor(new THREE.Color(0x444400));
 action_colr_scene.onChange(function(opt_none){renderer.getClearColor().setHex(opt_none.replace("#", "0x"));});
 №4
 renderer.setClearColor(new THREE.Color(0x444400));
 var cotl =option_array_ise.colr_scene.replace("#", "0x") ; 
 renderer.getClearColor().setHex(cotl)
 №5
  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);

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

Answer 1

dat.GUI() вполне понимает hex-значения цветов.

То есть, можно создать объект color со свойством value в виде hex-значения для цвета и все будет прекрасно работать:

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); 
camera.position.set(0, 0, 5); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
 
var box = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshNormalMaterial()); 
scene.add(box); 
 
var color = { 
  value: 0x000000 
} 
 
var gui = new dat.GUI(); 
gui.addColor(color, "value").name("background").onChange((value) => { 
  renderer.setClearColor(value); 
}); 
 
var clock = new THREE.Clock(); 
var time = 0; 
 
renderer.setAnimationLoop(() => { 
  time = clock.getElapsedTime(); 
  box.rotation.y = time * 0.251; 
  box.rotation.x = time * 0.314; 
  renderer.render(scene, camera); 
});

body { 
  overflow: hidden; 
  margin: 0; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>

Вариант с scene.background:

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); 
camera.position.set(0, 0, 5); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
 
var box = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshNormalMaterial()); 
scene.add(box); 
 
var c = new THREE.Color(0x000000); // задаем цвет 
var color = { 
  value: c.getHex() // получаем hex-здначение цвета и записываем его в объект 
} 
 
scene.background = c; // устанавливаем фон равным цвету 
 
var gui = new dat.GUI(); 
gui.addColor(color, "value").name("background").onChange((value) => { 
  c.set(value); // меняем значение заданного цвета 
}); 
 
var clock = new THREE.Clock(); 
var time = 0; 
 
renderer.setAnimationLoop(() => { 
  time = clock.getElapsedTime(); 
  box.rotation.y = time * 0.251; 
  box.rotation.x = time * 0.314; 
  renderer.render(scene, camera); 
});

body { 
  overflow: hidden; 
  margin: 0; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>