I am currently working on a three.js website where I load a json file using ObjectLoader.
Everything works perfectly on all platforms: Windows with all desktop browsers, and Android phones with all browsers. However, IOS (specifically iPad Air) is causing issues with all browsers (Chrome, Safari, Mercury), leading to frequent crashes.
Upon checking the logs, the problem seems to be related to Jetsam - low memory. It appears that the setPixelRatio function is causing the browser to crash. Interestingly, if I comment out that line, everything works fine. However, without the setPixelRatio, the 3D solid appears slightly blurred and less sharp.
Has anyone encountered a similar issue before?
Below is the relevant part of my code:
function load3D()
{
var callbackProgress = function( progress ) {
};
var callbackError = function( ) {
console.log('error');
};
var asseturl='test.json';
var loader = new THREE.ObjectLoader();
loader.load( asseturl, function ( object ) {
scene.add( object );
stageResize();
}, callbackProgress, callbackError);
}
function stageResize()
{
renderer.setPixelRatio( window.devicePixelRatio ); //this row gives browser crash
renderer.setSize(container.clientWidth, container.clientHeight);
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
}