Skip to content

Commit b68be6e

Browse files
lunarcloudlunarcloud
committed
fix 3d showcase for firefox
1 parent 9d1a91b commit b68be6e

17 files changed

Lines changed: 95 additions & 112 deletions

‎3d-showcase.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111
<link rel="icon" type="image/x-icon" href="favicon.ico">
1212
<link rel="stylesheet" href="css/common.css">
1313

14+
1415
<script src="lib/custom-elements.js"></script> <!-- Safari polyfill -->
15-
<script src="lib/aframe/aframe-master.min.js"></script>
1616
</head>
1717
<body>
1818
<main style="height: 100dvh; width: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 12;">
1919
<div id="vr-content" style="height: 100%; width: 100%;">
2020
<!-- linthtml-disable attr-name-style, attr-bans -->
21-
<a-scene embedded vr-mode-ui="enabled: true;" keyboard-shortcuts="enterVR: false" loading-screen="dotsColor: white; backgroundColor: black">
21+
<a-scene embedded vr-mode-ui="enabled: true;" keyboard-shortcuts="enterVR: false" loading-screen="dotsColor: white; backgroundColor: black" preserveDrawingBuffer="true">
2222
<a-entity oculus-touch-controls="hand: left"></a-entity>
2323
<a-entity oculus-touch-controls="hand: right"></a-entity>
2424

@@ -242,7 +242,6 @@
242242
</div>
243243
</aside>
244244

245-
<script src="lib/html2canvas.min.js" crossorigin="anonymous"></script>
246245
<script type="module" src="controllers/3d-showcase.js"></script>
247246
</body>
248247
</html>

‎controllers/3d-showcase.js‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,26 @@
11
import '../nav-header/nav-header-element.js'
22
import '../page-fade/page-fade.js'
3-
import ProjectDisplayElement from '../project-display/project-display-element.js'
4-
5-
globalThis.html2canvas = globalThis.html2canvas ?? function (_el, _opts) {
6-
const outcome = new Promise((_resolve, reject) => setTimeout(() =>
7-
reject(new Error('html2canvas is undefined!'))
8-
, 1))
9-
return outcome
10-
}
3+
import '../lib/aframe/aframe-master.js'
4+
import { html2canvas } from '../lib/html2canvas-pro/html2canvas-pro.esm.js'
5+
import { ProjectDisplayElement } from '../project-display/project-display-element.js'
116

