browser-sharp/index.html at main · hmaoraze/browser-sharp · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Title（SEO 核心） -->
    <title>3DGS PLY 在线查看器 | WebGL 3D 模型预览工具</title>

    <!-- Meta Description（已合并，唯一且规范） -->
    <meta
      name="description"
      content="3DGS PLY 文件在线查看器，基于 WebGL 的 3DGS / PLY 三维模型预览工具，可高效加载、查看和渲染 PLY 格式 3D 模型，支持现代浏览器。"
    />

    <!-- Keywords（保留一个，干净不堆砌） -->
    <meta
      name="keywords"
      content="3DGS, PLY, PLY查看器, 3DGS查看器, 3D模型, PLY文件,在线查看, WebGL"
    />

    <!-- Open Graph（搜索引擎 + 社交） -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="3DGS PLY 在线查看器 | WebGL 3D 模型预览工具" />
    <meta
      property="og:description"
      content="基于 WebGL 的 3DGS / PLY 文件在线查看与三维模型预览工具，快速加载 3D 模型。"
    />
    <meta property="og:site_name" content="3DGS PLY 查看器" />
    <meta property="og:locale" content="zh_CN" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="3DGS PLY 在线查看器" />
    <meta
      name="twitter:description"
      content="基于 WebGL 的 3DGS / PLY 三维模型在线预览工具"
    />

    <!-- Schema.org 结构化数据（权威信号） -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "3DGS PLY 在线查看器",
        "applicationCategory": "GraphicsApplication",
        "operatingSystem": "Web",
        "description": "基于 WebGL 的 3DGS / PLY 文件在线查看与三维模型预览工具",
        "browserRequirements": "支持 WebGL 的现代浏览器",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      }
    </script>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="3DGS PLY 查看器" />
    <link rel="manifest" href="/favicon/site.webmanifest" />

    <!-- Fallback 样式（兼容 & SEO 友好） -->
    <style>
      .fallback {
        max-width: 640px;
        margin: 48px auto;
        padding: 24px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
          Helvetica, Arial, sans-serif;
        text-align: center;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        color: #111827;
      }
    </style>
  </head>

  <body>
    <!-- H1 主语义（仅给搜索引擎，不影响 UI） -->
    <h1 style="display:none">
      3DGS PLY 在线查看器 - WebGL 3D 模型预览工具
    </h1>

    <!-- JS 被禁用 -->
    <noscript>
      <div class="fallback">
        <h2>⚠️ JavaScript 已被禁用</h2>
        <p>
          您的浏览器已禁用 JavaScript，无法正常使用 3DGS PLY 查看器功能。<br />
          请启用 JavaScript 后刷新页面。
        </p>
      </div>
    </noscript>

    <!-- 浏览器不支持 ES Module -->
    <script nomodule>
      document.body.innerHTML =
        '<div class="fallback">' +
        '<h2>浏览器版本过低</h2>' +
        '<p>当前浏览器不支持现代 Web 标准，无法运行 3DGS PLY 查看器。<br>请升级浏览器（Chrome / Edge / Firefox / Safari）。</p>' +
        '</div>';
    </script>

    <!-- WebGL 检测（在主程序前） -->
    <script>
      (function () {
        try {
          var canvas = document.createElement("canvas");
          var gl =
            canvas.getContext("webgl2") ||
            canvas.getContext("webgl") ||
            canvas.getContext("experimental-webgl");

          if (!gl) {
            document.body.innerHTML =
              '<div class="fallback">' +
              '<h2>WebGL 不可用</h2>' +
              '<p>当前浏览器或设备不支持 WebGL，无法显示 3D 内容。<br>' +
              '请检查显卡驱动、浏览器设置，或使用桌面端浏览器。</p>' +
              '</div>';
          }
        } catch (e) {
          document.body.innerHTML =
            '<div class="fallback">' +
            '<h2>环境检测失败</h2>' +
            '<p>无法初始化 3D 渲染环境，请尝试更换浏览器或设备。</p>' +
            '</div>';
        }
      })();
    </script>

    <!-- 正常应用 -->
    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>