Engine-viewer/index.html at main · Armin-000/Engine-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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>3D Engine Platform Viewer | Interactive Engine GLB Inspection</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta
      name="description"
      content="Professional interactive 3D engine viewer for GLB models. Inspect assemblies with component isolation, hierarchical navigation, labels, exploded view and smooth camera focus — powered by Three.js."
    />
    <meta
      name="keywords"
      content="3D engine viewer, engine GLB, Three.js, WebGL, exploded view, component isolation, technical visualization, GLB viewer, interactive 3D, engineering inspection"
    />
    <meta name="author" content="Your Company / Your Name" />
    <meta name="robots" content="index, follow" />

    <link rel="canonical" href="https://your-domain.com/engine-viewer" />

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="3D Engine Viewer – Interactive GLB Inspection" />
    <meta
      property="og:description"
      content="Explore an engine GLB model in a professional Three.js viewer with exploded views, component focus, labels and hierarchical navigation."
    />
    <meta property="og:url" content="https://your-domain.com/engine-viewer" />
    <meta property="og:image" content="https://your-domain.com/images/og-engine-preview.jpg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="3D Engine Viewer" />
    <meta
      name="twitter:description"
      content="Interactive Three.js-based 3D viewer for engine GLB models with exploded view and component isolation."
    />
    <meta name="twitter:image" content="https://your-domain.com/images/og-engine-preview.jpg" />

    <!-- Favicon (Vite public/) -->
    <link rel="icon" href="/favicon/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon.ico" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon.ico" />
    <link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png" />

    <!-- Performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
      rel="stylesheet"
    />

    <!-- CSS -->
    <link rel="stylesheet" href="css/viewer-base.css" />
    <link rel="stylesheet" href="css/viewer-ui.css" />
    <link rel="stylesheet" href="css/viewer-sidebar.css" />
    <link rel="stylesheet" href="css/viewer-preloader.css" />
  </head>


  <body>
    <div class="theme-menu" id="themeMenu">
      <button
        id="themeToggle"
        class="theme-toggle"
        type="button"
        aria-haspopup="menu"
        aria-expanded="false"
        aria-label="Theme options"
      >
        <svg class="theme-icon" viewBox="0 0 1024 1024" aria-hidden="true" focusable="false">
          <path
            fill="currentColor"
            d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"
          />
        </svg>
      </button>

      <div class="theme-dropdown" id="themeDropdown" role="menu" aria-label="Theme menu">
        <button
          class="theme-item"
          type="button"
          role="menuitem"
          data-theme="dark"
          aria-label="Dark mode"
        ></button>
        <button
          class="theme-item"
          type="button"
          role="menuitem"
          data-theme="light"
          aria-label="Light mode"
        ></button>
      </div>
    </div>

    <div id="viewer" class="mxd-3d-viewer" data-loading="1">
      <h3 id="model-name" class="engine-title"></h3>

      <button
        id="componentToggle"
        class="component-toggle"
        type="button"
        aria-label="Open component list"
      >
        <div class="hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <svg class="toggle-x" viewBox="0 0 24 24" aria-hidden="true">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
          />
        </svg>
      </button>

      <aside id="componentSidebar" class="component-sidebar">
        <div class="component-sidebar-inner">
          <div class="component-sidebar-header">
            <h4 class="component-sidebar-title">
              C32-DT-SBS (Digital Twin Hierarchy)
            </h4>
          </div>

          <div class="component-sidebar-body">
            <div id="componentList" class="component-list"></div>
          </div>
        </div>
      </aside>

      <div id="three" class="mxd-3d-canvas"></div>

      <div id="loadingOverlay" class="loading-overlay"></div>

      <div class="zoom-controls">
        <div class="action-buttons-row">
          <button id="explodeBtn" class="explode-btn" style="display: none">Explode</button>
        </div>
      </div>

      <div class="reset-control">
        <button type="button" id="resetBtnGlobal" class="zoom-btn-extra" aria-label="Reset">
          <span aria-hidden="true">↺</span>
        </button>
      </div>

      <div class="rotate-menu" id="rotateMenu" data-open="0">

        <button
          id="rotateToggle"
          class="rotate-toggle"
          type="button"
          aria-haspopup="menu"
          aria-expanded="false"
          aria-label="Rotate options"
        >
          ⟴
        </button>

        <div class="rotate-controls" id="rotateDropdown" role="menu" aria-label="Rotate menu">
          <button class="rot-btn" data-rot="left" role="menuitem" aria-label="Rotate left">
            →
          </button>
          <button class="rot-btn" data-rot="right" role="menuitem" aria-label="Rotate right">
            ←
          </button>
          <button class="rot-btn" data-rot="up" role="menuitem" aria-label="Rotate bottom view">
            ↑
          </button>
          <button class="rot-btn" data-rot="down" role="menuitem" aria-label="Rotate top view">
            ↓
          </button>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script type="module" src="/viewer/app/app.entry.js"></script>
  </body>
</html>