Chapter 10: Collisions

Hi,
I have a problem with the code and a question. My problem is that the avatar is still running through the trees. I compared my code with the one in the book and the console dosen´t show any mistakes, except for “Uncaught TypeError: Cannot read properties of undefined (reading ‘addEventListener’) at appcache.js:4:27”.
Could you help me to solve the issue with the avatar still running through the trees?
And my question is: what is appcache.js?

My code:
https://is.gd/vqxrUC

Hope you can help and thx in advance
Charly

You’re going to hate to learn the answer here :slight_smile:

There is just a little typo in the code. In the isColliding() function on line 165, we want to check the length of the list of intersecting objects:

  function isColliding() {
    var vector = new THREE.Vector3(0, -1, 0);
    var raycaster = new THREE.Raycaster(marker.position, vector);
    
    var intersects = raycaster.intersectObjects(notAllowed);
    if (intersects.lenght > 0) return true;
    
    return false;
  }

Instead of checking intersects.length, the code is checking intersects.lenght. If you fix just that, the collision detection will work.

For what it’s worth, I make that mistake constantly. To track down the issue, I put debugging lines in the code a various places. For instance, I put console.log('message') in the isColliding() function:

  function isColliding() {
    console.log('start isColliding')
    var vector = new THREE.Vector3(0, -1, 0);
    var raycaster = new THREE.Raycaster(marker.position, vector);
    
    var intersects = raycaster.intersectObjects(notAllowed);
    if (intersects.lenght > 0) return true;

    console.log('end isColliding')    
    return false;
  }

Once I had those lines in place, I could look in the JavaScript console to see that the start isColliding message was being reached, but the end isColliding message never showed – even when the avatar was in the middle of the tree. At that point I knew what code was causing the problem, then I looked closer and saw the typo.

Hope that helps. Nice work on the rest of the code!

-Chris

Hi Chris,
Thank you very much!! -> You were right I did hate the mistake :joy: :joy:
Eventhough you detected my “spelling strengths” (:joy:) there was another point I would be happy to understand. What is appcache.js?
Thanks again
Charly