I have a camera object from THREE.js set up in my scene like this:
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.z = 6;
camera.position.y = 6;
It's working perfectly.
Now I'm trying to constantly access the camera.position.y property as the user interacts with the scene.
var milkyWay = document.getElementById("chap3content");
var trackAngle = function() {
var camAngle = window.camera.position.y;
console.log(camAngle);
return camAngle;
}
milkyWay.onmousedown = function() {
console.log("mouse pressed");
document.addEventListener("mousemove", trackAngle);
if (camAngle <= 0.25) {
console.log("SHOW ME THE MONEY");
}
}
milkyWay.onmouseup = function() {
console.log("mouse released");
document.removeEventListener("mousemove", trackAngle);
}
The function above is functioning correctly and logs the value of camera.position.y every time the mouse moves over the scene while clicked. However, when I attempt to use the camAngle variable in an 'if' statement, the console throws an error saying it can't be found.
What could be causing this issue? I've spent a lot of time trying to solve it and am feeling frustrated. I need to display something on the DOM for the user based on the value of camera.position.y. Even referencing window.camera.position.y doesn't make a difference :(