在 THREE.js 中获取全局“相机”变量的值时遇到问题答案

【问题标题】：Trouble getting the value of global 'camera' variable in THREE.js在 THREE.js 中获取全局“相机”变量的值时遇到问题
【发布时间】：2016-04-29 23:08:39
【问题描述】：

我的场景中包含一个 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 也没有区别:(

【问题讨论】：

标签： javascript camera three.js

【解决方案1】：

变量camAngle 超出milkyWay.onmousedown 的范围

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

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

var camAngle;

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

【讨论】：

嘿@user01！感谢你的回答。我知道范围和全局变量等。但是，在函数之外定义变量最终也会给我一个错误。我发现解决这个问题的方法是每次在函数中需要它时声明变量。这不太理想，但可以帮助我完成这项工作。为什么无法定义变量对我来说仍然很奇怪。
之所以有效，是因为 javascript 允许在比较中使用已声明但未定义的变量（camAngle 将一直存在，直到它设置在 mousedown 函数之外）。 someUndefinedVariable
好的，我现在明白了。非常感谢您帮助我澄清这一点。你帮了大忙！ :)