You’re going to hate to learn the answer here
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