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 you have read our privacy policy.

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