Hype + Three.js on safari iPad give strange motion

Using JavaScript with Hype
1

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 :
http://dmontoro.free.fr/codes/BIB10L/BIB10L.html

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

thanks

2

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

1 Like
3

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

4

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.

5

here is a link to a simple iFrame viewer :
http://dmontoro.free.fr/codes/BIB10L/justIframe.html

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

6

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

7

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

just of course erase or comment the resize function

8

Ah, glad you figured it out!

9

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

2 Likes