Having trouble changing the color of a sphere mesh in three.js when a button is pressed. When using mesh.material.color.SetHex() with a Click event listener, it doesn't work. However, it works fine when used outside the event listener. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="three.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="propertiesPanel">
<p>Properties Panel</p>
<p>Albedo Colour</p>
<input type="text" id="albedo">
<button id="btn">Change</button>
</div>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerWidth, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#4b4b4b");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
var geometry = new THREE.SphereGeometry(1, 20, 20);
var material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var btn = document.getElementById("btn");
btn.addEventListener("click", () => {
mesh.material.color.setHex( 0xc24a4a );
});
var light = new THREE.PointLight(0xFFFFFF, 1, 500);
light.position.set(10, 0, 25);
scene.add(light);
renderer.render(scene, camera);
</script>
</body>
</html>