VISUALBROWSER_PUBLIC/VISUALBROWSER_BASIC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simple UI code base to understand VisualBrowser

Browse Source
This commit is contained in:
VISUALBROWSER_DEV 2024-11-22 23:46:34 -05:00
commit b1df83aff0
2 changed files with 771 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md Normal file
View File

@ -0,0 +1,16 @@
# VISUALBROWSER
This is a simple VISUALBROWSER UI Template including the bare minimum features:
Website: https://visualsbrowser.com
The Tagline "Your Curiosity will unlock the massive rewards waiting for you." is about the launch of the VISUALBROWSER project. Centered on the principles of 3D Information, User Interaction, [Curiosity, Discovery and Exploration]
The objective of this platform is to offer the internet's most diverse and high quality collection of interactive 3D and VR web experiences, allowing users to immerse themselves in captivating narratives and explore unique adventures in desktop, mobile, and VR.
# Release Notes
#Basic UI with 3D Level
#Mobile Joystick

755
index.php Normal file
View File

@ -0,0 +1,755 @@
<?php
//** THIS IS A SIMPLE OPEN WORLD
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- NO CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src * ws: wss: gap: data: blob: file: http: https:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *" />
<!-- NO CACHE -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<title>TEMPLATE | VISUALSBROWSER</title>
<!-- PAGE META -->
<meta content="TEMPLATE | VISUALSBROWSER" name="description">
<meta content="TEMPLATE | VISUALSBROWSER" property="og:title">
<meta content="TEMPLATE | VISUALSBROWSER" property="og:description">
<meta content="https://visualsbrowser.com/assets/og-image.jpg" property="og:image">
<meta content="TEMPLATE | VISUALSBROWSER" property="twitter:title">
<meta content="TEMPLATE | VISUALSBROWSER" property="twitter:description">
<meta content="https://visualsbrowser.com/assets/og-image.jpg" property="twitter:image">
<meta property="og:type" content="website">
<meta content="summary_large_image" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!-- This is needed for Mobile Responsive CSS -->
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="edge" content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no">
<meta name="format-detection" content="telephone=no">
<!-- FAVICONS -->
<link rel="apple-touch-icon" sizes="180x180" href="https://visualsbrowser.com/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://visualsbrowser.com/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://visualsbrowser.com/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="https://visualsbrowser.com/assets/favicons/site.webmanifest">
<link rel="mask-icon" href="https://visualsbrowser.com/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- Swiper.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Babylon.js -->
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/libktx.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://www.visualsbrowser.com/CONTENT/REPO/css/angular-material.css">
<link rel="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="ran3oek.css">
<!-- JavaScript -->
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body touch-action="none">
<!-- RENDER CANVAS -->
<canvas id="renderCanvas"></canvas> <!-- touch-action="none" for best results from PEP -->
<script>
//Basic Variables
var loginCookie = "0";
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
//Set Starter Events:
//var exhibit = document.getElementById("exhibit");
//exhibit.addEventListener("click", startExperience);
//var userInterface = document.getElementById("userInterface");
//userInterface.setAttribute("style", "display:none");
//GLOBAL VARS
var loadFlag = 0;
//GLOBAL VARS
var resultPromise = 0;
var d;
var hotSpotRing;
var defaultRing;
var inHotspot;
var hotspotClicked;
var hotspotFired;
//GLOBAL VARS
var mainCounter = 0;
var subtaskCounter = 0;
var rayCasterFlag = 0;
var isInside = false;
var isInsideInteraction = 0;
//FireFlag: Prevent Duplicates
var fireFlag2 = 0;
var fireFlag3 = 0;
var fireFlag4 = 0;
var fireFlag5 = 0;
var fireFlag6 = 0;
var fireFlag7 = 0;
var fireFlag8 = 0;
var fireFlag9 = 0;
var fireFlag10 = 0;
var fireFlag11 = 0;
var fireFlag12 = 0;
var fireFlag13 = 0;
var fireFlag14 = 0;
var fireFlag15 = 0;
var fireFlag16 = 0;
var fireFlag17 = 0;
var fireFlag18 = 0;
var fireFlag19 = 0;
var fireFlag20 = 0;
var fireFlag21 = 0;
var fireFlag22 = 0;
var fireFlag23 = 0;
var fireFlag24 = 0;
var fireFlag25 = 0;
var fireFlag26 = 0;
var fireFlag27 = 0;
var fireFlag28 = 0;
var fireFlag29 = 0;
var fireFlag30 = 0;
var fireFlag31 = 0;
var fireFlag32 = 0;
var fireFlag33 = 0;
var fireFlag34 = 0;
var fireFlag35 = 0;
var fireFlag36 = 0;
var fireFlag37 = 0;
var fireFlag38 = 0;
var fireFlag39 = 0;
var fireFlag40 = 0;
var fireFlag41 = 0;
var fireFlag42 = 0;
var fireFlag43 = 0;
var fireFlag44 = 0;
var fireFlag45 = 0;
var fireFlag46 = 0;
//GLOBAL USER AGENT
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
//detect iPad (Post IOS 13)
iPad: function() {
var iPad = navigator.userAgent.match(/Macintosh/i);
var touchEnabled = navigator.maxTouchPoints;
if ( (iPad != null) && (touchEnabled > 1) )
{
return navigator.userAgent.match(/Macintosh/i);
}
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.iPad() || isMobile.Opera() || isMobile.Windows());
}
};
const createScene = function () {
// Creates a basic Babylon Scene object
const scene = new BABYLON.Scene(engine);
// Camera Settings
//var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 1.8, -1.5), scene);
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 1.8, 0), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
//Global Event Variables
var intervalIRight;
var intervalIGuide;
//Add Camera Settings
camera.speed = 0.05; //2
camera.angularSpeed = 0.02; //0.05
camera.angle = Math.PI/2;
camera.rotation.x = 0; //put the camera horizontal
camera.rotation.y = 3.141592653589793;
camera.rotation.z = 0;
//Additional Camera Settings
camera.minZ = 0.1;
//Add Collisons
camera.checkCollisions = true;
//Add Camera Controls (*CustomDesktopControlsHere)
// Let's remove default keyboard:
//camera.inputs.removeByType("FreeCameraKeyboardMoveInput");
//camera.inputs.removeByType("FreeCameraMouseInput");
let adt = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
let xAddPos = 0;
let yAddPos = 0;
let xAddRot = 0;
let yAddRot = 0;
let sideJoystickOffset = -33;
let bottomJoystickOffset = -30; //the lower the negative number the more it shifts down
let translateTransform;
let leftThumbContainer = makeThumbArea("leftThumb", 0, "blue", null);
leftThumbContainer.height = "200px";
leftThumbContainer.width = "200px";
leftThumbContainer.isPointerBlocker = true;
leftThumbContainer.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
leftThumbContainer.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
//leftThumbContainer.alpha = 0.4;
leftThumbContainer.left = sideJoystickOffset;
leftThumbContainer.top = bottomJoystickOffset;
let leftInnerThumbContainer = makeThumbArea("leftInnterThumb", 0, "white", "white");
leftInnerThumbContainer.height = "40px";
leftInnerThumbContainer.width = "40px";
leftInnerThumbContainer.isPointerBlocker = false;
leftInnerThumbContainer.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
leftInnerThumbContainer.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
leftInnerThumbContainer.shadowColor = "#000";
let leftInnerThumbContainerA = makeThumbArea("leftInnterThumbA", 0, "white", "#000000");
leftInnerThumbContainerA.height = "80px";
leftInnerThumbContainerA.width = "80px";
leftInnerThumbContainerA.isPointerBlocker = false;
leftInnerThumbContainerA.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
leftInnerThumbContainerA.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
leftInnerThumbContainerA.alpha = 0.5;
leftInnerThumbContainerA.shadowColor = "#000";
let leftPuck = makeThumbArea("leftPuck", 0, "white", "white");
leftPuck.height = "40px";
leftPuck.width = "40px";
leftPuck.isPointerBlocker = true;
leftPuck.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
leftPuck.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
leftPuck.shadowColor = "#000";
leftThumbContainer.onPointerDownObservable.add(function(coordinates) {
leftPuck.isVisible = true;
leftInnerThumbContainer.isVisible = false;
leftPuck.floatLeft = coordinates.x-(leftThumbContainer._currentMeasure.width*.5)-sideJoystickOffset;
leftPuck.left = leftPuck.floatLeft;
leftPuck.floatTop = adt._canvas.height - coordinates.y-(leftThumbContainer._currentMeasure.height*.5)+bottomJoystickOffset;
leftPuck.top = leftPuck.floatTop*-1;
leftPuck.isDown = true;
//leftThumbContainer.alpha = 0.9;
});
leftThumbContainer.onPointerUpObservable.add(function(coordinates) {
xAddPos = 0;
yAddPos = 0;
leftPuck.isDown = false;
leftPuck.isVisible = false;
leftInnerThumbContainer.isVisible = true;
//leftThumbContainer.alpha = 0.4;
});
leftThumbContainer.onPointerMoveObservable.add(function(coordinates) {
if (leftPuck.isDown) {
xAddPos = coordinates.x-(leftThumbContainer._currentMeasure.width*.5)-sideJoystickOffset;
yAddPos = adt._canvas.height - coordinates.y-(leftThumbContainer._currentMeasure.height*.5)+bottomJoystickOffset;
leftPuck.floatLeft = xAddPos;
leftPuck.floatTop = yAddPos*-1;
leftPuck.left = leftPuck.floatLeft;
leftPuck.top = leftPuck.floatTop;
}
});
adt.addControl(leftThumbContainer);
leftThumbContainer.addControl(leftInnerThumbContainerA);
leftThumbContainer.addControl(leftInnerThumbContainer);
leftThumbContainer.addControl(leftPuck);
leftPuck.isVisible = false;
//Hide the UI but still use joystick set both to false
leftInnerThumbContainer.isVisible = true;
leftInnerThumbContainerA.isVisible = true;
camera.attachControl(canvas, true);
scene.registerBeforeRender(function() {
//JOYSTICK SENSITIVITY
translateTransform = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(xAddPos/12000, 0, yAddPos/12000), BABYLON.Matrix.RotationY(camera.rotation.y));
camera.cameraDirection.addInPlace(translateTransform);
camera.cameraRotation.y += xAddRot/15000*-1;
camera.cameraRotation.x += yAddRot/15000*-1;
});
function makeThumbArea(name, thickness, color, background, curves){
let rect = new BABYLON.GUI.Ellipse();
rect.name = name;
rect.thickness = thickness;
rect.color = color;
rect.background = background;
rect.paddingLeft = "0px";
rect.paddingRight = "0px";
rect.paddingTop = "0px";
rect.paddingBottom = "0px";
return rect;
}
// Skybox
//var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene);
//var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
//skyboxMaterial.backFaceCulling = false;
//skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("assets/skybox", scene);
//skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
//skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
//skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
//skybox.material = skyboxMaterial;
//Set an Environment Texture (HDR Texture)
//var hdrTexture = new BABYLON.CubeTexture("./environment.env", scene);
//scene.createDefaultSkybox(hdrTexture, true, 10000);
// Scene Settings (Color)
scene.clearColor.b = 0;
scene.clearColor.g = 0;
scene.clearColor.r = 0;
//scene.clearColor = {r: 0.8745098039215686, g: 0.8627450980392157, b: 0.8392156862745098};
// Scene Settings (Image Processing)
scene.imageProcessingConfiguration._contrast = 1.8;
scene.imageProcessingConfiguration._exposure = 1.4;
// Scene Settings (Fog)
//scene.fogEnabled = true;
//scene.fogColor.r = 0.8745098039215686;
//scene.fogColor.g = 0.8627450980392157;
//scene.fogColor.b = 0.8392156862745098;
//scene.fogColor = {r: 0.8745098039215686, g: 0.8627450980392157, b: 0.8392156862745098};
//scene.fogMode = 3;
//scene.fogStart = 7;
//scene.fogEnd = 50;
resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model.glb", scene);
resultPromise.then((result) => {
loadFlag = 1;
console.log("loaded asynchronously");
updateTextures(scene);
updateMaterials(scene);
//Hide Load Screen
//document.getElementById('loading').style.display='none';
//Hide Joystick
scene.textures[0]._rootContainer.children[0].isVisible = true
//COLLIDERS
//scene.getMeshById('Collider').checkCollisions = true;
//GAZE INPUT SYSTEM
defaultRing = true;
d = BABYLON.MeshBuilder.CreateDisc("disc", { radius: .01 }, scene);
d.parent = camera;
d.position.z = 2;
d.renderingGroup = 3;
d.material = new BABYLON.StandardMaterial("texture", scene);
d.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
//hotspot status
hotspotClicked = false;
hotspotFired = false;
//hotspot click event
scene.onPointerObservable.add((pointerInfo) => {
if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
if(inHotspot = true) {
hotspotClicked = true;
}
}
});
});
return scene;
};
const scene = createScene(); //Call the createScene function
// ENGINE LOOP: Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
checkPosition(scene);
if(rayCasterFlag == 1) {
//WHERE IS CAMERA POINTING AT?
var meshPicked = castRay(scene);
//INTERACTION LOGIC
analyzeInteractions(scene, meshPicked);
}
});
function updateTextures(scene) {
//Set all texture samples
tex_count = scene.textures.length;
for(i=0; i < tex_count; i++)
{
//set texture sampling mode
scene.textures[i]._initialSamplingMode = 2;
scene.textures[i]._texture.samplingMode = 2;
}
//Disable colliders
//disable color write on colliders + make it transparent
var mat = scene.getMaterialByName('interactable');
if(mat != null) {
mat.disableColorWrite = true;
mat.transparencyMode = 2
mat.alpha = 0
}
var mat = scene.getMaterialByName('interactable2');
if(mat != null) {
mat.disableColorWrite = true;
mat.transparencyMode = 2
mat.alpha = 0
}
var mat2 = scene.getMaterialByName('glass');
if(mat2 != null) {
mat2.disableColorWrite = true;
mat2.transparencyMode = 2
mat2.alpha = 0
}
}
function updateMaterials(scene) {
//Set all texture samples
mat_count = scene.materials.length;
for(i=0; i < mat_count; i++)
{
//set all materials to unlit
scene.materials[i].unlit = true;
//set material to to debug mode to view normals rendering [WHEN TESTING UNTEXTURED CITY MODELS]
//scene.materials[i].debugMode = 2
//Set Skybox to Lit
if(scene.materials[i].id == 'skyBox') {
scene.materials[i].unlit = false;
}
}
}
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
function castRay(scene) {
var canvas = engine.getRenderingCanvas();
var pickResult = scene.pick(canvas.offsetWidth / 2, canvas.offsetHeight / 2, (mesh) => {
return (mesh.name !== d.name);
});
if (pickResult.hit) {
//alert(pickResult.pickedMesh.name);
return pickResult.pickedMesh.name;
}
}
//INTERACTIONS LOGIC: CLICKACTIONS (CUSTOM TO EACH LEVEL)
function analyzeInteractions(scene, meshPicked) {
//Interact01 Pick Up Box
if(isInsideInteraction == 1 && (meshPicked == 'cube') ) {
inHotspot = true;
if( scene.getMeshByName("disc") == null) {
defaultRing == false
}
//Camera Ray just entered Hotspot Area
if( (inHotspot == true) && (defaultRing == true) ) {
//delete default ring
scene.getMeshByName("disc").dispose();
scene.getMaterialByName("texture").dispose();
//console.log('deleted');
//*************************************
var camera = scene.activeCamera;
var sphereOut = BABYLON.MeshBuilder.CreateSphere("sphere", { diameterX: 3, diameterY: 0.01, diameterZ: 3, segments: 16 });
sphereOut.position.z = 2;
var sphereIn = BABYLON.MeshBuilder.CreateSphere("sphere", { diameterX: 2, diameterY: 0.02, diameterZ: 2, segments: 16 });
sphereIn.position.z = 2;
const outerCSG = BABYLON.CSG.FromMesh(sphereOut);
const innerCSG = BABYLON.CSG.FromMesh(sphereIn);
const pipeCSG = outerCSG.subtract(innerCSG);
const mPipe = pipeCSG.toMesh("mPipe", null, scene);
mPipe.parent = camera;
mPipe.rotation.x = 90;
mPipe.scaling.x = 0.02;
mPipe.scaling.y = 0.02;
mPipe.scaling.z = 0.02;
mPipe.material = new BABYLON.StandardMaterial("texture", scene);
mPipe.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI");
var rect1 = new BABYLON.GUI.Rectangle("hotspotLabel");
rect1.width = 0.5;
rect1.height = "40px";
rect1.color = "white";
rect1.thickness = 0;
//rect1.background = "black";
advancedTexture.addControl(rect1);
var label = new BABYLON.GUI.TextBlock();
label.text = "Pick Up";
rect1.addControl(label);
//var hotspot = scene.getMeshByName("Hotspot");
rect1.linkWithMesh(mPipe);
rect1.linkOffsetY = 30;
//delete spheres
scene.getMeshByName("sphere").dispose();
scene.getMeshByName("sphere").dispose();
hotSpotRing = true;
defaultRing = false;
}
//console.log('Switch From DefaultRing to Hotspot Ring');
if( (hotspotClicked == true) && (hotspotFired == false) ) {
//Change Actions Based on Mesh Picked
console.log('Cube?')
}
}
//*****************************END INTERACTION ACTIONS ********************************************************* */
//Camera Ray Left Hostpot Area
if( (inHotspot == false) && (hotSpotRing == true) ) {
//bonus: remove only the hotspotLabel from the UI
//scene.textures[3]._linkedControls[0].dispose()
scene.getTextureByName('GUI').dispose();
scene.getMeshByName("mPipe").dispose();
//scene.getMeshByName("but1").dispose();
var camera = scene.activeCamera;
d = BABYLON.MeshBuilder.CreateDisc("disc", { radius: .01 }, scene);
d.parent = camera;
d.position.z = 2;
d.renderingGroup = 3;
d.material = new BABYLON.StandardMaterial("texture", scene);
d.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
hotspotFired = false;
hotSpotRing = false;
defaultRing = true;
}
hotspotClicked = false;
inHotspot = false;
}
function checkPosition(scene) {
z_pos = scene.activeCamera.position.z;
//console.log(loadFlag);
if(loadFlag == 1) {
if(fireFlag2 == 0) {
resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model2.glb", scene);
fireFlag2 = 1;
}
else {
resultPromise.then((result) => {
loadFlag = 2;
//updateTextures(scene);
//updateMaterials(scene);
//Set Collisions
//scene.getMeshById('Collider').checkCollisions = true;
//Load Shaders
//var pulseRingMat = scene.getMaterialByName('ringPulse');
//var pulse_anim = scene.getMeshByName('pulse_animation');
//fix scaling
//pulse_anim.scaling.x = 0.5;
//pulse_anim.scaling.y = 0.5;
//pulse_anim.scaling.z = 0.5;
//pulse_anim.material = pulseRingMat;
//pulse_anim.visibility = 0;
console.log("2 done");
//alert("loaded 2 tile");
});
}
}
if(loadFlag == 2) {
if(fireFlag3 == 0) {
resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model3.glb", scene);
fireFlag3 = 1;
}
else {
resultPromise.then((result) => {
loadFlag = 3;
//updateTextures(scene);
//updateMaterials(scene);
console.log("3 done");
//alert("loaded 2 tile");
});
}
}
if(loadFlag == 3) {
if(fireFlag4 == 0) {
resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model4.glb", scene);
fireFlag4 = 1;
}
else {
resultPromise.then((result) => {
loadFlag = 99999;
updateTextures(scene);
updateMaterials(scene);
console.log("4 done");
//Hide Loading Screen
//document.getElementById('loading').style.display='none';
//alert("loaded 2 tile");
});
}
}
if(loadFlag == 4) {
if(fireFlag5 == 0) {
resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model5.glb", scene);
fireFlag5 = 1;
}
else {
resultPromise.then((result) => {
loadFlag = 999999;
updateTextures(scene);
updateMaterials(scene);
console.log("5 done");
//Colliders
scene.getMeshById('main_collider').checkCollisions = true;
document.getElementById('loading').style.display='none';
});
}
}
if(loadFlag == 5) {
if(fireFlag6 == 0) {
resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model6.glb", scene);
fireFlag6 = 1;
}
else {
resultPromise.then((result) => {
loadFlag = 6;
updateTextures(scene);
//updateMaterials(scene);
console.log("6 done");
//alert("loaded 2 tile");
});
}
}
}
</script>
</body>
<!-- 2024 VISUALBROWSER *ALL RIGHTS RESERVED -->
</html>