How to deploy babylon.js and vite framework on a server

Questions
1

hello guys i run a test project and i want to deploy this for demo but the server not found glb file could you help me please?

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Babylon Template</title>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <!-- <link rel="stylesheet" href="./min3.js"> -->

    
    <style>
        body{
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            background-color: #33334C;
        }

        .img::before{
            background-image: url("/assets/tick-6f226d30.svg");
            background-position: 30%;
            background-repeat: no-repeat;
            background-size: 60%;
            content:"";
            display: block;
            height: 100%;
            position: absolute;
            width: 100%;
            top: 0;
            left: 6%;
            box-sizing: border-box;
        }
        /* @media (width:){
            body:{
                display: flex;
                justify-content: center;
                align-items: center;
            }

        } */
    </style>
  <script type="module" crossorigin src="/assets/index-6633193c.js"></script>
</head>

    <canvas id="renderCanvas"></canvas>
</div>
<div style="position: relative; display: flex; flex-direction: column; justify-content: center;align-items: start;flex-wrap: wrap; width: 50%; left:30px">
    <h1 style="top:20px; right: 20px;  color: darkgray; align-self: flex-start;  border-bottom:1px solid #c7c7c7; padding-bottom: 30px;">SlidingDoor</h1>
    <h5 style="color:#bdbdbd ">Wood Finishes</h5>

    <ul style="background: transparent; margin:0; padding: 0; display: flex;  list-style: none;">
        <li id="Tex1" class="door " name="door1" style="color: #969292; position: relative; margin-right: 10px; border: 2px solid #bdbdbd; padding: 4px; border-radius: 50%; width: 40px; height: 40px;"><img class="" style="width: 100%; height: 100%; border-radius: 50%;" src="/assets/Tex1-010fa5da.jpg"></li>
        <li id="Tex2" class="door " name="door2" style="color: #969292; position: relative; margin-right: 10px; border: 2px solid #bdbdbd; padding: 4px; border-radius: 50%; width: 40px; height: 40px;"> <img class="" style="width: 100%; height: 100%; border-radius: 50%;" src="/assets/Tex2-f5a3b171.jpg"></li>

    </ul>
    <h5 style="color:#bdbdbd ">Sliding Door Models</h5>

    <ul style="background: transparent; margin:0; padding: 0; display: flex;  list-style: none;">
        <li id="test" class="door " style="color: #969292; position: relative; margin-right: 10px; border: 2px solid #bdbdbd; padding: 4px;  width: 40px; height: 40px;"> <img class="" style="width: 100%; height: 100%; " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAACYVBMVEVHcEx9fX0AAAAAAAAAAAAvLi4AAAAAAAAAAAAAAAC2trcWFhYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUFBQAAAA6OjuampoiIiIAAADa2tsAAACKiooAAAAAAAAAAAAAAAAAAACJiYoAAAD+/v7a29sAAAAAAAAAAAAAAAAAAAAAAABQUFDu7u4AAAD////6+vr///8AAAAAAAD+/v7///8AAAD///8AAAD///8AAAAAAAAAAAAEBAQEBAQAAAD////////////+/v7+/v4AAAD///////////8BAQD////+/v7///////////////////8AAAD///8AAAD///////8AAAD///////////////////8AAAAAAAAAAAD///+kpKT///////////8AAAD///////8AAAAAAAA2NjcAAAAAAAAAAAD///////8AAAAAAAAAAAD///////8KCgr///////8AAAD///////8AAAAAAAD///9iYmLa2tr///////92dnYrKysAAAAAAACampv///////8AAAD///+6u7s9PT7CwsL////KyspBQUHT09M5OjqsrK0rKyvX2Nh3eHj////Z2doAAADa2toAAAD////p6en////l5eV6e3vPz9AxMTFycnItLS3Ly8y4uLiGhoYkJCQjIyMeHh4AAADQ0NBISEhWVlcGBgYVFRVoaGi0tLXx8fL////5+fmfn6De3t7w8PH////8/Pz4+Pjz8/OdnZ2wsLHBwcH19fWjpKSqqqqmpqaenp66uruWl5fr6+uHh4fd3t6foKFZ/oEwAAAAs3RSTlMAx08IBxVcfwET/FxzG0MJcZQteWUBOn+gOmv5L+kEA2FkOOkzAfkaSFt9cHLE/gL9BM6GSw4tZ/du6AWBdg9dC9LV5RsKDbvyGD1ff/r7SB4yHe0m9Nh7KoJBZJwhV5cCAaWJXJMIw4qOgDBAEQd5NBeiv6htmGkUSqJGUrfu90Thx5uduZ8S2zKwfH+WPbN5zH5eceFBPurA8tFY/ovX+fnM2H/hzTg6Olqs/sSzrmGw+2+Zh8MAAAUYSURBVHja7dmHd1JnHMbxtwTLTZsEE6JtSQJRSoalBUJCRCHDGLNwJbHORONoXVh3jXvbvffee4vWE0xMavdfVQhTY8AI954ezvfhwHnve+/hPffD+3vfew5CJMRYr7mbJKRxy9NishjLZ0uCxGOY9WAyLIDAAgsssMACCyCwwAILLLDAAggssMACCyywAALr/4clKfxvR2i8GfJFSo5lLXfo04jL4ZmeIhaLJfR5Y9+EtiXpV8Qabt2B1156bvv2V+6TI5/NceldW4om/6n27ChNI51v71UVKJYj7nf1pW+8+uzzL778+lvvnDhRUVFSUhJ6T8j4iYqb+4I9FbHTsctixx9/9ElnaWmRNunMTiOHHMV5PkmhGGrdnirrDLPZXrdw1Ztdqw8fqznVvthms/kzktGxkdPTJBkXllzNon6dT5n1Sq1auae6Knov5qBZa4fz5HtPrNvXfKpncdpWgbGR0bumyXkDuRq1+qjukBLLvPqoJ1eKY0Vjtu+q61h1cq334LEF89rn3vEsC1y/HrgkO5YwqDSVClhVTw/O4IlYsYRq84WuTRvbmufNnXplXvptLOBXAEsYqtzdcs8tbbm+QSTFihSnvXXh8qWbvRsfX9DSvmQKVpcDfkWwhKHA0SevVlN9fZO4DaxYbbbWdTgHn1y9bt+jodpMNdOGRoZH/QphCePOrb1yai1yzQpv6LeJFd0CzLsuLHOuWbtpf1tzy4rJ59nQH79f9SuGJayztxVZZXtm8OU15ogpY8XRNtjrli0f3Ow9HKzNW+ybQ9eGL/oVxBLW3etdxTKlfmt/ZJQ7woqabbA/dqHDuTRYm23h2oxZ/XnFryiWkFZ6ZsoU1bYmkT5WwoI2Xpsf7A/vm0PX/v7LrzCWyFPJtGpJ+ZqcTGKFMjAgBkL75mCX94tPP2xZYVMcS65BErAaDzyQ0Xz91TdnvnSu6fIefKamx5ZtWMfLTGXxmEzBI9N4o+zGmMLnEi+NXBXpN5nCjeOf14TzVM+SLMO6956Lmc3Vf/9JeDQFK3ku/woWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFViosSZ4xpMrsw9Lt1ckUR2HWYVn0RTJlpyPrsB6SqwxF5ZwsxBJggQUWWGCBBVZ2YlmNVkmEXmClxLJ2VqsKtDsqa/sksFLOrF6Vvrhpd/6Rbp7gU2Pld9bWanu7ZxrSxnI3aCPx9GtlSp/bF23+9MuVDGf4u0dief/0rbCM6pwcq2H+/LR/dN/Z9YWRnPu2UKacPRcb5Mefz9+f0Zz/4fuH4znTcPMN/gcZAQh76GapYAAAAABJRU5ErkJggg=="></li>
        <li id="test1" class="door " style="color: #969292; position: relative; margin-right: 10px; border: 2px solid #bdbdbd; padding: 4px; width: 40px; height: 40px;"> <img class="" style="width: 100%; height: 100%; " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAACYVBMVEVHcEx9fX0AAAAAAAAAAAAvLi4AAAAAAAAAAAAAAAC2trcWFhYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUFBQAAAA6OjuampoiIiIAAADa2tsAAACKiooAAAAAAAAAAAAAAAAAAACJiYoAAAD+/v7a29sAAAAAAAAAAAAAAAAAAAAAAABQUFDu7u4AAAD////6+vr///8AAAAAAAD+/v7///8AAAD///8AAAD///8AAAAAAAAAAAAEBAQEBAQAAAD////////////+/v7+/v4AAAD///////////8BAQD////+/v7///////////////////8AAAD///8AAAD///////8AAAD///////////////////8AAAAAAAAAAAD///+kpKT///////////8AAAD///////8AAAAAAAA2NjcAAAAAAAAAAAD///////8AAAAAAAAAAAD///////8KCgr///////8AAAD///////8AAAAAAAD///9iYmLa2tr///////92dnYrKysAAAAAAACampv///////8AAAD///+6u7s9PT7CwsL////KyspBQUHT09M5OjqsrK0rKyvX2Nh3eHj////Z2doAAADa2toAAAD////p6en////l5eV6e3vPz9AxMTFycnItLS3Ly8y4uLiGhoYkJCQjIyMeHh4AAADQ0NBISEhWVlcGBgYVFRVoaGi0tLXx8fL////5+fmfn6De3t7w8PH////8/Pz4+Pjz8/OdnZ2wsLHBwcH19fWjpKSqqqqmpqaenp66uruWl5fr6+uHh4fd3t6foKFZ/oEwAAAAs3RSTlMAx08IBxVcfwET/FxzG0MJcZQteWUBOn+gOmv5L+kEA2FkOOkzAfkaSFt9cHLE/gL9BM6GSw4tZ/du6AWBdg9dC9LV5RsKDbvyGD1ff/r7SB4yHe0m9Nh7KoJBZJwhV5cCAaWJXJMIw4qOgDBAEQd5NBeiv6htmGkUSqJGUrfu90Thx5uduZ8S2zKwfH+WPbN5zH5eceFBPurA8tFY/ovX+fnM2H/hzTg6Olqs/sSzrmGw+2+Zh8MAAAUYSURBVHja7dmHd1JnHMbxtwTLTZsEE6JtSQJRSoalBUJCRCHDGLNwJbHORONoXVh3jXvbvffee4vWE0xMavdfVQhTY8AI954ezvfhwHnve+/hPffD+3vfew5CJMRYr7mbJKRxy9NishjLZ0uCxGOY9WAyLIDAAgsssMACCyCwwAILLLDAAggssMACCyywAALr/4clKfxvR2i8GfJFSo5lLXfo04jL4ZmeIhaLJfR5Y9+EtiXpV8Qabt2B1156bvv2V+6TI5/NceldW4om/6n27ChNI51v71UVKJYj7nf1pW+8+uzzL778+lvvnDhRUVFSUhJ6T8j4iYqb+4I9FbHTsctixx9/9ElnaWmRNunMTiOHHMV5PkmhGGrdnirrDLPZXrdw1Ztdqw8fqznVvthms/kzktGxkdPTJBkXllzNon6dT5n1Sq1auae6Knov5qBZa4fz5HtPrNvXfKpncdpWgbGR0bumyXkDuRq1+qjukBLLvPqoJ1eKY0Vjtu+q61h1cq334LEF89rn3vEsC1y/HrgkO5YwqDSVClhVTw/O4IlYsYRq84WuTRvbmufNnXplXvptLOBXAEsYqtzdcs8tbbm+QSTFihSnvXXh8qWbvRsfX9DSvmQKVpcDfkWwhKHA0SevVlN9fZO4DaxYbbbWdTgHn1y9bt+jodpMNdOGRoZH/QphCePOrb1yai1yzQpv6LeJFd0CzLsuLHOuWbtpf1tzy4rJ59nQH79f9SuGJayztxVZZXtm8OU15ogpY8XRNtjrli0f3Ow9HKzNW+ybQ9eGL/oVxBLW3etdxTKlfmt/ZJQ7woqabbA/dqHDuTRYm23h2oxZ/XnFryiWkFZ6ZsoU1bYmkT5WwoI2Xpsf7A/vm0PX/v7LrzCWyFPJtGpJ+ZqcTGKFMjAgBkL75mCX94tPP2xZYVMcS65BErAaDzyQ0Xz91TdnvnSu6fIefKamx5ZtWMfLTGXxmEzBI9N4o+zGmMLnEi+NXBXpN5nCjeOf14TzVM+SLMO6956Lmc3Vf/9JeDQFK3ku/woWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFFlhggQUWWGCBBRZYYIEFViosSZ4xpMrsw9Lt1ckUR2HWYVn0RTJlpyPrsB6SqwxF5ZwsxBJggQUWWGCBBVZ2YlmNVkmEXmClxLJ2VqsKtDsqa/sksFLOrF6Vvrhpd/6Rbp7gU2Pld9bWanu7ZxrSxnI3aCPx9GtlSp/bF23+9MuVDGf4u0dief/0rbCM6pwcq2H+/LR/dN/Z9YWRnPu2UKacPRcb5Mefz9+f0Zz/4fuH4znTcPMN/gcZAQh76GapYAAAAABJRU5ErkJggg=="></li>

    </ul>
