Unable to load GLB in Some of the Iphones

Unable to load GLB Model in Some of the iPhones.
First have checked with a 50 MB GLB File. It Won’t Work on 2/3 of iPhones.
We got reduced it to a 27 MB GLB File. It won’t work on 1/3 of iPhones.
It finely works on android, mac, and windows. I don’t If anyone knows about this issue.?

When it doesn’t work on these iPhones, what problems do you see? Black textures? The page crashes? Something else?

The size of the file can be very different from its memory cost. Running out of memory is a pretty common cause of a crash on iOS. Try opening the GLB on https://gltf.report/ and you’ll see an estimate of its GPU memory cost there.

1 Like

Problems are not common on all iPhones. In iPhone 13 Pro, iPhone XR - Crashes, iPhone 12 - Unable to load lightings, etc.,
GLTF Report :
disk 28.2 MB
gpu 94.3 MB
draws 45
uncompressed

Ok, those numbers don’t indicate any reason it woudn’t work on some iPhones. Assuming the model contains textures, what is the texture resolution?

If you can share ways to reproduce the problem (live demo, glTF model, etc) this will go much faster than my asking questions and trying to guess what your GLB contains. :slight_smile:

The texture sizes are compressed and reduced it to 1 MB and below. I’ll check with my team and will try to get the model share to you.

The file size is less important than the resolution here — regardless of any compression, textures 4096px and larger may not work on some mobile devices.

We also tried the 400kb Model but it won’t work on iPhone SE, iPhone 8.
I think the error is on the Coding side. I will share the code with you to help me through this.

import * as THREE from “…/build/three.module.js”;

import { GLTFLoader } from “./loaders/GLTFLoader.js”;
import { RGBELoader } from “./loaders/RGBELoader.js”;

import { TWEEN } from “./libs/tween.module.min.js”;

import { CanvasUI } from ‘./jsm/CanvasUI.js’;

import { OrbitControls } from ‘./controls/OrbitControls.js’;

import Stats from ‘./libs/stats.module.js’;

import MicroCache from ‘./microcache.js’;

import {
setCamera,
setScene,
setControls,
setRenderer,
setLights,
} from “./scene.js”;

import { Water } from ‘./jsm/objects/Water.js’;

let expiryDate = ‘12/06/2022’;

let canvas
let composer;
let clock, animations, mixer;
let animationActions=;
let camera, scene, renderer, model, controls, dirLight;
let envMap;

let cameraTween, controlTween;

let raycastIncluded;
let selectedObject = null;

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

let water;

let stats;

let currentLabel;

let audioLoader, audioListener, audioSource;

//General Setup
let allTruckMeshes = ;
let allTruckMaterialDictionary = {};
let truckEmpty;
let truckMainPart = “CAB_3”;
let explodedViewClipName = [“CAB_3”, “SWEEP”, “ENGINE”, “LOAD_BODY”,“CNG_GAS_2”, “EXHAUST”];
let cabinImageAnimations = [“LEFT_DOOR”, “RIGHT_DOOR”];
let tempModelToLoad = “./resources/model/Final.glb”;
let modelToLoad = tempModelToLoad;

const transparentMaterial = new THREE.MeshPhongMaterial({
opacity: 0.1,
transparent: true,
});

function ResetStories(){

if(audioSource){
    if (audioSource.isPlaying) {
        audioSource.stop();
    }
}   

if(cngstory == cngStoryToggle.cngShow){
    ToggleCNGStory();
}

if(metalFacia == metalFaciaToggle.metalFaciaShow){
    ToggleMetalFacia();
}

if(viewToggle == explodedViewToggle.explodedView){
    ToggleEngineView();
}

if(loadBody == loadBodyToggle.loadBodyShow){
    ToggleLoadBody();
}

// if(cabinstory == cabinStoryToggle.cabinOn){
//     ToggleCabinStory();
// }

}

