threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
542 lines (504 loc) • 25.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ThreePipe Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}
:root {
//--primary-color: #58a6ff;
--primary-color: #6d7a8c;
//--primary-color: #ccdef5;
//--primary-color: #ec630a;
--secondary-color: #ec630a;
//--background-color: #1a1a1c;
--background-color: #E7EFF8;
--background-color-search: #dae1ea;
--background-color-search-hover: #c3d4e7;
//--text-color: #bbb;
--text-color: #1C2026;
--text-color-accent: #2b313a;
--text-color-hover: #2b313a;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #b6bfcb;
--secondary-color: #ec630a;
--background-color: #1C2026;
--background-color-search: #3e4550;
--background-color-search-hover: #555e6b;
--text-color: #F6F7F9;
--text-color-accent: #d2d3d5;
--text-color-hover: #d2d3d5;
}
}
.root-container {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.hamburger {
position: absolute;
background: transparent;
border: none;
top: 0.25rem;
right: 0.5rem;
font-size: 1.75rem;
padding: 0.5rem;
color: var(--text-color);
cursor: pointer;
}
.hamburger:hover {
color: var(--text-color-hover);
}
.sidebar {
width: min(320px, 30%);
height: 100%;
background: var(--background-color);
color: var(--text-color);
padding: 1rem 1rem;
box-sizing: border-box;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
position: relative;
transition: width 0s ease-in-out;
}
.sidebar h1 {
color: var(--text-color);
font-size: 1.5rem;
margin: 0 3rem 1rem 0;
font-weight: normal;
padding: 0;
}
a.brand-link{
//background: linear-gradient(to right, rgb(231, 7, 7), rgb(91, 34, 203), rgb(7, 108, 211));
background: linear-gradient(to right, var(--secondary-color), var(--secondary-color), rgb(231, 7, 7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
}
a.brand-link.webgi-link::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0 3px 0 5px;
filter: invert(1);
}
.sidebar h1 a:hover {
color: var(--text-color-accent);
}
.sidebar h2 {
font-size: 1.2rem;
margin: 0 0 0.5rem 0.25rem;
font-weight: 500;
padding: 0;
}
.sidebar ul {
font-size: 1rem; list-style: none;
padding: 0 0 0 1rem; margin: 0 0 1rem;
display: flex; gap: 0.6rem;
flex-direction: column; font-weight: normal;
}
.sidebar ul li a {
color: var(--primary-color);
text-underline-offset: 0.25rem;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out, background-size 0.75s;
background: linear-gradient(to right, rgb(231, 7, 7), rgb(91, 34, 203), rgb(7, 108, 211));
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 0;
padding-bottom: 2px;
}
.sidebar ul li a:hover {
color: var(--text-color-accent);
}
.sidebar ul li a.selected {
color: var(--text-color-hover);
font-weight: bold;
background-size: 100% 0.1em;
//text-decoration: underline;
}
.iframe-container {
flex: 1; height: 100%; overflow: hidden;
}
.iframe-container iframe {
width: 100%; height: 100%;
border: none;
}
.closed > ul, .closed > h1, .closed > h2 {
display: none;
}
.closed.sidebar{
padding: 1.75rem;
width: 3.3rem;
transition: width 0.3s ease-in-out;
}
.closed:before{
content: attr(data-selected-example);
position: absolute;
top: 0; left: 0;
height: 100%; width: 3.3rem;
color: var(--primary-color);
font-size: 1.25rem;
text-align: center; vertical-align: middle;
line-height: 3.25rem;
writing-mode: vertical-lr;
text-orientation: upright; text-transform: uppercase;
font-family: "Source Code Pro", Menlo, Courier, monospace;
}
.closed > .search-bar {
display: none;
}
.search-bar{
box-sizing: border-box;
margin-bottom: 1rem; width: 90%;
background: transparent;
position: relative;
}
.search-bar input{
box-sizing: border-box;
width: 100%; padding: 0.5rem;
color: var(--text-color-accent);
background: var(--background-color-search);
border: none; border-radius: 4px;
transition: all 0.3s ease-in-out;
}
.search-bar input:hover {
background: var(--background-color-search-hover);
}
.search-bar input:focus {
background: var(--background-color-search-hover);
color: var(--text-color-hover);
outline: none;
}
.search-bar input::placeholder {
color: var(--primary-color);
}
.search-icon {
position: absolute;
top: 50%; left: 10px;
transform: translateY(-50%);
color: var(--primary-color);
width: 15px; height: 15px;
}
.search-bar input {
padding-left: 2rem;
}
.github-icon{
position: absolute; right:-1.25rem; top: 0.1rem; fill: #eeeeee; cursor: pointer;
}
@media only screen and (max-width: 768px) {
.root-container {
flex-direction: column;
}
.sidebar{
width: 100%;
height: auto;
max-height: 50%;
padding: 1rem;
position: relative;
}
.hamburger{
padding: 0.25rem;
}
.closed:before{
width: 100%;
height: 3rem;
writing-mode: unset;
text-orientation: unset;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const hamburger = document.querySelector('.hamburger');
const sidebar = document.querySelector('.sidebar');
hamburger.addEventListener('click', () => {
sidebar.classList.toggle('closed');
});
const iframe = document.querySelector('#example-iframe');
const links = document.querySelectorAll('li>a');
let selected = document.querySelector('a.selected');
function selectTarget(target, scroll = false) {
selected.classList.remove('selected');
target.classList.add('selected');
selected = target;
iframe.src = target.href;
sidebar.dataset.selectedExample = target.innerText;
window.location.hash = "#" + target.getAttribute("href").slice(2);
if(scroll){
setTimeout(() => { // this is required because of autofocus
target.scrollIntoView({behavior: "smooth", block: "center"});
}, 100);
}
}
links.forEach(link => {
link.onclick = (ev) => {
ev.preventDefault()
const target = ev.target;
selectTarget(target);
}
});
const hash = window.location.hash.slice(1);
if(hash){
const target = document.querySelector(`a[href="./${hash}"]`);
selectTarget(target || selected, true);
}
else selectTarget(selected, true);
let urlParams = new URLSearchParams(window.location.search);
let searchTerm = urlParams.get('q');
const filterInput = document.querySelector('#filterInput');
if (searchTerm) filterInput.value = searchTerm;
function updateSearch() {
const filterQuery = filterInput.value.toLowerCase();
urlParams.set('q', filterQuery);
if(searchTerm)
window.history.replaceState({}, '', '?' + urlParams.toString() + window.location.hash);
else if(filterQuery !== '')
window.history.pushState({}, '', '?' + urlParams.toString() + window.location.hash);
searchTerm = filterQuery;
const categories = Array.from(document.querySelectorAll('.category'));
const linksPerCategory = categories.map(category => {
const links = Array.from(category.nextElementSibling.querySelectorAll('li'));
links.forEach(li => {
const link = li.querySelector('a');
const key = link.textContent.toLowerCase() + category.textContent.toLowerCase();
li.style.display = key.includes(searchTerm) ? '' : 'none';
});
return [category, links];
});
linksPerCategory.forEach(([category, links]) => {
category.style.display = links.some(li => li.style.display !== 'none') ? '' : 'none';
category.nextElementSibling.style.display = category.style.display;
});
}
window.addEventListener('popstate', function() {
urlParams = new URLSearchParams(window.location.search);
searchTerm = urlParams.get('q') || '';
document.querySelector('#filterInput').value = searchTerm;
updateSearch()
});
filterInput.addEventListener('keyup', updateSearch);
updateSearch()
});
</script>
</head>
<body>
<div class="root-container">
<div class="sidebar" data-selected-example="Tweakpane Editor">
<button class="hamburger"> ☰</button>
<h1 style="position:relative;">
<a class="brand-link" href="https://threepipe.org">ThreePipe</a>
Examples
<a class="brand-link" target="_blank" href="https://github.com/repalash/threepipe">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="28" height="28" viewBox="0 0 24 24"
class="github-icon">
<path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6c0-0.4,0-0.9,0.2-1.3 C7.2,6.1,7.4,6,7.5,6c0,0,0.1,0,0.1,0C8.1,6.1,9.1,6.4,10,7.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3c0.9-0.9,2-1.2,2.5-1.3 c0,0,0.1,0,0.1,0c0.2,0,0.3,0.1,0.4,0.3C17,6.7,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4 c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3C22,6.1,16.9,1.4,10.9,2.1z"></path>
</svg>
</a>
</h1>
<div class="search-bar">
<svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input id="filterInput" type="text" placeholder="Search" autocomplete="off" autofocus >
</div>
<h2 class="category">Editors/Viewers</h2>
<ul>
<li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li>
<li><a href="./model-viewer/">Model Viewer </a></li>
</ul>
<h2 class="category">Rendering</h2>
<ul>
<li><a href="./progressive-plugin/">Progressive Plugin </a></li>
<li><a href="./custom-pipeline/">Custom Pipeline specification </a></li>
<li><a href="./ssaa-plugin/">SSAA Plugin </a></li>
<li><a href="./depth-buffer-plugin/">Depth Buffer Plugin </a></li>
<li><a href="./normal-buffer-plugin/">Normal Buffer Plugin </a></li>
<li><a href="./gbuffer-plugin/">GBuffer Plugin <br/>(NormalDepth+Flags) </a></li>
<li><a href="./ssao-plugin/">SSAO Plugin </a></li>
<li><a href="./virtual-cameras-plugin/">Virtual Cameras Plugin </a></li>
<li><a href="./virtual-camera/">Virtual Camera (Animated) </a></li>
<li><a href="./basic-svg-renderer-plugin/">Basic SVG Renderer Plugin </a></li>
<li><a href="./three-svg-renderer-plugin/">Three SVG Renderer Plugin </a></li>
</ul>
<h2 class="category">Realistic Rendering (<a class="brand-link webgi-link" href="https://webgi.dev/" target="_blank">webgi</a>)</h2>
<ul>
<li><a href="./bloom-plugin/">HDR Bloom Plugin </a></li>
<li><a href="./depthoffield-plugin/">DepthOfField Plugin </a></li>
<li><a href="./ssreflection-plugin/">Screen Space Reflection(SSR) Plugin </a></li>
<li><a href="./temporalaa-plugin/">Temporal Anti-aliasing Plugin </a></li>
<li><a href="./outline-plugin/">Outline(Picking) Plugin </a></li>
<li><a href="./ssgi-plugin/">Screen Space Global Illumination(SSGI) Plugin </a></li>
<li><a href="./ssgi-ssr-plugin/">SSGI + SSR Plugins </a></li>
<!--<li><a href="./ssrtao-plugin/">Screen Space Ray Traced AO Plugin </a></li>-->
<li><a href="./anisotropy-plugin/">Anisotropy(Blender) Plugin </a></li>
<li><a href="./velocity-buffer-plugin/">Velocity Buffer Plugin (TAA) </a></li>
<li><a href="./sscontactshadows-plugin/">Contact Shadows(SSCS) Plugin </a></li>
</ul>
<h2 class="category">Post-Processing</h2>
<ul>
<li><a href="./tonemap-plugin/">Tonemap Plugin </a></li>
<li><a href="./vignette-plugin/">Vignette Plugin </a></li>
<li><a href="./chromatic-aberration-plugin/">Chromatic Aberration Plugin </a></li>
<li><a href="./filmic-grain-plugin/">Filmic Grain Plugin </a></li>
<li><a href="./frame-fade-plugin/">Frame Fade Plugin </a></li>
<li><a href="./unreal-bloom-pass/">Unreal Bloom Pass </a></li>
</ul>
<h2 class="category">Interaction</h2>
<ul>
<li><a href="./picking-plugin/">Picking (Selection) Plugin </a></li>
<li><a href="./camera-view-plugin/">Camera View (Animation) Plugin </a></li>
<li><a href="./transform-animation-plugin/">Transform Animation Plugin </a></li>
<li><a href="./dropzone-plugin/">Dropzone (Drag & Drop) Plugin </a></li>
<li><a href="./transform-controls-plugin/">Transform Controls Plugin </a></li>
<li><a href="./editor-view-widget-plugin/">Editor View Widget Plugin </a></li>
<li><a href="./loading-screen-plugin/">Loading Screen Plugin </a></li>
<li><a href="./fullscreen-plugin/">FullScreen Plugin </a></li>
<li><a href="./interaction-prompt-plugin/">Interaction Prompt Plugin </a></li>
<li><a href="./device-orientation-controls-plugin/">Device Orientation Controls Plugin (Gyroscope) </a></li>
<li><a href="./pointer-lock-controls-plugin/">Pointer Lock(FPS) Controls Plugin </a></li>
<li><a href="./three-first-person-controls-plugin/">Three First Person(look around) Controls Plugin </a></li>
<li><a href="./simplify-modifier-plugin/">Simplify Modifier Plugin </a></li>
<li><a href="./meshopt-simplify-modifier-plugin/">MeshOpt Simplify Modifier Plugin </a></li>
</ul>
<h2 class="category">Configurators</h2>
<ul>
<li><a href="./material-configurator-plugin/">Material Configurator Plugin </a></li>
<li><a href="./switch-node-plugin/">Switch Node (Object Configurator) Plugin </a></li>
<li><a href="./gltf-khr-material-variants-plugin/">glTF KHR Material Variants Plugin </a></li>
</ul>
<h2 class="category">Import</h2>
<ul>
<li><a href="./fbx-load/">FBX Load </a></li>
<li><a href="./obj-mtl-load/">OBJ MTL Load </a></li>
<li><a href="./gltf-load/">glTF Load </a></li>
<li><a href="./rhino3dm-load/">Rhino 3DM Load </a></li>
<li><a href="./drc-load/">DRACO(DRC) Load </a></li>
<li><a href="./hdr-load/">HDR Load </a></li>
<li><a href="./exr-load/">EXR Load </a></li>
<li><a href="./image-load/">Image(png, jpeg, svg, ico, webp, avif) Load </a></li>
<li><a href="./usdz-load/">USDZ, USDA Load </a></li>
<li><a href="./ply-load/">PLY Load </a></li>
<li><a href="./stl-load/">STL Load </a></li>
<li><a href="./ktx2-load/">KTX2 Load </a></li>
<li><a href="./ktx-load/">KTX Load </a></li>
<li><a href="./blend-load/">BLEND Load </a></li>
<li><a href="./splat-load/">SPLAT Load<br/>(Gaussian Splatting) </a></li>
<li><a href="./extra-importer-plugins/">Extra(3ds, 3mf, collada, amf, bvh, vox, gcode, mdd, pcd, tilt, wrl, ldraw, vtk, xyz) Load </a></li>
<li><a href="./gltf-meshopt-compression/">glTF MeshOpt Decode (Compression Extension) </a></li>
</ul>
<h2 class="category">Export</h2>
<ul>
<li><a href="./asset-exporter-plugin/">Asset Exporter Plugin<br/>(Scene/GLB Snapshot) </a></li>
<li><a href="./canvas-snapshot-plugin/">Canvas Snapshot Plugin<br/>(Image Snapshot) </a></li>
<li><a href="./image-snapshot-export/">PNG, JPEG, WEBP Export<br/>(Image Snapshot) </a></li>
<li><a href="./render-target-export/">EXR, PNG, JPEG, WEBP Export<br/>(Render Target Export) </a></li>
<li><a href="./glb-export/">GLB Export </a></li>
<li><a href="./glb-draco-export/">GLB (+DRACO) Export </a></li>
<li><a href="./pmat-material-export/">PMAT Material Export </a></li>
<li><a href="./transfr-share-plugin/">Transfr.one Share Plugin<br/>(Upload, share link) </a></li>
</ul>
<h2 class="category">UI Plugins</h2>
<ul>
<li><a href="./tweakpane-ui-plugin/">Tweakpane UI Plugin </a></li>
<li><a href="./blueprintjs-ui-plugin/">Blueprint.js UI Plugin </a></li>
</ul>
<h2 class="category">Animation</h2>
<ul>
<li><a href="./gltf-animation-plugin/">glTF Animation Plugin </a></li>
<li><a href="./popmotion-plugin/">Popmotion Plugin </a></li>
<li><a href="./gltf-camera-animation/">glTF Camera Animation </a></li>
<li><a href="./gltf-animation-page-scroll/">glTF Animation Page Scroll </a></li>
</ul>
<h2 class="category">Samples</h2>
<ul>
<li><a href="./html-js-sample/">HTML/JS Sample </a></li>
<li><a href="./react-js-sample/">React/JS Sample </a></li>
<li><a href="./react-jsx-sample/">React/JSX Sample </a></li>
<li><a href="./react-tsx-sample/">React/TSX Sample </a></li>
<li><a href="./vue-html-sample/">Vue/HTML Sample </a></li>
<li><a href="./vue-sfc-sample/">Vue/SFC Sample </a></li>
<li><a href="./svelte-sample/">Svelte Sample </a></li>
</ul>
<h2 class="category">Material Extensions</h2>
<ul>
<li><a href="./clearcoat-tint-plugin/">Clearcoat Tint Plugin</a></li>
<li><a href="./fragment-clipping-extension-plugin/">Fragment Clipping Extension Plugin </a></li>
<li><a href="./noise-bump-material-plugin/">SparkleBump(NoiseBump) Material Plugin </a></li>
<li><a href="./custom-bump-map-plugin/">Custom Bump Map Plugin </a></li>
<li><a href="./parallax-mapping-plugin/">Parallax(Relief) Mapping Plugin </a></li>
</ul>
<h2 class="category">Utils</h2>
<ul>
<li><a href="./contact-shadow-ground-plugin/">Contact Shadow Ground Plugin</a></li>
<li><a href="./hdri-ground-plugin/">HDRi Ground Plugin <br/>(Projected Skybox)</a></li>
<li><a href="./render-target-preview/">Render Target Preview Plugin </a></li>
<li><a href="./object3d-generator-plugin/">Object3D Generator Plugin <br/>(Lights, Cameras)</a></li>
<li><a href="./geometry-generator-plugin/">Geometry Generator Plugin </a></li>
<li><a href="./object3d-widgets-plugin/">Object3D Widgets Plugin <br/>(Lights, Cameras)</a></li>
<li><a href="./geometry-uv-preview/">Geometry UV Preview Plugin </a></li>
<li><a href="./aws-client-plugin/">AWS Client Plugin <br/>(S3/R2 upload) </a></li>
<li><a href="./parallel-asset-import/">Parallel Asset Import </a></li>
<li><a href="./obj-to-glb/">Convert OBJ to GLB </a></li>
<li><a href="./3dm-to-glb/">Convert 3DM to GLB </a></li>
<li><a href="./hdr-to-exr/">Convert HDR to EXR </a></li>
</ul>
<h2 class="category">Experiments</h2>
<ul>
<li><a href="./progressive-hdr-shadows-exp/">Progressive HDR Environment Shadows</a></li>
<li><a href="./svg-geometry-playground/">SVG Geometry Playground </a></li>
</ul>
<h2 class="category">UI Config</h2>
<ul>
<li><a href="./material-uiconfig/">Material UI </a></li>
<li><a href="./object-uiconfig/">Object UI </a></li>
<li><a href="./camera-uiconfig/">Camera UI </a></li>
<li><a href="./scene-uiconfig/">Scene UI </a></li>
<li><a href="./viewer-uiconfig/">Viewer UI </a></li>
</ul>
<h2 class="category">Lights</h2>
<ul>
<li><a href="./directional-light/">Directional Light </a></li>
<li><a href="./spot-light/">Spot Light </a></li>
<li><a href="./point-light/">Point Light </a></li>
<li><a href="./ambient-light/">Ambient Light </a></li>
<li><a href="./hemisphere-light/">Hemisphere Light </a></li>
<li><a href="./rect-area-light/">Rect Area Light </a></li>
</ul>
<h2 class="category">Tests</h2>
<ul>
<li><a href="./multi-viewer-test/">Multiple Viewers Test </a></li>
<li><a href="./gltf-transmission-test/">glTF Transmission Test </a></li>
<li><a href="./gltf-transmission-test-msaa/">glTF Transmission Test + MSAA </a></li>
<li><a href="./uint8-rgbm-hdr-test/">Uint8 RGBM HDR Test </a></li>
<li><a href="./half-float-hdr-test/">Half-float HDR Test </a></li>
<li><a href="./sphere-rgbm-test/">RGBM Test </a></li>
<li><a href="./sphere-half-float-test/">Half Float Test </a></li>
<li><a href="./sphere-msaa-test/">MSAA Test </a></li>
<li><a href="./z-prepass/">Z-Prepass Test </a></li>
<li><a href="./import-test/">Import Test</a></li>
<li><a href="./gltf-transmission-test-msaa-zprepass/">glTF Transmission Test + MSAA + zPrepass</a></li>
</ul>
</div>
<div class="iframe-container">
<!-- TODO: allow only threepipe and localhost domains -->
<iframe id="example-iframe" src="./tweakpane-editor/" frameborder="0" allowfullscreen="allowfullscreen"
allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; clipboard-read *; clipboard-write *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; screen-wake-lock *; speaker *; sync-xhr *; usb *; web-share *; vibrate *; vr *">
</iframe>
</div>
</div>
</body>