suvadityamuk HF Staff
Rename article to 3D Ecosystem and refine text, sensor and storage visualizations
d5c8235 verified | --- | |
| import Storage from './Storage.astro'; | |
| import {supports} from '../lib/support-registry'; | |
| const {id}=Astro.props;const f=supports[id]; | |
| const groups={overview:['mesh','points','voxels','field','splats'],attributes:['UV coordinates','Normals','Vertex color']}; | |
| const options=groups[id];const selected=Object.values(f.defaults)[0]; | |
| --- | |
| <figure id={id} class:list={['support-figure',{'overview':id==='overview'}]} data-support={id}> | |
| <header><h3>{f.title}</h3>{id==='overview'&&<p>One lamp. Five ways to describe it.</p>}</header> | |
| {options&&<div class="segmented" aria-label={f.title}>{options.map(v=><button type="button" data-choice={v} aria-pressed={v===selected}>{v==='field'?'radiance field':v}</button>)}</div>} | |
| {id==='storage'&&<div class="support-controls"><label>Side length <output data-value="side">1024</output><input type="range" aria-label="Side length" data-param="side" min="16" max="1024" step="16" value="1024"/></label><label>Channels<select data-param="channels"><option value="1">1 · scalar</option><option value="3" selected>3 · RGB</option><option value="4">4 · RGBA</option></select></label><label>Bits per channel<select data-param="bits"><option value="8">8-bit</option><option value="16">16-bit</option></select></label></div>} | |
| {id==='sparse'&&<label class="inline-range">Subdivision depth <input type="range" data-param="depth" min="1" max="6" step="1" value="4"/><output data-value="depth">4</output></label>} | |
| {id==='attributes'&&<label class="inline-range">Triangle on the shade <input type="range" data-param="triangle" min="0" max="15" step="1" value="4"/><output data-value="triangle">4</output></label>} | |
| <div class="support-view" aria-live={id==='overview'?'off':'polite'}> | |
| {id==='overview'?<><img src="/media/mesh-poster.webp" alt="Articulated desk lamp construction" width="1280" height="720"/><canvas aria-label="Lamp representation preview. Drag or use arrow keys to orbit; Shift and arrows to pan; plus and minus to zoom." tabindex="0" role="img"></canvas><div class="overview-label"><span data-overview-name>Mesh</span><span data-overview-info>630 vertices · 1,184 triangles</span></div></>:id==='attributes'||id==='sparse'?<canvas role="img" aria-label={f.title}></canvas>:id==='storage'?<Storage/>:<div class="diagram-content"></div>} | |
| </div> | |
| {id==='overview'&&<div class="atlas-tools" role="group" aria-label="Atlas camera controls"><button type="button" data-atlas-action="orbit" aria-pressed="true">Orbit</button><button type="button" data-atlas-action="pan" aria-pressed="false">Pan</button><span>Drag or use arrow keys</span><button type="button" data-atlas-action="in" aria-label="Zoom in on atlas">+</button><button type="button" data-atlas-action="out" aria-label="Zoom out of atlas">−</button><button type="button" data-atlas-action="reset">Reset camera</button></div>} | |
| {id==='sparse'&&<div class="sparse-stats" aria-live="polite"></div>} | |
| <figcaption>{f.caption}</figcaption> | |
| <div class="support-actions"><button type="button" data-support-reset>Reset figure</button><button type="button" data-support-share>Share figure</button></div> | |
| <noscript><p>Enable JavaScript for this interactive figure. The original article and construction animations remain readable.</p></noscript> | |
| </figure> | |