CODEWITHSUNDEEP
javascriptipadthree.js
John Sly
John Sly

Reputation: 769

three.js not rendering correctly on iPad Air 2

I've just started using an iPad Air 2 for work and wanted to start working with equirectangular panoramas. These work great on the desktop, but an iPad/iPhone add some cool options to start using device orientation as the controls.

When I pulled up my script on the iPad, it looks extremely poorly rendered. I can tell what things are, but only because I'm familiar with this photo. I'm really not sure what's causing this issue. As far as I can tell, this looks to be local to the iPad. I've tested that WebGL is available, and that's always passed with flying colors.

In my code, I'm trying to create a sphere and used the photo as the mesh. Like I said, it works on the desktop, just not the iPad. I've been looking around but haven't been able to find any real solutions or very comparable issues being reported. I'm completely stuck on this one.

Here's the sample link: http://www.freeptools.com/mapster/360/2/

Upvotes: 0

Views: 779

Answers (1)

WestLangley
WestLangley

Reputation: 104783

You need to resize your image to be a power-of-two. For example, 2048 x 1024.

I would suggest updating to the current version of three.js, and make sure your handle device pixel ratio correctly.

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

For a panorama example, see this three.js demo: http://threejs.org/examples/misc_controls_deviceorientation.html.

three.js r.70

Upvotes: 2

Related Questions