/* #region 4_CNG_System */
const cngSwapTextureLoader = new THREE.TextureLoader();

const cngBaseColor = cngSwapTextureLoader.load(“./resources/textures/CNG_Swap_Textures/CNG_GAS_Material_BaseColor.png”);
cngBaseColor.encoding = THREE.sRGBEncoding;
cngBaseColor.flipY=false;

const cngNormal = cngSwapTextureLoader.load(“./resources/textures/CNG_Swap_Textures/CNG_GAS_Material_Normal.png”);
cngNormal.encoding = THREE.sRGBEncoding;
cngNormal.flipY=false;

const cngMetallic = cngSwapTextureLoader.load(“./resources/textures/CNG_Swap_Textures/CNG_GAS_Material_Metallic.png”);
cngMetallic.encoding = THREE.sRGBEncoding;
cngMetallic.flipY=false;

const cngRoughness = cngSwapTextureLoader.load(“./resources/textures/CNG_Swap_Textures/CNG_GAS_Material_Roughness.png”);
cngRoughness.encoding = THREE.sRGBEncoding;
cngRoughness.flipY=false;

const cngSwapMaterial = new THREE.MeshStandardMaterial(
{
map:cngBaseColor,
normalMap:cngNormal,
roughnessMap:cngRoughness,
roughness:0.5,
metalnessMap:cngMetallic,
metalness : 1,
envMap : envMap
}
)

const cngExhaustSwapTextureLoader = new THREE.TextureLoader();

const cngExhaustBaseColor = cngExhaustSwapTextureLoader.load(“./resources/textures/CNG_Exhaust_Textures/CNG_Black_metal_BaseColor.png”);
cngExhaustBaseColor.encoding = THREE.sRGBEncoding;
cngExhaustBaseColor.flipY=false;

const cngExhaustNormal = cngExhaustSwapTextureLoader.load(“./resources/textures/CNG_Exhaust_Textures/CNG_Black_metal_Metallic.png”);
cngExhaustNormal.encoding = THREE.sRGBEncoding;
cngExhaustNormal.flipY=false;

const cngExhaustMetallic = cngExhaustSwapTextureLoader.load(“./resources/textures/CNG_Exhaust_Textures/CNG_Black_metal_Normal.png”);
cngExhaustMetallic.encoding = THREE.sRGBEncoding;
cngExhaustMetallic.flipY=false;

const cngExhaustRoughness = cngExhaustSwapTextureLoader.load(“./resources/textures/CNG_Exhaust_Textures/CNG_Black_metal_Roughness.png”);
cngExhaustRoughness.encoding = THREE.sRGBEncoding;
cngExhaustRoughness.flipY=false;

const cngExhaustSwapMaterial = new THREE.MeshStandardMaterial(
{
map:cngExhaustBaseColor,
normalMap:cngExhaustNormal,
roughnessMap:cngExhaustRoughness,
roughness:0.5,
metalnessMap:cngExhaustMetallic,
metalness : 1,
envMap : envMap
}
)

const cngStoryToggle = {
cngShow: “CNGSHOW”,
cngHide: “CNGHIDE”,
};

let cngstory = cngStoryToggle.cngHide;

function ShowCNG(){
for(var i=0;i<allTruckMeshes.length;i++){
allTruckMeshes[i].material = transparentMaterial;
}
scene.getObjectByName(“CNG_GAS_1”).material = cngSwapMaterial;
scene.getObjectByName(“CNG_GAS_2”).material = cngSwapMaterial;
scene.getObjectByName(“EXHAUST”).material = cngExhaustSwapMaterial;

cameraTweenToPoint(new THREE.Vector3(20.87672092486906, 11.433614013114983, -21.496680541109942));

LoadVoiceOvers("./resources/voiceovers/voice/4_cng_system.wav");

}

