I want to enhance the user experience by allowing them to choose a color from the HEX menu and update the color of the box in the scene using UI controls.
Below is the JavaScript code I have implemented for this purpose:
// 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();
}
I need some guidance specifically on the render() and setupDatGui() sections:
The controls for adjusting the speed and height attributes are functioning properly. However, I am unsure about how to effectively access and update the color attribute.
//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);
}
I have attempted to modify the material color instead of directly accessing the .color attribute of the box. However, I am facing challenges in implementing this functionality. The line box.position.y = control.height; works as expected in changing the height of the box.
I am seeking advice on how to proceed with updating the color attribute effectively.