当父IFRAME在屏幕外时，THREE.JS停止animate（）函数

Question

我有一个Bootstrap单页模板，中间有一个THREE.js场景作为背景。假设其父iframe有id="3D"。任务是 当animate()在屏幕外时，请跳过render() / iframe个功能。

参见附件线框：

我没有找到任何关于如何做到这一点的明确解决方案。也许某些东西与滚动（鼠标滚轮）事件有关，或者可能是一种如何检查iframe是否在屏幕上的方法？如果可能的话，代码应该在THREE.js脚本中。

这就是像http://jsfiddle.net/t2L274ty这样的解决方案不起作用的原因。

Answer 1

似乎有一种方法可以根据滚动位置检查屏幕上的div位置： Is it possible to get the position of div within the browser viewport? Not within the document. Within the window

测试一下，看看你会得到什么Y值。然后只有当Y在某个范围内时才能调用scene.render。当Y超出范围时，不要中断/退出动画循环，因为它是递归的，并且如果用户在视图中向后滚动场景，则不会恢复。