127
export default class ThreeDShowcasePageController {
138
/**
149
* Constructor.
1510
*/
1611
constructor () {
1712
const sceneEl = document.querySelector('a-scene')
18-
// @ts-ignore
19-
if (sceneEl?.hasLoaded === true) {
20-
this.renderProjects()
21-
} else {
22-
sceneEl.addEventListener('loaded', () => this.renderProjects())
23-
}
13+
if (sceneEl?.hasLoaded === true)
14+
this.renderProjects()
15+
else
16+
sceneEl.addEventListener('loaded', () => this.renderProjects())
2417
}
2518

2619
/**
2720
* Render the projects element onto the 3d scene.
2821
*/
2922
renderProjects () {
23+
debugger
3024
const sceneEl = document.querySelector('a-scene')
3125
const projectsEl = document.getElementById('all-projects')
3226

@@ -37,20 +31,19 @@ export default class ThreeDShowcasePageController {
3731
const firstProject = document.querySelector('project-display')
3832

3933
firstProject.onReady(() => {
40-
setTimeout(() => {
41-
globalThis
42-
.html2canvas(projectsEl, { backgroundColor: 'transparent' })
43-
.then(canvas => {
34+
html2canvas(projectsEl, {
35+
backgroundColor: 'transparent'
36+
})
37+
.then(canvas => {
4438
const imageString = canvas.toDataURL('image/png')
4539
const proj3dEl = document.createElement('a-image')
4640
proj3dEl.id = 'all-projects-3d'
4741
proj3dEl.setAttribute('material', `src: url(${imageString})`)
4842
sceneEl.querySelector('#projects-entity').appendChild(proj3dEl)
49-
})
50-
}, 100)
43+
})
5144
})
5245
}
5346
}
5447

55-
globalThis.App ??= { Page: undefined }
56-
globalThis.App.Page = new ThreeDShowcasePageController()
48+
// Run the Page's Controller
49+
new ThreeDShowcasePageController()

‎controllers/bg-audio-page.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import FadeOutAnchorElement from '../page-fade/page-fade.js'
1+
import { FadeOutAnchorElement } from '../page-fade/page-fade.js'
22

33
export default class BgAudioManager {
44
/**

‎controllers/home-ala-homestar.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,5 @@ export default class HomeAlaHomestarPageController {
3434
this.audioManager.setupElements('a[hover-style]', hoverFn, resetFn, undefined)
3535
}
3636
}
37-
38-
globalThis.App ??= { Page: undefined }
39-
globalThis.App.Page = new HomeAlaHomestarPageController()
37+
// Run the Page's Controller
38+
new HomeAlaHomestarPageController()

‎controllers/home-console.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -339,6 +339,5 @@ export default class HomeConsolePageController {
339339
speechSynthesis.speak(new SpeechSynthesisUtterance(text))
340340
}
341341
}
342-
343-
globalThis.App ??= { Page: undefined }
344-
globalThis.App.Page = new HomeConsolePageController()
342+
// Run the Page's Controller
343+
new HomeConsolePageController()

‎controllers/home-lcars.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,5 @@ export default class HomeLCARSPageController {
3131
}
3232
}
3333

34-
globalThis.App ??= { Page: undefined }
35-
globalThis.App.Page = new HomeLCARSPageController()
34+
// Run the Page's Controller
35+
new HomeLCARSPageController()

‎controllers/index.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,4 @@ export default class StandardHomePageController {
5757
return percentTop >= 0 && percentTop < 0.50
5858
}
5959
}
60-
61-
globalThis.App ??= { Page: undefined }
62-
globalThis.App.Page = new StandardHomePageController()
60+
new StandardHomePageController()

‎controllers/projects.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '../nav-header/nav-header-element.js'
2-
import ProjectDisplayElement from '../project-display/project-display-element.js'
3-
import FadeOutAnchorElement from '../page-fade/page-fade.js'
2+
import { ProjectDisplayElement } from '../project-display/project-display-element.js'
3+
import { FadeOutAnchorElement } from '../page-fade/page-fade.js'
44

55
export default class ProjectsPageController {
66
/** @type {HTMLElement} */
@@ -136,5 +136,5 @@ export default class ProjectsPageController {
136136
}
137137
}
138138

139-
globalThis.App ??= { Page: undefined }
140-
globalThis.App.Page = new ProjectsPageController()
139+
// Run the Page's Controller
140+
new ProjectsPageController()

‎copy-deps.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,12 @@ function copyDependency (source, destination) {
2929
}
3030

3131
// library to turn html doc into an image/canvas
32-
copyDependency('./node_modules/html2canvas/dist/html2canvas.min.js', 'html2canvas.min.js')
32+
copyDependency('./node_modules/html2canvas-pro/dist/', 'html2canvas-pro')
3333

3434
// custom element polyfill for safari
3535
copyDependency('./node_modules/@ungap/custom-elements/es.js', 'custom-elements.js')
3636

3737
// 3d model viewing
38-
copyDependency('./node_modules/three/build/three.module.min.js', 'three.module.min.js')
3938
copyDependency('./node_modules/@google/model-viewer/dist/model-viewer.min.js', 'model-viewer.min.js')
4039

4140
// 3D web scenes

‎css/common.css‎

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,5 @@
11
@import url("../page-fade/page-fade.css");
2-
@import url("../project-display/project-tags.css");
3-
4-
/* fonts */
5-
@font-face {
6-
font-family: "Sam Handwritten A";
7-
src: url("../font/SamHandwrittenA-Regular.woff2") format("woff2");
8-
}
9-
10-
@font-face {
11-
font-family: 'Noto Emoji';
12-
font-style: normal;
13-
font-weight: 400;
14-
src: url("../font/noto-emoji_5.2.11_emoji-400-normal.woff2") format('woff2');
15-
}
16-
17-
@font-face {
18-
font-family: Lexend;
19-
font-style: normal;
20-
font-weight: 400;
21-
src: url("../font/lexend_5.2.10_latin-400-normal.woff2") format('woff2');
22-
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
23-
}
24-
25-
@font-face {
26-
font-family: Marcellus;
27-
font-style: normal;
28-
font-weight: 400;
29-
src: url("../font/marcellus_5.2.6_latin-400-normal.woff2") format('woff2');
30-
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
31-
}
32-
33-
@font-face {
34-
font-family: Geologica;
35-
font-style: normal;
36-
font-weight: 400;
37-
src: url("../font/geologica_5.2.7_latin-400-normal.woff2") format('woff2');
38-
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
39-
}
2+
@import url("./extra-fonts.css");
403

414
/* Variables */
425
:root,

0 commit comments

Comments
 (0)