Hype + Three.js on safari iPad give strange motion

Hi all !

it’s been a long time. i still use Hype for many differents projects. Actually I play around with 3D with the Three.js library.
All goes well except on the iPad, and iPhone, I guess.
Here is a try I put online :

If you open this link on a mac, no pb, but on the iPad the 3D object moves by themselves and get off the camera view.
I Guess this comes from iOS safari but I take my chance, I would like this to work on mobile too.

I have some suspicious on this : document.body.appendChild(renderer.domElement);
Maybe it has some kind of confusion between the hype’s container and the iframes where the 3D code is written.

any help is welcome


I’m not sure if this is the solution, but I did find:

1 Like

Thanks a lot jonathan ! This did not work, but I now know where to search.
I don’t know why this solution doesn’t work as it works on the Three.js example page.
My iframe is well detected, I can get its width and height.

So now I will try to load my iframe without hype and see if it works

I’m also a bit puzzled by this behavior; my guess is that it might be a timing issue in figuring out the proper viewport size. I did some experiments to try to reproduce the behavior with just an iframe (not even using Hype), but for some reason the contents did not display the 3D element, and I hit a bit of a dead end. I’d definitely see if you can trigger this behavior without Hype (to eliminate that as a variable). If you have an iframe case that works feel free to send it along as I’m curious about this.

here is a link to a simple iFrame viewer :

here is the code to load the iframe :
iframe id=“myIframe” width=680 height=905 src=“http://dmontoro.free.fr/codes/BIB10L/BIB10L.hyperesources/BIB10LmerlotPB.html”>

you can grab the source code for each in your browser because here it lods the iframe in the message.

Well it’s still not working even with a single iframe. i will check that later.
Thanks for you interest, I really apreciate

ok found the solution !

I started my iframe code with :
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

because of a resize function when the iframe is resized

I replace these 2 lines by
var WIDTH = 680;
var HEIGHT = 905;

i commented var winResize = new THREEx.WindowResize(renderer, camera);

and now it’s working.
Even without the code that set the scrolling to “no”

so I guess I won’t be able to make a responsive app or website like this, but I can definitvely make an iPad version with a different location. I will see later

Anyway thanks for the help

I can leave the
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

just of course erase or comment the resize function

Ah, glad you figured it out!

Thanks again, as usual you and your team are always here to Help.
Your work on hype is amazing, keep going on !