function ResetCNG(){
for(var i=0;i<allTruckMeshes.length;i++){
allTruckMeshes[i].material = allTruckMaterialDictionary[allTruckMeshes[i].name];
}
if (audioSource.isPlaying) {
audioSource.stop();
}
}

function ToggleCNGStory(){
if(cngstory == cngStoryToggle.cngHide){
ResetStories();
cngstory = cngStoryToggle.cngShow;
ShowCNG();
}
else{
cngstory = cngStoryToggle.cngHide;
ResetCNG();
}
}
/* #endregion */

//Story 2 - Metal Facia - Highlight
const metalFaciaToggle = {
metalFaciaShow: “METALFACIASHOW”,
metalFaciaHide: “METALFACIAHIDE”,
};

let metalFacia = metalFaciaToggle.metalFaciaHide;

function ShowMetalFacia(){
for(var i=0;i<allTruckMeshes.length;i++){
allTruckMeshes[i].material = transparentMaterial;
}

scene.getObjectByName("CAB_3").material = allTruckMaterialDictionary[scene.getObjectByName("CAB_3").name];
scene.getObjectByName("INDICATOR").material = allTruckMaterialDictionary[scene.getObjectByName("INDICATOR").name];
scene.getObjectByName("LIGHT_COVER").material = allTruckMaterialDictionary[scene.getObjectByName("LIGHT_COVER").name];
scene.getObjectByName("LIGHTS_1").material = allTruckMaterialDictionary[scene.getObjectByName("LIGHTS_1").name];
scene.getObjectByName("LEFT_DOOR").material = allTruckMaterialDictionary[scene.getObjectByName("LEFT_DOOR").name];
scene.getObjectByName("RIGHT_DOOR").material = allTruckMaterialDictionary[scene.getObjectByName("RIGHT_DOOR").name];
scene.getObjectByName("GLASS_0").material = allTruckMaterialDictionary[scene.getObjectByName("GLASS_0").name];
scene.getObjectByName("GLASS_1").material = allTruckMaterialDictionary[scene.getObjectByName("GLASS_1").name];
scene.getObjectByName("GLASS_2").material = allTruckMaterialDictionary[scene.getObjectByName("GLASS_2").name];

cameraTweenToPoint(new THREE.Vector3(33.8173367438527, 10.000000000000002, 11.746446871279094));

LoadVoiceOvers("./resources/voiceovers/voice/1_metal_facia.wav");

}

function ResetMetalFacia(){
for(var i=0;i<allTruckMeshes.length;i++){
allTruckMeshes[i].material = allTruckMaterialDictionary[allTruckMeshes[i].name];
}
if (audioSource.isPlaying) {
audioSource.stop();
}
}

function ToggleMetalFacia(){
if(metalFacia == metalFaciaToggle.metalFaciaHide){
ResetStories();
metalFacia = metalFaciaToggle.metalFaciaShow;
ShowMetalFacia();
}
else{
metalFacia = metalFaciaToggle.metalFaciaHide;
ResetMetalFacia();
}
}

//Story 3 - Load Body
function ShowLoadBody(){
for(var i=1;i<=10;i++){
let boxStackClip = animationActions[“Box_”+i];
boxStackClip.reset();
boxStackClip.weight = 1;
boxStackClip.timeScale = 1;
boxStackClip.clampWhenFinished = true;
boxStackClip.play();
}
for(var i=1;i<=4;i++){
let strapClip = animationActions[“STRAP_”+i];
strapClip.reset();
strapClip.weight = 1;
strapClip.timeScale = 1;
strapClip.clampWhenFinished = true;
strapClip.play();
}

cameraTweenToPoint(new THREE.Vector3(-44.67937248605453, 16.81000539272216, -5.333602324661132));

LoadVoiceOvers("./resources/voiceovers/voice/5_load_body.wav");

}

