1

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

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 Поскольку у меня кончаются идеи

1
  • 1
    Цвет фона так же можно изменить с помощью scene.background = new THREE.Color(0xff00ff);. 1 янв 2019 в 15:06

1 ответ 1

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>

1
  • @zeni1agent Чисто из любопытства: помогло? :) 1 янв 2019 в 21:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.