title: THREE.js - clickable interactive objects.Click on a cube and then appear second cube and i want to make the last cube clickable
body: <p><a href="https://i.stack.imgur.com/jh5Wk.png" rel="nofollow noreferrer">this is what i want to do</a>.Once you click on the box then i want to appear a second box and when i click on the second box i want the color from the first cube to change.I manage to make the first step but i don't know how to implement the last step, to click on the second cube and then change the color of my original.Here is my code...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
          &lt;title&gt;Document&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/main.css" /&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
            var camera, scene, renderer;
            var geometry, material, mesh;
  
            init();
            animate();
  
            function init() {
              camera = new THREE.PerspectiveCamera(
                75,
                window.innerWidth / window.innerHeight,
                0.01,
                1000
              );
              camera.position.z = 2;
  
              scene = new THREE.Scene();
  
              geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
              material = new THREE.MeshLambertMaterial({ color: 0x2c9b73 });
  
              mesh = new THREE.Mesh(geometry, material);
              mesh.rotation.set(45, 0, 0);
              scene.add(mesh);
  
              var light = new THREE.PointLight(0xffffff, 1, 100);
              light.position.set(10, 10, 10);
              scene.add(light);
  
              renderer = new THREE.WebGLRenderer({ antialias: true });
              renderer.setClearColor("#e5e5e5");
              renderer.setSize(window.innerWidth, window.innerHeight);
              document.body.appendChild(renderer.domElement);
              window.addEventListener("resize", () =&gt; {
                renderer.setSize(window.innerWidth, window.innerHeight);
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
              });
            }
            var raycaster = new THREE.Raycaster();
            var mouse = new THREE.Vector2();
            function onMouseMove(event) {
              event.preventDefault();
              mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
              mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
              raycaster.setFromCamera(mouse, camera);
              var intersects = raycaster.intersectObjects(scene.children, true);
              for (var i = 0; i &lt; intersects.length; i++) {
                var geometry1 = new THREE.BoxGeometry(0.5, 0.5, 0.5);
                var material1 = new THREE.MeshLambertMaterial({ color: 0xce2121 });
                var mesh1 = new THREE.Mesh(geometry1, material1);
                mesh1.position.y = 1;
                scene.add(mesh1);
              }
            }
  
            function animate() {
              requestAnimationFrame(animate);
  
              mesh.rotation.x += 0.01;
              //mesh.rotation.y += 0.02;
  
              renderer.render(scene, camera);
            }
  
            window.addEventListener("click", onMouseMove);
          &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>