4dScene
/
mergeDemo1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Tiles Loader: RealityCapture</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    #canvas-parent {
      width: 100vw;
      height: 100vh;
      touch-action: none;
    }
    #guide {
      position: fixed;
      top: 0;
      right: 0;
      width: 300px;
      padding: 1rem 2rem;
      font-family:'Courier New', Courier, monospace;
      line-height: 1.2;
      background-color: white;
      color: black;
    }

    #guide p {
      margin-top: 10px;
    }

    #stats-widget {
      position: absolute;
      top: 70px;
      left: 10px;
      background-color: rgb(255 255 255 / 83%);
      padding: 10px;
      width: 300px;
      word-break: break-all;
      visibility: hidden;
    }
    #button {
      position: fixed;
      bottom: 16px;
      right: 16px;
      padding: 12px;
      border-radius: 50%;
      margin-bottom: 0px;
      background-color: #FFF;
      opacity: .9;
      z-index: 999;
      box-shadow: 0 0 4px rgb(0 0 0 / 15%);
    }
    @media (max-width:480px) {
      #guide, #stats-widget { display: none; }
    }
  </style>
</head>
<body>
  <div id='canvas-parent'></div>
  <div id="stats-widget"></div>

  <div id="guide">
    <span id="example-desc">
      <b>Freeman Alley, New York.</b> Captured using iPhone 12 Pro Max and processed via RealityCapture.
    </span>
    <p>Use arrow/WASD keys or mouse wheel/trackpad to move around, and click and drag to turn/rotate the camera.</p>
    <p>
      <u>Available URL parameters:</u>
      <ul>
        <li><b>tilesetUrl</b>: Load another tileset json.</li>
        <li><b>sse</b>: Change the maximum screen space error.</li>
      </ul>
    </p>
  </div>
  
  <script async src="https://ga.jspm.io/npm:es-module-shims@1.4.4/dist/es-module-shims.js"></script>

  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.skypack.dev/three@0.137.0",
        "three/examples/jsm/loaders/GLTFLoader.js": "https://cdn.skypack.dev/three@v0.137.0/examples/jsm/loaders/GLTFLoader",
        "three/examples/jsm/loaders/DRACOLoader.js": "https://cdn.skypack.dev/three@v0.137.0/examples/jsm/loaders/DRACOLoader",
        "three/examples/jsm/loaders/KTX2Loader.js": "https://cdn.skypack.dev/three@v0.137.0/examples/jsm/loaders/KTX2Loader",
        "three/examples/jsm/libs/stats.module.js": "https://cdn.skypack.dev/three@v0.137.0/examples/jsm/libs/stats.module",
        "three/examples/jsm/controls/OrbitControls": "https://cdn.skypack.dev/three@v0.137.0/examples/jsm/controls/OrbitControls",
        "@probe.gl/stats" : "https://cdn.skypack.dev/@probe.gl/stats@3.3.1",
        "@probe.gl/stats-widget" : "https://cdn.skypack.dev/@probe.gl/stats-widget@3.5.0",
        "three-loader-3dtiles" : "../../../dist/three-loader-3dtiles.esm.js",
        "gsap": "https://cdn.skypack.dev/gsap@3.6.1",
        "three-story-controls" : "https://cdn.skypack.dev/three-story-controls@1.0.0"
      }
    }
  </script>

  <script src="js/App.js" type='module'></script>

  <a id="button" target="_blank" href="https://github.com/nytimes/three-loader-3dtiles/blob/master/examples/demos/realitycapture/index.html" title="View source code for demo" style=""><img src="../ic_code_black_24dp.svg"></a>
</body>
</html>