无法在 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 概念，您可以通过搜索 post 来了解，例如 this one。

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

var camAngle;

在脚本的顶部，不要在函数中重新声明它。

无法在 THREE.js 中获取全局 'camera' 变量的值

Trouble getting the value of global 'camera' variable in THREE.js

javascript

camera

three.js