javascript - Safari Mobile - 崩溃 - 三个 JS 纹理未加载

Question

我正在尝试使用 THREE.js 创建球形全景图。它在 Safari 桌面版上运行良好，但在 iPAD 上的 Safari 移动版上崩溃。这与我加载纹理图像的方式有关。

我尝试过的一些事情

1. 我正在使用 Canvas 渲染器
2. 尝试加载较小尺寸的图像。
3. 尝试加载 2 的幂纹理图像。
4. 尝试使用线框 Material 加载球体 - 成功了!

这是我的代码。 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 );

这是我在 THREE.js 上的帖子 https://github.com/mrdoob/three.js/issues/1529

另外:https://github.com/mrdoob/three.js/issues/1550

谢谢斯迈拉

Answer 1

我尝试过，减少在 iPad 上运行的面数，但它很丑。

你可以尝试:

var sphereGeom = new THREE.SphereGeometry( 200, 10, 10 );

渲染时 safari 崩溃

renderer.render( scene, camera );

结论:如果将图像纹理加载到具有太多面的球体，iPad 将崩溃