Threejs:我如何使用date .gui.min.js控件改变一个框的颜色

Question

当用户从HEX菜单中选择新颜色时，我试图使用UI控件来更新场景中框的颜色。

这是我的javascript代码:

// author: Arielle Mueller
// date: January 27th, 2021
// filename: 02-Arielle.js
//declare global variables
let scene, camera, renderer;
let box, sphere, orbitControl, control;
function init() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor( 0xe4cb98 );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function createCameraAndLights() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
scene.add(camera);
orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
//add some ambient light
scene.add( new THREE.AmbientLight( 0x333333));
let spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-10, 20, -5);
scene.add(spotlight);
}
function createGeometry() {
let axes = new THREE.AxesHelper(20);
scene.add(axes);
// create the ground plane
let planeGeometry = new THREE.PlaneBufferGeometry(60, 20);
let planeMaterial = new THREE.MeshLambertMaterial({ color: 0x55cc55 });
plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);
//create a cube
let geo = new THREE.BoxBufferGeometry(5, 5, 5);
let mat = new THREE.MeshLambertMaterial({ color: 0xcc5577});
box = new THREE.Mesh(geo, mat);
box.position.set(20, 4, 2);
scene.add(box);
}
function setupDatGui(){
//creating the object that will encapsulate 
//of the variable that we are interested in
let gui = new dat.GUI();
control = new function(){
this.name = "Controls";
this.height = 0;
this.speed = 0.01;
this.color = '#cc5577';
};
gui.add(control, 'name');
//create a sub-folder
let sub = gui.addFolder('Sub Folder');
sub.add(control, 'height').min(-8).max(10).step(0.25).name('Height of cube');
sub.add(control, 'speed').min(0).max(0.2).step(0.01);
sub.addColor(control, 'color').onFinishChange(function() { box.color.set = control.color});

}
function render() {
requestAnimationFrame(render);
orbitControl.update();
box.color = control.color;
box.position.y = control.height;
box.rotation.x += control.speed;
box.rotation.y += control.speed;
//scene.rotation.x += control.speed;
renderer.render(scene, camera);
}
window.onload = () => {
init();
createCameraAndLights();
createGeometry();
setupDatGui();
render();
} 

我最需要帮助的部分是处理render()和setupDatGui()的部分:

调整速度属性和高度属性的控件工作良好。我不确定如何以一种有效的方式访问color属性。

//creating the object that will encapsulate 
//of the variable that we are interested in
let gui = new dat.GUI();
control = new function(){
this.name = "Controls";
this.height = 0;
this.speed = 0.01;
this.color = '#cc5577';
};
gui.add(control, 'name');
//create a sub-folder
let sub = gui.addFolder('Sub Folder');
sub.add(control, 'height').min(-8).max(10).step(0.25).name('Height of cube');
sub.add(control, 'speed').min(0).max(0.2).step(0.01);
sub.addColor(control, 'color').onFinishChange(function() { box.color.set = control.color});

}
function render() {
requestAnimationFrame(render);
orbitControl.update();
box.color = control.color;
box.position.y = control.height;
box.rotation.x += control.speed;
box.rotation.y += control.speed;
//scene.rotation.x += control.speed;
renderer.render(scene, camera);
}

我试图改变材料的颜色，而不是从框访问。color属性。我还没能想出如何实现这个函数。我对box.position.y = control.height没有任何问题;行，这实际上改变了场景中框的高度。

我不确定需要做什么。

Answer 1

使用var解决了这个问题，然后添加box。colorChange到渲染函数

//creating the object that will encapsulate 
//of the variable that we are interested in
let gui = new dat.GUI();
control = new function(){
this.name = "Controls";
this.height = 0;
this.speed = 0.01;
this.color = '#cc5577';
};
gui.add(control, 'name');
//create a sub-folder
let sub = gui.addFolder('Sub Folder');
sub.add(control, 'height').min(-8).max(10).step(0.25).name('Height of cube');
sub.add(control, 'speed').min(0).max(0.2).step(0.01);
var colorChange = sub.addColor(control, 'color').onFinishChange((col) => { alert(`The color value is ${col}`);});
colorChange.onChange(function(colorValue){
colorValue = colorValue.replace('#', '0x');
box.material.color.setHex(colorValue);
});

}
function render() {
requestAnimationFrame(render);
orbitControl.update();
box.colorChange = control.color;
box.position.y = control.height;
box.rotation.x += control.speed;
box.rotation.y += control.speed;
//scene.rotation.x += control.speed;
renderer.render(scene, camera);
}