Javascript 在Three.js中设置动画时，将三维模型保持在可见区域内

我从three.js开始尝试随机移动一个对象。但我面临一个问题，即检测我的3d模型何时移动到场景可见区域之外。 我不希望三维模型移动到场景之外。当我记录三维模型和window.innerwidth的位置时，我发现即使模型位于可见区域的拐角处，它们之间也存在巨大的差异。有人能帮我吗

另外，如果有任何关于如何实现3d对象随机移动这一更大目标的建议，请分享

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
setClearColor（0xff0000.5）；
document.body.appendChild（renderer.doElement）；
var geometry=new THREE.BoxGeometry（）；
var材料=新的三网格基本材料({
颜色：0x00ff00
});
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
设pos=new-THREE.Vector3（）；
pos=pos.setFromMatrixPosition（cube.matrixWorld）；
位置项目（摄像机）；
设widthHalf=window.innerWidth/2；
let heightHalf=窗内高度/2；
位置x=（位置x*宽度一半）+宽度一半；
位置y=-（位置y*高度一半）+高度一半；
位置z=0；
var numFlag=0，
数值=0.01；
函数animate（）{
请求动画帧（动画）；
第一象限（）；
渲染器。渲染（场景、摄影机）；
}
制作动画（）；
函数firstQuadrant（）{
如果（numFlag<300）{
cube.position.x+=值；
cube.position.y+=值；
}否则{
cube.position.x-=值；
cube.position.y-=值；
}
console.log（cube.position.x，window.innerHeight，pos.x）；
numFlag=numFlag>600？0:numFlag+1；
}

正文{
保证金：0；
}
帆布{
显示：块；
}

以下几点可能对您有所帮助。控制台日志正在记录多维数据集的X位置（Y向上）。window.innerHeight与您期望的坐标不匹配。你有屏幕值和3d世界坐标。你还应该记住，世界位置0，0，0在屏幕的中间，所以窗口内高度需要减半以接近你所期望的。看看这个链接，它可以帮助你实现你的目标-谢谢你的回复@danlong，我得到的pos.x值为NaN。我哪里出错了？你能把代码块添加到你的原始示例中，这样我就可以看到它的整体吗？@danlong我添加了它。好的，我明白了。我想你可能需要一种不同的方法。看看这个线程——它有一个有用的代码示例，其中将在窗口大小内创建一个平面。一旦你有了它，你就知道了立方体可以在其中移动的边界框。在边界框内选择一个随机坐标，并将其插入到该位置可能更容易。您拥有的

firstQuadrant

功能可能会限制“随机”移动。以下几点可能会对您有所帮助。控制台日志正在记录多维数据集的X位置（Y向上）。window.innerHeight与您期望的坐标不匹配。你有屏幕值和3d世界坐标。你还应该记住，世界位置0，0，0在屏幕的中间，所以窗口内高度需要减半以接近你所期望的。看看这个链接，它可以帮助你实现你的目标-谢谢你的回复@danlong，我得到的pos.x值为NaN。我哪里出错了？你能把代码块添加到你的原始示例中，这样我就可以看到它的整体吗？@danlong我添加了它。好的，我明白了。我想你可能需要一种不同的方法。看看这个线程——它有一个有用的代码示例，其中将在窗口大小内创建一个平面。一旦你有了它，你就知道了立方体可以在其中移动的边界框。在边界框内选择一个随机坐标，并将其插入到该位置可能更容易。您拥有的

firstQuadrant

功能可能会限制“随机”移动。