javascript - 在 THREE.js 中获取全局 'camera' 变量的值时遇到问题

Question

我的场景中包含一个 THREE.js 相机对象，如下所示:

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.z = 6;
camera.position.y = 6;

效果很好。

我试图在用户与场景交互时实时获取camera.position.y属性。

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);
}

上面的函数按预期工作，每次鼠标按下并在场景中移动时，都会将camera.position.y的值打印到控制台日志中。我遇到的问题是，当我在“if”条件中引用 camAngle 变量时，控制台日志会抛出一条错误，指出无法找到 camAngle。

什么给了？我已经尝试解决这个问题很长时间了，但我却感到沮丧。我需要camera.position.y的值来让其他东西出现在DOM上供用户交互。更改为 window.camera.position.y 也没有什么区别:(

Answer 1

变量camAngle超出了milkyWay.onmousedown的范围

这是标准的 javascript 概念，您可以通过搜索类似 this one 的帖子来了解它。 .

这里最简单的解决方案是将camAngle提升到全局范围。只要有:

var camAngle;

位于脚本顶部，并且不要在函数中重新声明它。