|
13 | 13 | </script> |
14 | 14 | <script type="module" src="../dist/pwc.mjs"></script> |
15 | 15 | <link rel="stylesheet" href="css/example.css"> |
16 | | - <style> |
17 | | - .loading-overlay { |
18 | | - position: fixed; |
19 | | - top: 0; |
20 | | - left: 0; |
21 | | - width: 100%; |
22 | | - height: 100%; |
23 | | - background: rgba(0, 0, 0, 0.8); |
24 | | - display: flex; |
25 | | - flex-direction: column; |
26 | | - align-items: center; |
27 | | - justify-content: center; |
28 | | - z-index: 1000; |
29 | | - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
30 | | - color: white; |
31 | | - transition: opacity 0.5s ease; |
32 | | - } |
33 | | - .loading-overlay.hidden { |
34 | | - opacity: 0; |
35 | | - pointer-events: none; |
36 | | - } |
37 | | - .loading-text { |
38 | | - font-size: 1.2em; |
39 | | - margin-bottom: 20px; |
40 | | - opacity: 0.9; |
41 | | - } |
42 | | - .progress-container { |
43 | | - width: 300px; |
44 | | - height: 6px; |
45 | | - background: rgba(255, 255, 255, 0.2); |
46 | | - border-radius: 3px; |
47 | | - overflow: hidden; |
48 | | - } |
49 | | - .progress-bar { |
50 | | - height: 100%; |
51 | | - background: #ff8533; |
52 | | - width: 0%; |
53 | | - transition: width 0.2s ease; |
54 | | - border-radius: 3px; |
55 | | - } |
56 | | - .progress-percent { |
57 | | - margin-top: 12px; |
58 | | - font-size: 0.9em; |
59 | | - opacity: 0.7; |
60 | | - } |
61 | | - </style> |
62 | 16 | </head> |
63 | 17 | <body> |
64 | | - <div class="loading-overlay" id="loading"> |
65 | | - <div class="loading-text">Loading frames...</div> |
66 | | - <div class="progress-container"> |
67 | | - <div class="progress-bar" id="progress-bar"></div> |
68 | | - </div> |
69 | | - <div class="progress-percent" id="progress-text">0%</div> |
70 | | - </div> |
71 | 18 | <pc-app antialias="false" depth="false" high-resolution="false" stencil="false"> |
72 | 19 | <!-- Assets --> |
73 | 20 | <pc-asset src="../node_modules/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset> |
|
110 | 57 | "filenamePattern": "{frame:03}.compressed.ply", |
111 | 58 | "startFrame": 1, |
112 | 59 | "endFrame": 149, |
113 | | - "playMode": "loop", |
114 | | - "playing": false, |
115 | | - "preloadCount": 149 |
| 60 | + "playMode": "bounce", |
| 61 | + "playing": true |
116 | 62 | }'></pc-script> |
117 | 63 | </pc-scripts> |
118 | 64 | </pc-entity> |
|
127 | 73 | </pc-entity> |
128 | 74 | <!-- Light --> |
129 | 75 | <pc-entity name="light" rotation="55 320 0"> |
130 | | - <pc-light type="directional" color="1 1 1" intensity="1" |
131 | | - cast-shadows shadow-bias="0.2" normal-offset-bias="0.05" |
| 76 | + <pc-light type="directional" color="0 0 0" intensity="0" |
| 77 | + cast-shadows shadow-bias="0.1" normal-offset-bias="0.05" |
132 | 78 | shadow-distance="10" shadow-intensity="0.3" |
133 | 79 | shadow-resolution="2048" shadow-type="pcss-32f" |
134 | 80 | penumbra-size="10" penumbra-falloff="2" |
|
139 | 85 | </pc-app> |
140 | 86 | <script type="module" src="js/example.mjs"></script> |
141 | 87 | <script type="module"> |
142 | | - // Wait for frames to preload before starting playback |
143 | | - document.addEventListener('DOMContentLoaded', async () => { |
144 | | - const appElement = await document.querySelector('pc-app').ready(); |
145 | | - const app = appElement.app; |
146 | | - |
147 | | - const loadingOverlay = document.getElementById('loading'); |
148 | | - const progressBar = document.getElementById('progress-bar'); |
149 | | - const progressText = document.getElementById('progress-text'); |
150 | | - const totalFrames = 149; |
151 | | - |
152 | | - // Wait for the flipbook script to be ready |
153 | | - const waitForFlipbook = setInterval(() => { |
154 | | - const player = app.root.findByName('player'); |
155 | | - const flipbook = player?.script?.gsplatFlipbook; |
156 | | - |
157 | | - if (flipbook) { |
158 | | - clearInterval(waitForFlipbook); |
159 | | - |
160 | | - // Now wait for all preloaded frames to be loaded |
161 | | - const checkReady = setInterval(() => { |
162 | | - const preloaded = flipbook.preloadedFrames || []; |
163 | | - const loadedCount = preloaded.filter(f => f.asset.loaded).length; |
164 | | - |
165 | | - // Update progress UI (+1 for current frame) |
166 | | - const progress = Math.min(100, Math.round(((loadedCount + 1) / totalFrames) * 100)); |
167 | | - progressBar.style.width = progress + '%'; |
168 | | - progressText.textContent = `${loadedCount + 1} / ${totalFrames} frames`; |
169 | | - |
170 | | - // Start when we have enough frames loaded |
171 | | - if (preloaded.length >= 100 && loadedCount >= preloaded.length) { |
172 | | - clearInterval(checkReady); |
173 | | - progressBar.style.width = '100%'; |
174 | | - progressText.textContent = 'Ready!'; |
175 | | - |
176 | | - // Hide overlay and start playback |
177 | | - setTimeout(() => { |
178 | | - loadingOverlay.classList.add('hidden'); |
179 | | - flipbook.playing = true; |
180 | | - }, 300); |
181 | | - } |
182 | | - }, 100); |
183 | | - } |
184 | | - }, 100); |
185 | | - }); |
| 88 | + const appElement = await document.querySelector('pc-app').ready(); |
| 89 | + appElement.app.scene.gsplat.material.setParameter('alphaClip', 0.1); |
186 | 90 | </script> |
187 | 91 | </body> |
188 | 92 | </html> |
0 commit comments