usd-viewer/index.html at main · coryrylan/usd-viewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html lang="en" nve-theme="root dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="usd-viewer:wasm" content="wasm" />
    <link rel="prefetch" href="usd/perseverance.usdz" />
    <title>usd-viewer — interactive</title>
  </head>
  <body>
    <nve-page>
      <nve-page-header slot="header">
        <nve-icon-button
          slot="prefix"
          size="sm"
          icon-name="menu"
          commandfor="settings-panel"
          command="--toggle"
          aria-label="toggle settings"
          container="flat"
        ></nve-icon-button>
        <h1 slot="prefix" nve-text="heading">usd-viewer</h1>
        <nve-button container="flat"><a href="/" nve-text="body">Interactive</a></nve-button>
        <nve-button container="flat"><a href="/multi.html" nve-text="body">Multiple</a></nve-button>
        <nve-button container="flat"><a href="/single.html" nve-text="body" aria-current="page">Single</a></nve-button>
        <a slot="suffix" href="https://github.com/coryrylan/usd-viewer" nve-text="body">GitHub</a>
        <a slot="suffix" href="https://www.npmjs.com/package/usd-viewer" nve-text="body">NPM</a>
      </nve-page-header>

      <nve-page-panel slot="left" size="sm" id="settings-panel">
        <nve-page-panel-content>
          <form id="controls" nve-layout="column gap:lg">
            <nve-select>
              <label>Model</label>
              <select name="src">
                <option value="./usd/perseverance.usdz">Perseverance Mars Rover</option>
                <option value="./usd/ingenuity.usdz">Ingenuity Mars Helicopter</option>
                <option value="./usd/cassini.usdz">Cassini Saturn Orbiter</option>
                <option value="./usd/bell-x1.usdz">Bell X1</option>
              </select>
            </nve-select>

            <nve-range>
              <label>Zoom</label>
              <input type="range" name="zoom" min="0.5" max="1.5" value="1" step="0.01" />
            </nve-range>

            <nve-range>
              <label>Auto-rotate speed</label>
              <input type="range" name="autoRotateSpeed" min="1" max="5" value="1" step="1" />
            </nve-range>

            <nve-switch>
              <label>Auto rotate</label>
              <input type="checkbox" name="autoRotate" checked />
            </nve-switch>

            <nve-switch>
              <label>File name</label>
              <input type="checkbox" name="fileName" checked />
            </nve-switch>

            <nve-switch>
              <label>Dark theme</label>
              <input type="checkbox" name="darkTheme" checked />
            </nve-switch>

            <nve-input>
              <label>Min distance (zoom)</label>
              <input type="number" name="minDistance" value="1" step="0.1" />
            </nve-input>

            <nve-input>
              <label>Max distance (zoom)</label>
              <input type="number" name="maxDistance" value="2" step="0.1" />
            </nve-input>
          </form>
        </nve-page-panel-content>
      </nve-page-panel>

      <main>
        <usd-viewer
          id="viewer"
          src="./usd/perseverance.usdz"
          alt="Perseverance Mars Rover"
          file-name
          auto-rotate
          auto-rotate-speed="1"
        ></usd-viewer>
      </main>
    </nve-page>

    <script type="module" src="/demo/index.ts"></script>
  </body>
</html>