modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fullscreen button to threejs-server (#446)

Browse source 
* Add fullscreen button to threejs-server

* Simplify wrapper: pass app instance directly instead of useCallback wrappers

* Update examples/threejs-server/src/threejs-app.tsx

Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>

* Update examples/threejs-server/src/threejs-app.tsx

Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>

* prettier

---------

Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>
This commit is contained in:
Olivier Chafik 2026-02-19 11:17:04 -08:00 • committed by GitHub
commit 37e127034f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 129 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

61
examples/threejs-server/src/global.css
View file

@ -6,7 +6,8 @@
box-sizing: border-box;
}
html, body {
html,
body {
font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
font-size: 1rem;
margin: 0;
@ -45,3 +46,61 @@ html, body {
font-family: var(--font-sans, system-ui);
padding: 20px;
}
/* Fullscreen button */
.fullscreen-btn {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
border: none;
border-radius: 8px;
background: rgba(0, 0, 0, 0.6);
color: white;
cursor: pointer;
display: none; /* Hidden by default, shown when fullscreen available */
align-items: center;
justify-content: center;
transition:
background 0.2s,
opacity 0.2s;
opacity: 0; /* Initially invisible, shown on hover */
z-index: 100;
}
.fullscreen-btn:hover {
background: rgba(0, 0, 0, 0.8);
opacity: 1;
}
.fullscreen-btn svg {
width: 20px;
height: 20px;
}
.fullscreen-btn .collapse-icon {
display: none;
}
.fullscreen-btn.available {
display: flex;
}
/* Show button on container hover */
.threejs-container:hover .fullscreen-btn.available {
opacity: 0.7;
}
/* Fullscreen mode: swap icons and remove border radius */
.threejs-container.fullscreen .fullscreen-btn .expand-icon {
display: none;
}
.threejs-container.fullscreen .fullscreen-btn .collapse-icon {
display: block;
}
.threejs-container.fullscreen canvas {
border-radius: 0 !important;
}