I have this code

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

The problem is that I don’t seem to be able to change the color in setClearColor I have already tried a bunch of different ways

  №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);

But nothing helps anyone who doesn’t know how to change the color parameter in setClearColor.

  • one
    The background color can also be changed using scene.background = new THREE.Color(0xff00ff); . - prisoner849

1 answer 1

dat.GUI() fully understands the hex values ​​of colors.

That is, you can create a color object with the value property in the form of a hex value for the color and everything will work fine:

 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>

Option with 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>

  • @ zeni1agent Pure out of curiosity: helped? :) - prisoner849