I have a goal in mind. When the first box is clicked, I want a second box to appear. Then, when the second box is clicked, I want the color of the original cube to change. I've managed to achieve the first step, but I'm unsure how to implement the last step. Below is 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>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
// Code for initializing the scene and objects
}
// Hover effect on cubes
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseMove(event) {
event.preventDefault();
// Code for handling mouse movement and interaction with cubes
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Code for animating the scene and objects
}
window.addEventListener("click", onMouseMove);
</script>
</body>
</html>