使用未定义的相机调用 WebGLRenderer.render

Question

我在 3D 应用程序中结合使用了 three.js 和 OrbitControls.js。有时WebGLRenderer.render 会被未定义的摄像头调用。当我使用 OrbitConrols 提供的控件使用鼠标导航 3D 模型时会发生这种情况。 未定义的相机参数很奇怪，因为我的animate 函数（见下面的代码）总是使用定义明确的相机调用WebGLRenderer.render。此外，在实例化 OrbitControls 时，我给它一个定义明确的相机。所以问题是 - WebGLRenderer.render 怎么会在某个时候被未定义的摄像头调用？

注意：WebGLRenderer.render函数的源代码可以在three.js源代码中的line 20426看到。

我试图通过搜索文本字符串render( 来定位所有潜在的呼叫站点。字符串 render( 上有 14 个这样的匹配项，但这些匹配项都没有给出未定义的相机作为参数。因此，这条小路很冷。

我尝试从被调用者（WebGLRenderer.renderfunction 的函数体）进行堆栈跟踪，但这只会导致返回到一些混合的事件中心。但它给了我一个提示，调用者可能是 Javascript 本身，从它的 DOM 事件系统调用。这就解释了为什么我在 three.js 源代码中找不到调用站点。

因此，问题可能与 OrbitControls 与 Javascript 事件系统交互的点有关。初始化我的应用程序时，我在 OrbitControls 实例上注册了一个事件。请参阅下面的代码。这会引起麻烦吗？发生这种情况时，没有相机作为参数给出：/

var myControls = require('../../instances/three/myControls');
var myRenderer = require('../../instances/three/myRenderer');

myControls.damping = 0.2;
myControls.domElement.addEventListener( 'change', myRenderer.render );

编辑： 我正在使用这些版本：

three.js 0.81.0
three-orbit-controls 72.0.0

Answer 1

所以，对render 的错误调用确实来自某个事件系统（Javascript DOM 事件系统）。该模块显示了 render 函数作为回调给事件侦听器的位置：

var myControls = require('../../instances/three/myControls');
var myRenderer = require('../../instances/three/myRenderer');

myControls.damping = 0.2;
myControls.addEventListener( 'change', myRenderer.render );

module.exports = {};

(myControls 模块如下所示：

var THREE = require('three');
var orbitControls = require('three-orbit-controls');
var myRenderer = require('../../instances/three/myRenderer');
var myCamera = require('./myCamera');
require('../../sideeffects/three/addCamera');

// add orbitControls to THREE:
var OrbitControls = orbitControls( THREE );

// make controls:
var controls = new OrbitControls( myCamera, myRenderer.domElement );

module.exports = controls;

)

但是，OrbitControls.js 似乎已更改为 OrbitControls 构造函数的实例不再是 DOM 元素。因此，一个不能在它们上注册事件，就像我对这条线所做的那样：

myControls.addEventListener( 'change', myRenderer.render );

相反，OrbitControls 构造函数的实例具有一个新属性：domElement，正如您可能已经猜到的那样，它确实是一个 DOM 元素。因此，我可以通过将事件附件的目标更改为myControls.domElement 来解决问题。因此，上面的行看起来像这样：

myControls.domElement.addEventListener( 'change', myRenderer.render );

这解决了问题:)

编辑： 事实证明，这行实际上可以完全省略！只有在没有动画循环时才需要（在每个循环步骤中调用requestAnimationFrame 的永久循环）

此外，可以通过以下方式启用阻尼：

myControls.enableDamping = true;

然后在动画循环的某处添加myControls.update();。