function ResetLoadBody(){
for(var i=1;i<=10;i++){
let boxStackClip = animationActions[“Box_”+i];
boxStackClip.paused = false;
boxStackClip.timeScale = -1;
boxStackClip.clampWhenFinished = true;
boxStackClip.play();
}
for(var i=1;i<=4;i++){
let strapClip = animationActions[“STRAP_”+i];
strapClip.paused = false;
strapClip.timeScale = -1;
strapClip.clampWhenFinished = true;
strapClip.play();
}
if (audioSource.isPlaying) {
audioSource.stop();
}
}

const loadBodyToggle = {
loadBodyShow: “LOADBODYSHOW”,
loadBodyHide: “LOADBODYHIDE”,
};

let loadBody = loadBodyToggle.loadBodyHide;

function ToggleLoadBody(){
if(loadBody == loadBodyToggle.loadBodyHide){
ResetStories();
loadBody = loadBodyToggle.loadBodyShow;
ShowLoadBody();
}
else{
loadBody = loadBodyToggle.loadBodyHide;
ResetLoadBody();
}
}
//Story 4 - Cabin Image - Popup Image - Trigger code written in index.html

const cabinStoryToggle = {
cabinOn : “CABINON”,
cabinOff : “CABINOFF”
}

let cabinstory = cabinStoryToggle.cabinOff;

function ToggleCabinStory(){
if(cabinstory == cabinStoryToggle.cabinOff){
cabinstory = cabinStoryToggle.cabinOn;
ResetStories();
ShowCabin();
}
else{
cabinstory = cabinStoryToggle.cabinOff;
HideCabinImage();
}
}

function ShowCabin(){
for(var i=0;i<cabinImageAnimations.length;i++){
let animationClip = animationActions[cabinImageAnimations[i]];
animationClip.reset();
animationClip.weight = 1;
animationClip.timeScale = 1;
animationClip.clampWhenFinished = true;
animationClip.play();
}
LoadVoiceOvers(“./resources/voiceovers/voice/2_cabin.wav”);

cameraTweenToPoint(new THREE.Vector3(14.130491134120978, 15.470253204645456, -31.539535158042863));
$("#cabinStory").modal('show');

}

function HideCabinImage(){
for(var i=0;i<cabinImageAnimations.length;i++){
let animationClip = animationActions[cabinImageAnimations[i]];
animationClip.paused = false;
animationClip.timeScale = -2;
animationClip.clampWhenFinished = true;
animationClip.play();
}

$("#cabinStory").modal('hide');

cameraTweenToPoint(new THREE.Vector3(51.730671310197735, 16.747770964450645, 2.909936907837036));
if (audioSource.isPlaying) {
    audioSource.stop();
}

}

//Story 5 - Engine - Exploded view of the truck
function ShowEngine(){
for(var i=0;i<explodedViewClipName.length;i++){
let animationClip = animationActions[explodedViewClipName[i]];
animationClip.reset();
animationClip.weight = 1;
animationClip.timeScale = 1;
animationClip.clampWhenFinished = true;
animationClip.play();
}

controls.minDistance = 40;
controls.maxDistance = 55;

LoadVoiceOvers("./resources/voiceovers/voice/3_cng_engine.wav");

}

function HideEngine(){
for(var i=0;i<explodedViewClipName.length;i++){
let animationClip = animationActions[explodedViewClipName[i]];
animationClip.paused = false;
animationClip.timeScale = -3;
animationClip.clampWhenFinished = true;
animationClip.play();
}
if (audioSource.isPlaying) {
audioSource.stop();
}

controls.minDistance = 30;
controls.maxDistance = 55;

}

const explodedViewToggle = {
explodedView: “EXPLODEDVIEW”,
collapsedView: “COLLAPSEDVIEW”,
};

let viewToggle = explodedViewToggle.collapsedView;

function ToggleEngineView(){
if(viewToggle == explodedViewToggle.collapsedView){
ResetStories();
viewToggle = explodedViewToggle.explodedView;
ShowEngine();
}
else{
viewToggle = explodedViewToggle.collapsedView;
HideEngine();
}
}

