Safari Mobile - Crashing - Three JS textures not loading
I am trying to create a spherical panorama using THREE.js. It works fine on Safari Desktop, but crashes on Safari Mobile on iPAD. It has something to do with how I load the texture image.
Several things I've tried
- I am using Canvas Renderer
- Tried loading a smaller image.
- Tried loading 2 texture images.
- Tried loading a Sphere with a wireframe material - it works!
Here is my code. http://pastebin.com/1nwTMHJV
sceneHolder = document.getElementById( 'sceneHolder' );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 60, SCENE_WIDTH / SCENE_HEIGHT, 1, 10000 );
camera.position.z = 0;
scene.add( camera );
var sphereGeom = new THREE.SphereGeometry( 200, 20, 20 );
//NOTE: If we add {},function(){render()} in the following, it stops working!
var sphereTexture = THREE.ImageUtils.loadTexture('media/vr/testpot.jpg');
mesh = new THREE.Mesh(sphereGeom,new THREE.MeshBasicMaterial({map:sphereTexture,overdraw:true}));
//So that we see the inside of the sphere too!
mesh.doubleSided=true;
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( SCENE_WIDTH, SCENE_HEIGHT );
sceneHolder.appendChild( renderer.domElement );
Here is my post on THREE.js https://github.com/mrdoob/three.js/issues/1529
Also: https://github.com/mrdoob/three.js/issues/1550
Thanks smaira
+3
source to share
1 answer
I tried by reducing the number of faces that can run on iPad, but that's just ugly.
you may try:
var sphereGeom = new THREE.SphereGeometry( 200, 10, 10 );
and safari crashes during rendering
renderer.render( scene, camera );
Conclusion: If the texture of the image loads into a sphere with too many faces, the iPad will crash.
0
source to share