</div>
``` ``` import {

Engine,

Vector3,

HemisphericLight,

} from ‘babylonjs’;
import ‘babylonjs-loaders’;

var canvas = document.getElementById(“renderCanvas”);
var engine = new Engine(canvas,true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera(“Camera”, BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(90), 5, new BABYLON.Vector3(0, 1, -2.2), scene);
camera.attachControl();
var hemiLight = new HemisphericLight(“hemiLight”,new Vector3(0,1,0),scene);
var Light = new HemisphericLight(“Light”,new Vector3(1,1,1),scene);
var light = new HemisphericLight(“light”,new Vector3(0,1,0),scene);
hemiLight.intensity=0.5;
Light.intensity=0.5;
light.intensity=0.7;

console.log(“1”)
load()
async function load(){
var btextu= new BABYLON.StandardMaterial(“btextu”,scene);
btextu.diffuseTexture = new BABYLON.Texture(“./Tex2.jpg”,scene);

console.log(“2”)

var ground = await BABYLON.SceneLoader.ImportMeshAsync(“”,“./”,“Test.glb”, scene);

console.log(“3”)

engine.runRenderLoop(()=>{
engine.runRenderLoop
scene.render();
});
}
// --------------------------------------------------------------------------
// var btextu= new BABYLON.StandardMaterial(“btextu”,scene);
// btextu.diffuseTexture = new BABYLON.Texture(“./Tex2.jpg”,scene);

// console.log(“4”)

// var ground = await BABYLON.SceneLoader.ImportMeshAsync(“”,“./”,“Test.glb”, scene);

// console.log(“5”)

// engine.runRenderLoop(()=>{
// engine.runRenderLoop
// scene.render();
// });
// -----------------------------------------------------------------------------

async function test() {
var btextu= new BABYLON.StandardMaterial(“btextu”,scene);
btextu.diffuseTexture = new BABYLON.Texture(“./Tex1.jpg”,scene);
console.log(“6”)

//ground
var ground = await BABYLON.SceneLoader.ImportMeshAsync("","./","Test.glb", scene);
var ground00 = ground.meshes[10];
var ground01 = ground.meshes[1];
var ground02 = ground.meshes[2];
var ground03 = ground.meshes[3];
var ground04 = ground.meshes[4];
var ground05 = ground.meshes[5];
var ground07 = ground.meshes[7];
var ground08 = ground.meshes[8];
var ground09 = ground.meshes[9];
var ground14 = ground.meshes[14]

console.log(“7”)

ground00.material = btextu;
ground01.material = btextu;
ground02.material = btextu;
ground03.material = btextu;
ground04.material = btextu;
ground05.material = btextu;
ground07.material = btextu;
ground08.material = btextu;
ground09.material = btextu;
ground14.material = btextu;

}
async function test1() {
var btextu= new BABYLON.StandardMaterial(“btextu”,scene);
btextu.diffuseTexture = new BABYLON.Texture(“./Tex2.jpg”,scene);

//ground
var ground = await  BABYLON.SceneLoader.ImportMeshAsync("","./","Test.glb", scene);
var ground00 = ground.meshes[10];
var ground01 = ground.meshes[1];
var ground02 = ground.meshes[2];
var ground05 = ground.meshes[5];
var ground07 = ground.meshes[7];
var ground08 = ground.meshes[8];
var ground09 = ground.meshes[9];
var ground14 = ground.meshes[14];



ground00.material = btextu;
ground01.material = btextu;
ground02.material = btextu;
ground05.material = btextu;
ground07.material = btextu;
ground08.material = btextu;
ground09.material = btextu;
ground14.material = btextu;

}
async function test2() {
// var engine = new Engine(canvas,true);
// var scene = new BABYLON.Scene(engine);
scene.dispose();
scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera(“Camera”, BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(90), 5, new BABYLON.Vector3(0, 1, -2.2), scene);
camera.attachControl();
var hemiLight = new HemisphericLight(“hemiLight”,new Vector3(0,1,0),scene);
var Light = new HemisphericLight(“Light”,new Vector3(1,1,1),scene);
var light = new HemisphericLight(“light”,new Vector3(0,1,0),scene);
hemiLight.intensity=0.5;
Light.intensity=0.5;
light.intensity=0.7;
console.log(“8”)

var ground = await BABYLON.SceneLoader.ImportMeshAsync(“”,“./”,“Test.glb”, scene)
console.log(“9”)

}
async function test3 (){

var ground = await BABYLON.SceneLoader.ImportMeshAsync(“”,“./”,“Test1.glb”, scene);

}

document.getElementById(“Tex1”).addEventListener(‘click’,function(e){
test();

})
document.getElementById(“Tex2”).addEventListener(‘click’,function(){
test1();
})
document.getElementById(“test”).addEventListener(‘click’, function(){
test2();
})
document.getElementById(“test1”).addEventListener(‘click’, function(){
test3();
})

2

open the inspector tools of the browser and highlight the network tab , then reload the app and see the path it is trying to load the glb. From that make adjustments to your path in your app , this will require understanding how the asset path is handled by the framework you are using.

2 Likes
3

Some links:

1 Like