function init() {
canvas = document.querySelector(“#threejs-canvas”);

camera = setCamera();

scene = setScene();
setLights(scene);
renderer = setRenderer();
renderer._microCache = new MicroCache();
controls = setControls(camera, renderer);
window.scene = scene;
clock = new THREE.Clock();

setupHDRI("./resources/hdri/", "kloofendal_48d_partly_cloudy_2k.hdr");

raycastIncluded = new THREE.Group();
scene.add( raycastIncluded );

window.addEventListener("resize", onWindowResize, false);    
addEvents();

//stats = Stats();  
//document.body.appendChild(stats.dom);

}

function CreateOcean(){
// const waterGeometry = new THREE.PlaneGeometry( 10000, 10000 );
const waterGeometry = new THREE.CircleGeometry( 1480, 50 );
water = new Water(
waterGeometry,
{
textureWidth: 512,
textureHeight: 512,
waterNormals: new THREE.TextureLoader().load( ‘./resources/textures/waternormals.jpg’, function ( texture ) {

                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

            } ),
            sunDirection: new THREE.Vector3(),
            sunColor: 0xffffff,
            waterColor: 0x001e0f,
            distortionScale: 3.7,
            fog: scene.fog !== undefined
        }
    );

    water.rotation.x = - Math.PI / 2;
    water.position.y = -60.000;       
    scene.add( water );

}

function setupHDRI(path, name) {
new RGBELoader()
.setDataType(THREE.UnsignedByteType)
.setPath(path)
.load(name, function (texture) {
envMap = pmremGenerator.fromEquirectangular(texture).texture;

        scene.background = new THREE.Color(0xffffff);
        //scene.background = envMap;
        scene.environment = envMap;

        texture.dispose();
        pmremGenerator.dispose();
    });

const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

}

function loadModel(path) {
const loader = new GLTFLoader();

loader.load(path, function(gltf) {                    
    model = gltf.scene;
    animations = gltf.animations;
    mixer = new THREE.AnimationMixer(model);
    model.traverse((child) => {            
        if (child.isMesh) {
            child.visible = true;
            child.castShadow = true;
            child.receiveShadow = true; 
            
            //Adding onAfter render callback to hide loading screen only after the truck is loaded
            if(child.name == truckMainPart){
                child.onAfterRender = onAfterRender;
            }
        }            

        if(!child.isMesh){
            if(child.name == "TRUCK_EMPTY"){
                truckEmpty = child;
                truckEmpty.traverse(function(child){
                    if(child.isMesh){
                        allTruckMeshes.push(child);
                        allTruckMaterialDictionary[child.name] = child.material;
                    }
                });
            }
        }
    });
    scene.add(model);
    window.model = model;    
    createAnimationActions();     
},
// called while loading is progressing
function ( xhr ) {
    //console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    if((xhr.loaded / xhr.total * 100) != 100){
        document.getElementById("loading").style.display = "flex";
        }  
    if((xhr.loaded / xhr.total * 100) == 100){
        console.log("Loaded completely");        
        // document.getElementById("loading").style.display = "none";
        
        createHotspot(new THREE.Vector3(23.500, 3.000, 3.5), "MetalFacia", "hotspot_1", "1_full_metal_facia", new THREE.Vector3(23.500, 2.0, 3.5));
        createHotspot(new THREE.Vector3(17.340, 9.880, -3.340), "Cabin", "hotspot_2", "2_comfortable_cabin", new THREE.Vector3(17.340, 8.880, -3.340));
        createHotspot(new THREE.Vector3(13.500,16.0,3.0), "Engine", "hotspot_3", "3_cng_engine", new THREE.Vector3(13.500,17.0,3.0)); 
        createHotspot(new THREE.Vector3(0,5,-5), "CNG", "hotspot_4", "4_cng_system", new THREE.Vector3(0,4,-5));
        createHotspot(new THREE.Vector3(-29, 10, 3.5), "LoadBody","hotspot_5", "5_load_body", new THREE.Vector3(-29, 11.5, 3.5));     

        CreateOcean();

        initAudio();

        cameraTweenToPoint(new THREE.Vector3(38.26915246396554, 14.33611207887764, -24.24334784396151));
    }
},
// called when loading has errors
function ( error ) {
    console.log( 'An error happened' + error);
});    

}

