lanxin
/
shiban-model-viewer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
							<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - loaders - gltf</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #container {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
      }
      #sphere {
        width: 100%;
        min-width: 20%;
        height: 100%;
        flex-shrink: 0;
      }
      #sphere2 {
        width: 0;
        height: 100%;
        flex: 1;
        flex-shrink: 0;
      }
      .splitBox {
        width: 1%;
        height: 100%;
        cursor: col-resize;
        align-items: center;
        justify-content: center;
        background-color: #ccc;
        display: none;
      }
      .splitLine {
        width: 6px;
        height: 5%;
        background-color: #428cee;
      }
      .buttonBox {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      #ec-button,
      #strength-button {
        width: 120px;
        height: 45px;
        border-radius: 5px;
        font-size: 18px;
        font-weight: bold;
        z-index: 1000;
        cursor: pointer;
        border: 1px solid #acacac;
        display: none;
      }
      #ec-button:hover,
      #strength-button:hover {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="buttonBox">
        <button id="ec-button">效果对比</button
        ><button id="strength-button">微痕增强</button>
      </div>

      <model-viewer
        id="sphere"
        src="./static/gltf-13/low-13.gltf"
        camera-controls
        
        tone-mapping="aces"
        shadow-intensity="0"
        interaction-prompt="none"
        zoom-sensitivity="2.5"
      >
      </model-viewer>
      <div class="splitBox">
        <div class="splitLine"></div>
      </div>
    </div>
    <!-- <script type="module" src="./mobile.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/TrackballControls.js"
        }
      }
    </script>

    <script type='module' src="./controls.js"></script>
    <script type="module" src="./main.js"></script>
    <script type="module" src="./model-viewer.min.js"></script>
  </body>
</html>