Hugging Face's logo

Spaces:
Joey889
/
AR0518Docker
Sleeping

App Files Community
Joey889 commited on
Commit
a17a0ff
·
verified ·
1 Parent(s): dcd5a2a

Upload 6 files

Browse files
Files changed (2) hide show
  1. README.md +4 -4
  2. index.html +10 -8
README.md CHANGED
@@ -1,12 +1,12 @@
1
  ---
2
- title: AR 地圖在下版
3
- emoji: 📌
4
  colorFrom: blue
5
  colorTo: indigo
6
  sdk: docker
7
  pinned: false
8
  ---
9
 
10
- # AR 尋寶遊戲 - 地圖在鏡頭與遊戲下方版本
11
 
12
- 此版本修正層級，將地圖層置於問號遊戲之下，確保互動視覺正常。
 
1
  ---
2
+ title: AR 正確圖層順序版
3
+ emoji: 🔍
4
  colorFrom: blue
5
  colorTo: indigo
6
  sdk: docker
7
  pinned: false
8
  ---
9
 
10
+ # AR 尋寶遊戲 - 正確圖層順序版
11
 
12
+ 本版本採用 video > map > game 的圖層順序。鏡頭畫面在最上方，地圖透明層居中，互動遊戲最下方，實現最真實的沉浸式視覺體驗。
index.html CHANGED
@@ -14,21 +14,22 @@
14
  <body>
15
 
16
  <div id="container" style="position: relative; width: 100%; height: 100vh; overflow: hidden;">
17
- <!-- 相機背景 -->
18
- <video id="video" autoplay muted playsinline style="position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1;"></video>
19
-
20
- <!-- 地圖透明層（放在下層） -->
21
- <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; pointer-events: none; z-index: 2;"></div>
22
-
23
- <!-- 原本的遊戲畫面（放在最上層） -->
24
- <div id="game" style="position: relative; width: 100%; height: 100%; z-index: 3;">
25
 
26
 
27
  <div id="root"></div>
28
 
29
  </div> <!-- end of #game -->
30
 
 
 
 
 
 
 
31
  <script>
 
32
  navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, audio: false })
33
  .then(function(stream) {
34
  document.getElementById("video").srcObject = stream;
@@ -37,6 +38,7 @@
37
  console.error("無法啟動相機: " + err);
38
  });
39
 
 
40
  function initMap() {
41
  const map = new google.maps.Map(document.getElementById("map"), {
42
  center: { lat: 25.033964, lng: 121.564468 },
 
14
  <body>
15
 
16
  <div id="container" style="position: relative; width: 100%; height: 100vh; overflow: hidden;">
17
+ <!-- 問號遊戲最底層 -->
18
+ <div id="game" style="position: relative; width: 100%; height: 100%; z-index: 1;">
 
 
 
 
 
 
19
 
20
 
21
  <div id="root"></div>
22
 
23
  </div> <!-- end of #game -->
24
 
25
+ <!-- 地圖透明層（中層） -->
26
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; pointer-events: none; z-index: 2;"></div>
27
+
28
+ <!-- 相機畫面最上層 -->
29
+ <video id="video" autoplay muted playsinline style="position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 3;"></video>
30
+
31
  <script>
32
+ // 啟用相機
33
  navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, audio: false })
34
  .then(function(stream) {
35
  document.getElementById("video").srcObject = stream;
 
38
  console.error("無法啟動相機: " + err);
39
  });
40
 
41
+ // 初始化地圖
42
  function initMap() {
43
  const map = new google.maps.Map(document.getElementById("map"), {
44
  center: { lat: 25.033964, lng: 121.564468 },