{"id":2,"date":"2021-05-26T07:08:43","date_gmt":"2021-05-26T07:08:43","guid":{"rendered":"https:\/\/www.ib-caddy.com\/ibwp-ibcaddy-dev\/?page_id=2"},"modified":"2021-12-17T11:55:50","modified_gmt":"2021-12-17T11:55:50","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/sample-page\/","title":{"rendered":"Sample Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-193b5570 elementor-section-items-stretch elementor-section-height-min-height elementor-section-full_width elementor-section-stretched elementor-section-height-default\" data-id=\"193b5570\" data-element_type=\"section\" data-e-type=\"section\" id=\"RenderSection\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5a194ca6\" data-id=\"5a194ca6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6057174b elementor-widget elementor-widget-html\" data-id=\"6057174b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"3dviewer\" style=\"height: 500px;\">\r\n<script src=\"https:\/\/preview.babylonjs.com\/babylon.js\"><\/script>\r\n<script src=\"https:\/\/preview.babylonjs.com\/materialsLibrary\/babylonjs.materials.min.js\"><\/script>\r\n<script src=\"https:\/\/preview.babylonjs.com\/loaders\/babylonjs.loaders.js\"><\/script>\r\n<canvas style=\"height: 500px;\" id =\"canvas\"><\/canvas>\r\n<script>\r\n    MaxDistanceFromGLTF = 600;\r\n    MinDistanceFormGLTF = 100;\r\n    MinRotX = 1 \/ 4 * Math.PI;\r\n    MaxRotX = 3 \/ 4 * Math.PI;\r\n    CameraDistanceFromGLTF = 300;\r\n    CameraRotationLeftRight = 9 * Math.PI \/ 16;\r\n\r\n    var RotateVariantTimer = 5;\r\n    var CurrentVariantIndex =0;\r\n\r\n\r\n    var scene = null;\r\n    var camera = null;\r\n\r\n    \/\/create BabylonJS engine\r\n    var engine = new BABYLON.Engine(canvas, true);\r\n    \r\n    window.addEventListener(\"DOMContentLoaded\", function () {\r\n        \/\/get canvas from HTML\r\n        var canvas = document.getElementById(\"canvas\");\r\n        var renderSection = document.getElementById(\"RenderSection\");\r\n\r\n        BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {\r\n            if (document.getElementById(\"customLoadingScreenDiv\")) {\r\n                \/\/ Do not add a loading screen if there is already one\r\n                document.getElementById(\"customLoadingScreenDiv\").style.display = \"initial\";\r\n                return;\r\n            }\r\n            this._loadingDiv = document.createElement(\"div\");\r\n            this._loadingDiv.id = \"customLoadingScreenDiv\";\r\n            this._loadingDiv.class = \".blink_me\";\r\n            this._loadingDiv.innerHTML = \"Loading...\";\r\n            var customLoadingScreenCss = document.createElement('style');\r\n            customLoadingScreenCss.type = 'text\/css';\r\n            customLoadingScreenCss.innerHTML = `\r\n                .blink_me {\r\n                    animation: blinker 1s linear infinite;\r\n                }\r\n\r\n                @keyframes blinker {\r\n                    50% {\r\n                        opacity: 0;\r\n                    }\r\n                }\r\n                #customLoadingScreenDiv{\r\n                    background-color: transparent;\r\n                    padding-top: 80px;\r\n                    color: white;\r\n                    font-size:50px;\r\n                    text-align: center;\r\n                    z-index: 1;\r\n                    animation: blinker 1s linear infinite;\r\n                }\r\n                `;\r\n            document.getElementsByTagName('head')[0].appendChild(customLoadingScreenCss);\r\n            this._resizeLoadingUI();\r\n            \/\/window.addEventListener(\"resize\", this._resizeLoadingUI);\r\n            document.body.appendChild(this._loadingDiv);\r\n        };\r\n\r\n        BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {\r\n            var loadingDiv = document.getElementById(\"customLoadingScreenDiv\");\r\n            loadingDiv.style.display = \"none\";\r\n        }\r\n\r\n        var variants = document.getElementById(\"Variants\");\r\n\r\n        \/* let Vijola = document.getElementById(\"Vijola\");\r\n        Vijola.onclick = function()\r\n        {\r\n            if (event)\r\n            {\r\n                event.preventDefault();\r\n            }\r\n            var rootNode = scene.getMeshByName(\"__root__\");\r\n            var variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(rootNode);\r\n            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(rootNode,variants[4]);\r\n        }\r\n        let Modra = document.getElementById(\"Modra\");\r\n        Modra.onclick = function()\r\n        {\r\n            event.preventDefault();\r\n            var rootNode = scene.getMeshByName(\"__root__\");\r\n            var variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(rootNode);\r\n            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(rootNode,variants[2]);\r\n        }\r\n        let Rdeca = document.getElementById(\"Rdeca\");\r\n        Rdeca.onclick = function()\r\n        {\r\n            event.preventDefault();\r\n            var rootNode = scene.getMeshByName(\"__root__\");\r\n            var variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(rootNode);\r\n            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(rootNode,variants[5]);\r\n        }\r\n        let Rumena = document.getElementById(\"Rumena\");\r\n        Rumena.onclick = function()\r\n        {\r\n            event.preventDefault();\r\n            var rootNode = scene.getMeshByName(\"__root__\");\r\n            var variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(rootNode);\r\n            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(rootNode,variants[1]);\r\n        }\r\n        let Oranzna = document.getElementById(\"Oranzna\");\r\n        Oranzna.onclick = function()\r\n        {\r\n            event.preventDefault();\r\n            var rootNode = scene.getMeshByName(\"__root__\");\r\n            var variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(rootNode);\r\n            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(rootNode,variants[0]);\r\n        }\r\n        let Bela = document.getElementById(\"Bela\");\r\n        Bela.onclick = function()\r\n        {\r\n            event.preventDefault();\r\n            var rootNode = scene.getMeshByName(\"__root__\");\r\n            var variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(rootNode);\r\n            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(rootNode,variants[3]);\r\n        }\r\n        \r\n        var Holmatro = document.getElementById(\"Holmatro\");\r\n        var Nemo = document.getElementById(\"Nemo\")\r\n        \r\n        Holmatro.onclick = function()\r\n        {\r\n            Nemo.disabled=false;\r\n            Holmatro.disabled=true;\r\n            event.preventDefault();\r\n            variants.style.display = \"none\";\r\n            loadModel(\"models\/holmatro.glb\",\"environments\/Factory_Pipes.env\",\"environments\/Factory_Pipes.env\",null,false)\r\n        };\r\n        Nemo.onclick = function()\r\n        {\r\n            Nemo.disabled=true;\r\n            Holmatro.disabled=false;\r\n            event.preventDefault();\r\n            variants.style.display = \"block\";\r\n            loadModel(\"https:\/\/3dagency.ib-caddy.com\/models\/podmornica-variante.glb\",\"environments\/underwater-08l.env\",\"environments\/underwater-08l.env\",4,true)\r\n        };*\/\r\n\r\n        var loadModel = function (modelpath, hdrtexturepath, cubemappath,defaultVariant,cycleVariants)\r\n        {\r\n            if (scene)\r\n                scene.dispose();\r\n            \r\n            scene = createScene();\r\n\r\n            if(cycleVariants)\r\n            {\r\n                scene.onBeforeRenderObservable.add((thisScene, state) => {\r\n                if (!thisScene.deltaTime) return;\r\n                RotateVariantTimer -= (thisScene.deltaTime \/ 1000);\r\n                if (RotateVariantTimer <= 0) {\r\n                    ChangeVariant()\r\n                    RotateVariantTimer = 5;\r\n                }\r\n                });\r\n            }\r\n\r\n            var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData(cubemappath, scene);\r\n            hdrTexture.gammaSpace = true;\r\n            hdrTexture.level = 0.5;\r\n            scene.environmentTexture = hdrTexture;\r\n            \r\n            \/\/ Skybox\r\n            var box = BABYLON.Mesh.CreateBox('SkyBox', 10000, scene, false, BABYLON.Mesh.BACKSIDE);\r\n            \r\n            var skyboxMaterial = new BABYLON.StandardMaterial(\"skyBox\", scene);\r\n            skyboxMaterial.backFaceCulling = false;\r\n            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(hdrtexturepath, scene);\r\n            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;\r\n            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);\r\n            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);\r\n            box.material = skyboxMaterial; \/\/new BABYLON.SkyMaterial('sky', scene);\r\n            \r\n            model = BABYLON.SceneLoader.ImportMeshAsync(\"\", modelpath).then((result) => {\r\n                maxVector = new BABYLON.Vector3(-Number.MAX_VALUE, -Number.MAX_VALUE, -Number.MAX_VALUE);\r\n                minVector = new BABYLON.Vector3(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);\r\n                i = 0;\r\n                for (i; i < result.meshes.length; i++) {\r\n                    GLTFmeshVectorMin = result.meshes[i].getBoundingInfo().boundingBox.minimumWorld;\r\n                    GLTFmeshVectorMax = result.meshes[i].getBoundingInfo().boundingBox.maximumWorld;\r\n                    if (GLTFmeshVectorMin.x < minVector.x)\r\n                        minVector.x = GLTFmeshVectorMin.x\r\n                    if (GLTFmeshVectorMin.y < minVector.y)\r\n                        minVector.y = GLTFmeshVectorMin.y\r\n                    if (GLTFmeshVectorMin.z < minVector.z)\r\n                        minVector.z = GLTFmeshVectorMin.z\r\n                    if (GLTFmeshVectorMax.x > maxVector.x)\r\n                        maxVector.x = GLTFmeshVectorMax.x\r\n                    if (GLTFmeshVectorMax.y > maxVector.y)\r\n                        maxVector.y = GLTFmeshVectorMax.y\r\n                    if (GLTFmeshVectorMax.z > maxVector.z)\r\n                        maxVector.z = GLTFmeshVectorMax.z\r\n                }\r\n                var minMaxVector = maxVector.subtract(minVector)\r\n                var center = minVector.add(minMaxVector.scale(0.5));\r\n                camera.setTarget(center); \/\/ Find center & set target\r\n                camera.radius = 400;\r\n                camera.upperRadiusLimit = 600;\r\n                camera.lowerRadiusLimit = 100;\r\n\r\n                \/\/vijola is default\r\n                if(defaultVariant!=null)\r\n                {\r\n                    var rootNode = scene.getMeshByName(\"__root__\");\r\n                    var variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(rootNode);\r\n                    BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(rootNode,variants[defaultVariant]);\r\n                }\r\n                engine.hideLoadingUI();\r\n            });\r\n        }\r\n\r\n        var ChangeVariant = function()\r\n        {\r\n            CurrentVariantIndex++\r\n            var rootNode = scene.getMeshByName(\"__root__\");\r\n            var variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(rootNode);\r\n            if(CurrentVariantIndex >variants.length)\r\n            CurrentVariantIndex=0;\r\n            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(rootNode,variants[CurrentVariantIndex]);\r\n            console.log(CurrentVariantIndex);\r\n        }\r\n\r\n\r\n\r\n\r\n        var createScene = function () {\r\n            \r\n            engine.displayLoadingUI();\r\n            \r\n            var scene = new BABYLON.Scene(engine);\r\n\r\n            camera = new BABYLON.ArcRotateCamera(\"Camera\", 0, -10, 0, new BABYLON.Vector3(0, 0, 0), scene)\r\n            camera.upperRadiusLimit = MaxDistanceFromGLTF;\r\n            camera.lowerRadiusLimit = MinDistanceFormGLTF;\r\n            camera.radius = CameraDistanceFromGLTF\r\n            camera.alpha = CameraRotationLeftRight;\r\n            camera.lowerBetaLimit = MinRotX;\r\n            camera.upperBetaLimit = MaxRotX;\r\n            \/\/set camera start look position\r\n            camera.attachControl(canvas);\r\n\r\n            \/\/create light\r\n            \/\/var light = new BABYLON.HemisphericLight(\"light\", new BABYLON.Vector3(0, 10, -5), scene);\r\n            \/\/light.intensity = 1.5;\r\n\r\n            var postProcess = new BABYLON.FxaaPostProcess(\"fxaa\", 1.0, camera);\r\n\r\n            return scene;\r\n        }\r\n        \r\n        \/\/scene = createScene();\r\n        canvas.height = renderSection.clientHeight;\r\n        canvas.width = renderSection.clientWidth;\r\n        \r\n        \/\/nemo is default\r\n        \/\/Nemo.onclick();\r\n            loadModel(\"\/ibwp-ibcaddy-dev\/wp-content\/uploads\/ibcaddy\/3dviewer\/podmornica-variante.glb\",\"\/ibwp-ibcaddy-dev\/wp-content\/uploads\/ibcaddy\/3dviewer\/underwater-08l.env\",\"\/ibwp-ibcaddy-dev\/wp-content\/uploads\/ibcaddy\/3dviewer\/underwater-08l.env\",4,true)\r\n\r\n\r\n       \r\n\r\n        engine.runRenderLoop(function () {\r\n            scene.render();\r\n        });\r\n        \/*\r\n        window.addEventListener(\"resize\", function () {\r\n            canvas.height = renderSection.clientHeight;\r\n            canvas.width = renderSection.clientWidth;\r\n            engine.resize();\r\n        });\r\n        *\/\r\n    });\r\n<\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":16,"href":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":724,"href":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/wp-json\/wp\/v2\/pages\/2\/revisions\/724"}],"wp:attachment":[{"href":"https:\/\/www.ib-caddy.com\/hr-bih-sr-cg\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}