755 lines
29 KiB
HTML
755 lines
29 KiB
HTML
<?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> |