zhouenguang
/
PrimordialUniverse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
							<!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;
          position: fixed; left: 0px; top: 0px; z-index: -1000; width: 300px; height: 300px;
        }

        @media screen and (orientation: portrait){
          #renderCanvas{  
            position:absolute;
            width: 100vh;
            height: 100vw;
            top: 0;
            left: 100vw;
            -webkit-transform:rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform:rotate(90deg);
            transform-origin: 0% 0%;
          }  
        }
        @media screen and (orientation: landscape) {
          #renderCanvas {
            position:absolute;
            top:0;
            left:0;
            width: 100vw;
            height: 100vh;
          }
        }
      </style>
    </head>
    <body>
      <video
        id="testVideoFeed"
        crossorigin="anonymous"
        playsinline
        muted
        style="
          position: fixed;
          width: 600px;
          height: 600px;
          z-index: -10000;
          top: 0;
          left: 0;
        "
      ></video>
      <div id="mask" style="
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 10000;
        top: 0;
        left: 0;
      ">
        <button id = "enterBtn">点击进入</button>
      </div>
      <canvas id="renderCanvas"></canvas>

      <div id="videoTextureBox">
        <video 
          id="houseTexture0" 
          src="" 
          crossorigin="anonymous" 
          playsinline="true" 
          x5-playsinline="true" 
          webkit-playsinline="true" 
          x5-video-player-type="h5" 
          controls="true" 
          loop 
          muted 
        ></video>
        <video
          id="houseTexture"
          src=""
          crossorigin="anonymous"
          preload="auto"
          playsinline="true" 
          muted
          loop
        ></video>
        <video
          id="houseTextureReverse"
          src=""
          crossorigin="anonymous"
          preload="auto"
          playsinline="true" 
          muted
          loop
        ></video>
      </div>

      <!-- Babylon.js -->
      <script src="./libs/jquery-1.10.2.min.js"></script>
      <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 src="./libs/socket.2.3.js"></script>
      <script src="./webrtc//adapter-7.4.0.min.js"></script>
      <script src="./webrtc/srs.sdk.js"></script>

      <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
      <script>
          // init vConsole
          var vConsole = new VConsole();
          console.log('Hello world');
      </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;
        };

        document.getElementById("enterBtn").onclick = async() => {
          initFunction().then(() => {
            sceneToRender = scene;
          });
        }

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

      <!-- worker -->
      <!-- <script src="./worker/decoderWorker.js"></script> -->
      <script src="./worker/index.js" type="module"></script>
      <script type="module" src="./webrtc/srs.js"></script>
    </body>
    <!-- <script src="https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/dist/trtc.js"></script> -->
  </html>
</html>