Examples: Add WebGL <-> HTML Overlay Example#32849
Conversation
Demonstrates a technique for rendering three.js canvases that integrate with scrollable HTML content. 3D elements can appear both in front of and behind HTML elements using dual WebGL renderers with split near/far clipping planes. Based on ThreeOverlay by Johnathon Selstad. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Use absolute positioning with transform on Safari browsers - Conditionally allow scrolling in iframe for overlay examples - Add screenshot/thumbnail for examples page Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This reverts commit 31b46c2.
There was a problem hiding this comment.
Pull request overview
This PR adds a new example demonstrating how to visually sandwich HTML content between two WebGL layers, and wires it into the examples index with an accompanying screenshot and a Safari-specific scrolling fix.
Changes:
- Add
examples/webgl_overlay.html, a minimal overlay example using two WebGL renderers (background and foreground) synchronized with page scrolling and mapping paragraph elements into 3D Box3 helpers. - Add
examples/screenshots/webgl_overlay.jpgas the thumbnail/screenshot for the new example. - Register the new example in
examples/files.jsonand adjust the Safari iframe auto-resize logic inexamples/index.htmlto allow scrolling specifically for overlay examples while preserving the Safari sizing workaround.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| examples/webgl_overlay.html | New overlay example implementing dual WebGL renderers, scroll-synced camera, Safari handling, and 3D representations of HTML paragraphs. |
| examples/screenshots/webgl_overlay.jpg | Screenshot asset for the new webgl_overlay example used in the examples gallery. |
| examples/index.html | Update Safari iframe auto-resize workaround and allow scrolling for overlay examples by skipping scrolling="no" when the hash includes overlay. |
| examples/files.json | Register the new webgl_overlay example so it appears in the examples listing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Haha! The bloom is a bit overkill... I think Cyberpunk Example is the best one. (Better than the minimalist) |
Yeah; I agree 😄 But, since it’s ~1200 lines, I figured a minimalist ~350 line example would be more useful for Claude to remix without getting biased by the Cyberpunk parts 🤔 Should I do both? Trying to think of the best way to make it useful while still showing it off… |
Regenerated screenshot for the webgl_overlay example. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
📦 Bundle sizeFull ESM build, minified and gzipped.
🌳 Bundle size after tree-shakingMinimal build including a renderer, camera, empty scene, and dependencies.
|
This reverts commit 619c097.
Switch from system fonts to Google Fonts Roboto to ensure consistent text rendering across different environments. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Nice! I was looking for some approach to mix HTML in Three.js and also have proper transparency. Current examples don't have this. |
This PR adds an example for sandwiching HTML elements between WebGL elements so it feels like the HTML is embedded within the 3D space.
I was noticing the WebGPU Blocks trailer has a similar "all GL" example, and I figured the proper hybrid deserves a proper demonstration in the main repo's examples.
The basic example is optimized for line-count, functionality, and compatibility with both desktop and phone devices:
Basic Minimalist Example (this PR)
But the real magic comes from giving this context-friendly version to Claude with the frontend-design plugin (all single-file!):
Cyberpunk Example
Cyberpunk Example (Extreme Glow)
Vogue Magazine Layout Example