//Test Array Buffer based Loader
function loadModelFromBuffer(buffer) {
const loader = new GLTFLoader();
loader.parse(buffer, “”, function(gltf) {
model = gltf.scene;
animations = gltf.animations;
mixer = new THREE.AnimationMixer(model);
model.traverse((child) => {
if (child.isMesh) {
child.visible = true;
child.castShadow = true;
child.receiveShadow = true;

            //Adding onAfter render callback to hide loading screen only after the truck is loaded
            if(child.name == truckMainPart){
                child.onAfterRender = onAfterRender;
            }
        }            

        if(!child.isMesh){
            if(child.name == "TRUCK_EMPTY"){
                truckEmpty = child;
                truckEmpty.traverse(function(child){
                    if(child.isMesh){
                        allTruckMeshes.push(child);
                        allTruckMaterialDictionary[child.name] = child.material;
                    }
                });
            }
        }
    });
    scene.add(model);
    window.model = model;    
    createAnimationActions();  

    createHotspot(new THREE.Vector3(23.500, 3.000, 3.5), "MetalFacia", "hotspot_1", "1_full_metal_facia", new THREE.Vector3(23.500, 2.0, 3.5));
    createHotspot(new THREE.Vector3(17.340, 9.880, -3.340), "Cabin", "hotspot_2", "2_comfortable_cabin", new THREE.Vector3(17.340, 8.880, -3.340));
    createHotspot(new THREE.Vector3(13.500,16.0,3.0), "Engine", "hotspot_3", "3_cng_engine", new THREE.Vector3(13.500,17.0,3.0)); 
    createHotspot(new THREE.Vector3(0,5,-5), "CNG", "hotspot_4", "4_cng_system", new THREE.Vector3(0,4,-5));
    createHotspot(new THREE.Vector3(-29, 10, 3.5), "LoadBody","hotspot_5", "5_load_body", new THREE.Vector3(-29, 11.5, 3.5));     

    CreateOcean();

    initAudio();

    cameraTweenToPoint(new THREE.Vector3(38.26915246396554, 14.33611207887764, -24.24334784396151));
},
function(error){
    console.log(error);
});

}

var onAfterRender = function( renderer, scene, camera, geometry, material, group ) {
document.getElementById(“loading”).style.display = “none”;
};

function createAnimationActions() {
animations.forEach((clip) => {
let name = clip.name;
let action = mixer.clipAction(clip);
action.setLoop(THREE.LoopOnce);
animationActions[name] = action;
});

window.animationActions = animationActions;

}

function createHotspot(position, hotspotName, imagePath, labelpath, labelPosition) {
//Annotation Hotspot
const map = new THREE.TextureLoader().load(“./resources/images/annotation/” + imagePath + “.png”);
map.encoding = THREE.sRGBEncoding;

const material = new THREE.SpriteMaterial( { map: map } );

const hotspot = new THREE.Sprite( material );
hotspot.position.copy(position);
hotspot.scale.set(1.2, 1.2, 1.2);
scene.add( hotspot );   

hotspot.name = hotspotName;

raycastIncluded.add(hotspot);

//Annotation Label
const labelmap = new THREE.TextureLoader().load("./resources/images/annotationName/" + labelpath + ".png");
labelmap.encoding = THREE.sRGBEncoding;

const labelmaterial = new THREE.SpriteMaterial( { map: labelmap, alphaTest: 0, depthTest :false } );

const hotspotLabel = new THREE.Sprite( labelmaterial );
hotspotLabel.setOpaqueSort = 999;
hotspotLabel.position.copy(labelPosition);
hotspotLabel.scale.set(5, 5, 5);
scene.add( hotspotLabel );   
hotspotLabel.visible = false;

hotspotLabel.name = hotspotName + "_label";

}

