0

I have Bootstrap one-page template with a THREE.js scene in the middle as the background. Let's say its parent iframe has id="3D". The task is to skip animate() / render() functions while the iframe is offscreen.

See attached wireframe:

wireframe

I didn't find any clear solution on how to do this. Maybe something connected to the scrolling (mousewheel) event or maybe a method how to check if iframe is onscreen or not? The code should be inside THREE.js script if it's possible.

That's why a solution like http://jsfiddle.net/t2L274ty doesn't work.

Xander Luciano
  • 3,753
  • 7
  • 32
  • 53
VVK
  • 435
  • 2
  • 27

1 Answers1

0

There seems to be a way to check div position on screen based on scroll position: Is it possible to get the position of div within the browser viewport? Not within the document. Within the window

Test it out and see what Y values you'll get. Then you can call scene.render only when Y is in certain range. Don't break/return out of the animation loop when Y is out of range since it's recursive and won't resume if user scrolls the scene back in view.

SKolari
  • 1
  • 2