zhouenguang
/
PrimordialUniverse


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }

            #videoTextureBox video {
                display: none;
            }
        </style>
    </head>
<body>

    <canvas id="renderCanvas"></canvas>

    <div id = "videoTextureBox">
        <video id="houseTexture0" src="./textures/outputmp4/0/0.mp4" crossOrigin="anonymous" playsinline autoplay muted></video>
    </div>

    <!-- Babylon.js -->
    <script src="./libs/dat.gui.min.js"></script>
    <script src="./libs/ammo.js"></script>
    <script src="./libs/cannon.js"></script>
    <script src="./libs/Oimo.js"></script>
    <script src="./libs/earcut.min.js"></script>
    <script src="./libs/recast.js"></script>
    
    <script src="./libs/babylon.js"></script>
    <script src="./libs/babylonjs.materials.min.js"></script>
    <script src="./libs/babylonjs.proceduralTextures.min.js"></script>
    <script src="./libs/babylonjs.postProcess.min.js"></script>
    <script src="./libs/babylonjs.loaders.js"></script>
    <script src="./libs/babylonjs.serializers.min.js"></script>
    <script src="./libs/babylon.gui.min.js"></script>
    <script src="./libs/babylon.inspector.bundle.js"></script>

    <script type="module">

        import App from "./modules/index.js"

        var canvas = document.getElementById("renderCanvas");

        var engine = null;
        var scene = null;
        var sceneToRender = null;

        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }

        var createDefaultEngine = function() { 
            return new BABYLON.Engine(canvas, true, { 
                preserveDrawingBuffer: true,
                stencil: true,  
                disableWebGL2Support: false
            }); 
        };

        var asyncEngineCreation = async function() {
            try {
                return createDefaultEngine();
            } catch(e) {
                console.log("the available createEngine function failed. Creating the default engine instead");
                return createDefaultEngine();
            }
        }
        

        window.initFunction = async function() {

            engine = await asyncEngineCreation();

            if (!engine) throw 'engine should not be null.';
            startRenderLoop(engine, canvas);

            engine.enableOfflineSupport = false;
        
            // Scene and Camera
            window.app = new App(engine)
            scene = window.app.scene

        };

        initFunction().then(() => {sceneToRender = scene});


        window.scene = scene;
        window.engine = engine
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });


    </script>
</body>
</html>