Hi working on a react native project where I render certain glb file conditionally check code below:
const getRandomInt = (min: number, max: number): number => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
};
let file;
const glbMap: any = {
Baby: 'https://github.com/Timas/SE-PROJECT/blob/master/Baby.glb?raw=true',
Teen: 'https://github.com/Timas/SE-PROJECT/blob/master/Teen.glb?raw=true',
Elder: 'https://github.com/Timas/SE-PROJECT/blob/master/Elder.glb?raw=true',
Adult: 'https://github.com/Timas/SE-PROJECT/blob/master/Adult.glb?raw=true',
Baby_red: 'https://github.com/Timas/SE-PROJECT/blob/master/Baby_red.glb?raw=true',
Teen_red: 'https://github.com/Timas/SE-PROJECT/blob/master/Teen_red.glb?raw=true',
Elder_red: 'https://github.com/Timas/SE-PROJECT/blob/master/Elder_red.glb?raw=true',
Adult_red: 'https://github.com/Timas SE-PROJECT/blob/master/Adult_red.glb?raw=true',
};
if (props.percent <= 25) {
console.log(`EngineScreen - 51`, props.skinColor);
switch (props.skinColor) {
case 'Base':
file = glbMap.Baby;
break;
case 'Red':
file = glbMap.Baby_red;
break;
default:
file = glbMap.Baby;
break;
}
} else if (props.percent > 25 && props.percent <= 50) {
switch (props.skinColor) {
case 'Base':
file = glbMap.Teen;
break;
case 'Red':
file = glbMap.Teen_red;
break;
default:
file = glbMap.Teen;
break;
}
} else if (props.percent > 50 && props.percent <= 75) {
switch (props.skinColor) {
case 'Base':
file = glbMap.Elder;
break;
case 'Red':
file = glbMap.Elder_red;
break;
default:
file = glbMap.Elder;
break;
}
} else {
switch (props.skinColor) {
case 'Base':
file = glbMap.Adult;
break;
case 'Red':
file = glbMap.Adult_red;
break;
default:
file = glbMap.Adult;
break;
}
}
const uri = file;
SceneLoader.Append
SceneLoader.LoadAsync(uri, undefined, engine)
.then(scene => {
const animationNumber = getRandomInt(0, scene.animationGroups.length - 1);
setScene(scene);
scene.createDefaultCameraOrLight(true, undefined, true);
(scene.activeCamera as ArcRotateCamera).alpha += Math.PI;
if (props.percent <= 25) {
(scene.activeCamera as ArcRotateCamera).radius = 5;
scene.animationGroups[animationNumber].start(true);
} else if (props.percent > 25 && props.percent <= 50) {
(scene.activeCamera as ArcRotateCamera).radius = 15;
scene.animationGroups[animationNumber].start(true);
} else if (props.percent > 50 && props.percent <= 75) {
(scene.activeCamera as ArcRotateCamera).radius = 25;
scene.animationGroups[animationNumber].start(true);
} else if (props.percent > 75 && props.percent !== 100) {
(scene.activeCamera as ArcRotateCamera).radius = 20;
scene.animationGroups[animationNumber].start(true);
} else if (props.percent === 100) {
(scene.activeCamera as ArcRotateCamera).radius = 30;
scene.animationGroups[animationNumber].start(true);
}
(scene.activeCamera as ArcRotateCamera).speed = 0.2;
(scene.activeCamera as ArcRotateCamera).wheelDeltaPercentage = 1.5;
scene.audioEnabled = true;
setCamera(scene.activeCamera!);
})
.catch(e => {
flashError('Failed to load dragon screen');
console.log(`EngineScreen - 131`, e);
});
Now this works well however the issue now comes in when a user is to click so to change the type of glb iOS then crashes saying, “Message from debugger: Terminated due to memory issue”
Question
- What is the best or a way of changing glb file to render conditionally