function initAudio(){
audioListener = new THREE.AudioListener();
audioLoader = new THREE.AudioLoader();
audioSource = new THREE.Audio(audioListener);
camera.add(audioListener);
}

function LoadVoiceOvers(path){
if (audioSource.isPlaying) {
audioSource.stop();
}
// load a sound and set it as the Audio object’s buffer
audioLoader.load(path, function (buffer) {
audioSource.setBuffer(buffer);
audioSource.setLoop(false);
audioSource.setVolume(1);
audioSource.play();
});
}

function getSelectedHotspot(hotspotName){
switch(hotspotName){
case “CNG”:
console.log(hotspotName);
ToggleCNGStory();
break;
case “Cabin”:
console.log(hotspotName);
ToggleCabinStory();
break;
case “LoadBody”:
console.log(hotspotName);
ToggleLoadBody();
break;
case “MetalFacia”:
console.log(hotspotName);
ToggleMetalFacia();
break;
case “Engine”:
console.log(hotspotName);
ToggleEngineView();
break;
}
}

function addEvents() {
window.addEventListener(“resize”, onWindowResize);

renderer.domElement.style.touchAction = "none";
renderer.domElement.addEventListener("pointermove", onPointerMove);
renderer.domElement.addEventListener("touchmove", onPointerMove);
renderer.domElement.addEventListener("touchstart", onPointerMove);
renderer.domElement.addEventListener("touchstart", onPointerClick);
renderer.domElement.addEventListener("click", onPointerClick);

}

