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.

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!
scene.add( mesh );

renderer = new THREE.CanvasRenderer();
renderer.setSize(  SCENE_WIDTH, SCENE_HEIGHT );
sceneHolder.appendChild( renderer.domElement );


Here is my post on THREE.js


Thanks smaira


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.



All Articles