Missing files added to sample files
This commit is contained in:
Kurt Nana
parent
b1df83aff0
commit
1ae4fa99d0
BIN
Model/Model.glb
Normal file
BIN
Model/Model.glb
Normal file
Binary file not shown.
755
index.html
Normal file
755
index.html
Normal 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>
|
||||||
107
ran3oek.css
Normal file
107
ran3oek.css
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
/*
|
||||||
|
* The Typekit service used to deliver this font or fonts for use on websites
|
||||||
|
* is provided by Adobe and is subject to these Terms of Use
|
||||||
|
* http://www.adobe.com/products/eulas/tou_typekit. For font license
|
||||||
|
* information, see the list below.
|
||||||
|
*
|
||||||
|
* ff-real-headline-pro:
|
||||||
|
* - http://typekit.com/eulas/00000000000000007735a6f2
|
||||||
|
* - http://typekit.com/eulas/00000000000000007735a6f0
|
||||||
|
* - http://typekit.com/eulas/00000000000000007735a6f5
|
||||||
|
* - http://typekit.com/eulas/00000000000000007735a6f7
|
||||||
|
* ff-real-text-pro:
|
||||||
|
* - http://typekit.com/eulas/00000000000000007735a6ee
|
||||||
|
* - http://typekit.com/eulas/00000000000000007735a6fa
|
||||||
|
* - http://typekit.com/eulas/00000000000000007735a704
|
||||||
|
* - http://typekit.com/eulas/00000000000000007735a710
|
||||||
|
*
|
||||||
|
* © 2009-2023 Adobe Systems Incorporated. All Rights Reserved.
|
||||||
|
*/
|
||||||
|
/*{"last_published":"2023-06-15 14:29:28 UTC"}*/
|
||||||
|
@import url("https://p.typekit.net/p.css?s=1&k=ran3oek&ht=tk&f=26424.26425.26426.26427.26438.26440.26445.35629&a=84244497&app=typekit&e=css"); @font-face {
|
||||||
|
font-family: "ff-real-headline-pro";
|
||||||
|
src: url("https://use.typekit.net/af/9c115f/00000000000000007735a6f2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/9c115f/00000000000000007735a6f2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/9c115f/00000000000000007735a6f2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "ff-real-headline-pro";
|
||||||
|
src: url("https://use.typekit.net/af/34a089/00000000000000007735a6f0/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/34a089/00000000000000007735a6f0/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/34a089/00000000000000007735a6f0/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "ff-real-headline-pro";
|
||||||
|
src: url("https://use.typekit.net/af/12c3c7/00000000000000007735a6f5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/12c3c7/00000000000000007735a6f5/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/12c3c7/00000000000000007735a6f5/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "ff-real-headline-pro";
|
||||||
|
src: url("https://use.typekit.net/af/e407f8/00000000000000007735a6f7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/e407f8/00000000000000007735a6f7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/e407f8/00000000000000007735a6f7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "ff-real-text-pro";
|
||||||
|
src: url("https://use.typekit.net/af/fe69ed/00000000000000007735a6ee/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/fe69ed/00000000000000007735a6ee/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/fe69ed/00000000000000007735a6ee/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "ff-real-text-pro";
|
||||||
|
src: url("https://use.typekit.net/af/1b5c8a/00000000000000007735a6fa/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/1b5c8a/00000000000000007735a6fa/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/1b5c8a/00000000000000007735a6fa/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "ff-real-text-pro";
|
||||||
|
src: url("https://use.typekit.net/af/0b9bd1/00000000000000007735a704/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/0b9bd1/00000000000000007735a704/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/0b9bd1/00000000000000007735a704/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "ff-real-text-pro";
|
||||||
|
src: url("https://use.typekit.net/af/a5095c/00000000000000007735a710/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff2"),url("https://use.typekit.net/af/a5095c/00000000000000007735a710/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff"),url("https://use.typekit.net/af/a5095c/00000000000000007735a710/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 300;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tk-ff-real-headline-pro {
|
||||||
|
font-family: "ff-real-headline-pro",sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tk-ff-real-headline-pro-2 {
|
||||||
|
font-family: "ff-real-headline-pro-2",sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tk-ff-real-text-pro {
|
||||||
|
font-family: "ff-real-text-pro",sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tk-ff-real-text-pro-2 {
|
||||||
|
font-family: "ff-real-text-pro-2",sans-serif;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user