function onPointerMove(event) {
if (event.isPrimary === false) return;

if (event.changedTouches) {
    mouse.x = (event.changedTouches[0].clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.changedTouches[0].clientY / window.innerHeight) * 2 + 1;
    //console.log(mouse);
} else {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
    
if ( selectedObject ) {
    selectedObject.object.material.color.set( '#69f' );
    selectedObject = null;
}

checkIntersection();

}

function onPointerClick(event) {
getIntersectedMesh();
}

function getIntersectedMesh() {
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(raycastIncluded, true);

if ( intersects.length > 0 ) {
    const res = intersects.filter( function ( res ) {
        return res && res.object;
    } )[ 0 ];        
    if(selectedObject){
        getSelectedHotspot(selectedObject.object.name);
    }
}   

}

function checkIntersection() {
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(raycastIncluded, true);

if ( intersects.length > 0 ) {
    const res = intersects.filter( function ( res ) {
        return res;
    } )[ 0 ];

    if ( res ) {
        selectedObject = res;
        selectedObject.object.material.color.set( '#ffffff' );
        currentLabel = scene.getObjectByName(res.object.name + "_label");
        if(currentLabel){
            currentLabel.visible = true;
        }
    }        
}
else{
    if(currentLabel){
        currentLabel.visible = false;
    }        
} 

}

function cameraTweenToPoint(new_camera_pos, time) {
//controls.reset();
cameraTween = new TWEEN.Tween(camera.position)
.to({
x: new_camera_pos.x,
y: new_camera_pos.y,
z: new_camera_pos.z,
},
time
)
.interpolation(TWEEN.Interpolation.Bezier)
.easing(TWEEN.Easing.Quintic.Out);

cameraTween.start();
cameraTween.onComplete(function () { });
cameraTween.onUpdate(function () {
    if (controls.inUse) {
        // if camera is movd by user
        //if (new_camera_pos) camera.position.copy(new_camera_pos); // set pos to end value
        this.stop(); // stop tween
    }
});

}

function controlsTweenToPoint(controls_pos, time){
//controls.reset();
controlTween = new TWEEN.Tween(controls.target)
.to({
x: controls_pos.x,
y: controls_pos.y,
z: controls_pos.z,
},
time
)
.interpolation(TWEEN.Interpolation.Bezier)
.easing(TWEEN.Easing.Quintic.Out);
controlTween.start();
controlTween.onComplete(function () { });
controlTween.onUpdate(function () {
if (controls.inUse) {
// if camera is movd by user
//if (new_camera_pos) camera.position.copy(new_camera_pos); // set pos to end value
this.stop(); // stop tween
}
});
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate()
{
requestAnimationFrame(animate);
renderer.setAnimationLoop(render);
}

function render(time) {
time *= 0.001; // Time in seconds

const dt = clock.getDelta();
if (mixer) mixer.update(dt);

if(water)
water.material.uniforms[ 'time' ].value += 1.0 / 60.0;

//stats.update();    

controls.update();

// console.log(controls.target);
// console.log(camera.position);

TWEEN.update();
renderer.render(scene, camera);

}

init();
// //loadModel(modelToLoad);
//renderer._microCache.getSet(‘cachedModel’, loadModel(modelToLoad));
animate();

function DecodeBinary(buffer){ //First Fn
// let resultBuffer = fr.result;
let resultBuffer = buffer;
console.log(resultBuffer); //File Reader Array Buffer

    let bufferToBinary = new Int8Array(resultBuffer);
    console.log(bufferToBinary); //OG buffer to binary
    
    let decodedBinary = bufferToBinary; 
    
    //Replacing Starting Characters into glTF format
    decodedBinary[0] = 103; //g
    decodedBinary[1] = 108; //l
    decodedBinary[2] = 84; //T
    decodedBinary[3] = 70; //F

    console.log(decodedBinary); //OG buffer to binary

    let decodedBuffer = new ArrayBuffer(decodedBinary.byteLength);
    decodedBuffer = decodedBinary.buffer;

    console.log(decodedBuffer);

    loadModelFromBuffer(decodedBuffer);

}

function ReadFileFromServer() {
var oReq = new XMLHttpRequest();
oReq.open(“GET”, modelToLoad, true);
oReq.responseType = “arraybuffer”;
oReq.onprogress = function(evt)
{
var percentage = Math.round((evt.loaded/evt.total)*100);
//console.log("Loading " + percentage);
('.progress-bar').css('width', percentage+'%').attr('aria-valuenow', percentage); (′.progress−bar′).css(′width′,percentage+′('.progress-bar').css('width', percentage+'%').attr('aria-valuenow', percentage); (‘.progress-bar’).text(percentage + “%”);

    if(percentage >= 100){
        $('.progress').hide();
    }
}
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response; // Note: not oReq.responseText
if (arrayBuffer) {
    // console.log(arrayBuffer);
    
    DecodeBinary(arrayBuffer);
}

};

oReq.send(null);
}

function expiryDays(date_string) {
var b = date_string.split(/\D/);
var expiry = new Date(b[2],–b[0],b[1]);
return Math.round((expiry - new Date().setHours(0,0,0,0)) / 8.64e7);
}

if(expiryDays(expiryDate) > 0){
document.getElementById(“expiry”).style.display = “none”;
ReadFileFromServer();
}
else{
document.getElementById(“expiry”).style.display = “block”;
}



what you faced here ? any update ?

Unfortunately, the size of the file on disk, and the code, are unlikely to be the problem here. If a particular 3D model crashes on certain phones, the problem is in the 3D model. You will have to share that model to get answers, or else you’ll have to investigate it on your own.

A 400kb model could decompress to have 1000 MB of geometry or 16K textures, any of that will certainly crash your phone. There’s really no way to know without seeing it.

The reference to gpu 94.3 MB suggests that maybe there’s a 4K texture in this model? My suggestion, if so, would be to try reducing it to 2K and see if the phone still crashes.