title: Raycast an object to enbable a mouse click event with Three.js
body: <p>I'm adding objects to a scene for each entry in a database. I had a cube appearing in the scene for entry, but when I tried to add raycasting to click on objects it doesnt work, the objects dont appear and the console reads "Expression unavailable".. I got parts of the code from the three.js website for Raycasting so not sure what I'm doing wrong. </p>
  
  <p>Here is the JS code: </p>
  
  <pre><code>var renderer, scene, container, camera;
  var geometry, material;
  var controls, group;
  
  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();
  
  
  init()
  
  function onMouseMove( event ) {
  
      // calculate mouse position in normalized device coordinates
      // (-1 to +1) for both components
  
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
  }
  
  function init() {
      // init renderer
      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      // document.body.appendChild( renderer.domElement );
  
      container = document.getElementById('container');
      container.appendChild( renderer.domElement );
  
      // init scene
      scene = new THREE.Scene();
      scene.background = new THREE.Color( 0xffffff );
  
      group = new THREE.Group();
      scene.add( group )
  
      //fetch data from database and add object for each entry
      getData()
      async function getData() {
          var response = await fetch('/api/indexvr');
          var data = await response.json();
          console.log(data) 
  
          for (var i=0; i&lt;data.length; i++) {
              cube = new THREE.Mesh( geometry, material );
              cube.position.x = i;
              scene.add(cube);
              //group.add(data)
          }
      }
  
      // init camera
      camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
      camera.position.set( 15, 15, 15 ); //camera.position.set( 5, 0, 10 );
      camera.lookAt( scene.position );
      // controls = new OrbitControls( camera, renderer.domElement );
      // controls.enableRotate = true;
  }
  
  function render() {
  
      // update the picking ray with the camera and mouse position
      raycaster.setFromCamera( mouse, camera );
  
      // calculate objects intersecting the picking ray
      var intersects = raycaster.intersectObjects( scene.children );
  
      for ( var i = 0; i &lt; intersects.length; i++ ) {
  
          intersects[ i ].object.material.color.set( 0xff0000 );
  
      }
  
      renderer.render( scene, camera );
  
  }
  
  window.addEventListener( 'mousemove', onMouseMove, false );
  
  window.requestAnimationFrame(render);
  </code></pre>
  
  <p>The HTML just has a div called "container" and this tag: </p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>It doesn't produce any error it only says this in the console:
   <a href="https://i.stack.imgur.com/zzBcF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zzBcF.png" alt="enter image description here"></a></p>
  
  <p>So it is fetching the data but can't render the scene</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var renderer, scene, container, camera;
  var geometry, material;
  var controls, group;
  
  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();
  
  
  init()
  
  function onMouseMove(event) {
  
    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components
  
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  }
  
  function init() {
    // init renderer
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // document.body.appendChild( renderer.domElement );
  
    container = document.getElementById('container');
    container.appendChild(renderer.domElement);
  
    // init scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
  
  
    group = new THREE.Group();
    scene.add(group)
  
    //fetch data from database and add object for each entry
    getData()
    async function getData() {
      /**
       * @author TheJim01
       * Replacing DB call with fake data to make it work here.
       * Nancy: Please feel free to add appropriate data.
       */
      // var response = await fetch('/api/indexvr');
      // var data = await response.json();
      var data = [{}, {}, {}, {}, {}]
      console.log(data)
  
      for (var i = 0; i &lt; data.length; i++) {
        cube = new THREE.Mesh(geometry, material);
        cube.position.x = i;
        scene.add(cube);
        //group.add(data)
      }
    }
  
    // init camera
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(15, 15, 15); //camera.position.set( 5, 0, 10 );
    camera.lookAt(scene.position);
    // controls = new OrbitControls( camera, renderer.domElement );
    // controls.enableRotate = true;
  }
  
  function render() {
  
    // update the picking ray with the camera and mouse position
    raycaster.setFromCamera(mouse, camera);
  
    // calculate objects intersecting the picking ray
    var intersects = raycaster.intersectObjects(scene.children);
  
    for (var i = 0; i &lt; intersects.length; i++) {
  
      intersects[i].object.material.color.set(0xff0000);
  
    }
  
    renderer.render(scene, camera);
  
  }
  
  window.addEventListener('mousemove', onMouseMove, false);
  
  window.requestAnimationFrame(render);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//threejs.org/build/three.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/spritejs/dist/spritejs.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>