Examples

Showcase

<Grid cols={1}> <li> <Codesandbox id="6d97z4" tags={['selection', 'tiltshift']} /> </li> </Grid> <Grid cols={2}> <li> <Codesandbox id="9s2wd9" tags={['border-radius']} /> </li> <li> <Codesandbox id="7qytdw" tags={['bruno', 'simon', 'threejs-journey', 'fisheye']} /> </li> <li> <Codesandbox id="xy8c8z" tags={['lusion', 'n8ao']} /> </li> <li> <Codesandbox id="nvk9pf" tags={['ecctrl', 'character-controller']} /> </li> <li> <Codesandbox id="bst0cy" tags={['effects', 'bloom', 'dof', 'reflections']} /> </li> <li> <Codesandbox id="2ycs3" tags={['effects', 'dof', 'bananas']} /> </li> <li> <Codesandbox id="ioxywi" tags={['configurator', 't-shirt', 'soft-shadows']} /> </li> <li> <Codesandbox id="szj6p7" tags={['caustics', 'effects', 'soft-shadows']} /> </li> </Grid> <Grid cols={4}> <li> <Codesandbox id="5w35n6" tags={['ssgi', 'rapier']} /> </li> <li> <Codesandbox id="gwthnh" tags={['clouds']} /> </li> <li> <Codesandbox id="2y73c6" tags={['motion-path', 'clouds']} /> </li> <li> <Codesandbox id="ykfpwf" tags={['caustics', 'effects', 'soft-shadows']} /> </li> <li> <Codesandbox id="yggpw5" tags={['godrays', 'reflections']} /> </li> <li> <Codesandbox id="9m4tpc" tags={['portals']} /> </li> <li> <Codesandbox id="qvk72r" tags={['portals']} /> </li> <li> <Codesandbox id="drc6qg" tags={['portals']} /> </li> <li> <Codesandbox id="hmbn1l" tags={['video', 'cookies', 'caustics']} /> </li> <li> <Codesandbox id="dq6wwe" tags={['glass', 'transmission', 'bloom']} /> </li> <li> <Codesandbox id="dc5fjy" tags={['cards', 'image']} /> </li> <li> <Codesandbox id="3ywzzx" tags={['refraction']} /> </li> <li> <Codesandbox id="lx2h8" tags={['reflections', 'annotations']} /> </li> <li> <Codesandbox id="l4klb" tags={['scroll', 'controls']} /> </li> <li> <Codesandbox id="zxpv7" tags={['physics']} /> </li> <li> <Codesandbox id="0n9it" tags={['html', 'annotations']} /> </li> <li> <Codesandbox id="imn42" tags={['frosted', 'glass', 'transmission']} /> </li> <li> <Codesandbox id="pbwi6i" tags={['gltfjsx', 'effects', 'bloom', 'soft-shadows']} /> </li> <li> <Codesandbox id="fslt99" tags={['effects', 'reflections', 'ssr', 'bloom']} /> </li> <li> <Codesandbox id="2qfxj4" tags={['rapier', 'physics', 'soft-shadows']} /> </li> <li> <Codesandbox id="2n98yj" tags={['scroll', 'refraction', 'lens']} /> </li> <li> <Codesandbox id="e662p3" tags={['effects', 'bloom', 'reflections']} /> </li> <li> <Codesandbox id="j3ycvl" tags={['effects', 'bloom']} /> </li> <li> <Codesandbox id="lwo219" tags={['custom', 'environments']} /> </li> <li> <Codesandbox id="qxjoj" tags={['gltfjsx', 'configurator']} /> </li> <li> <Codesandbox id="dvokj" tags={['audio', 'analyser']} /> </li> <li> <Codesandbox id="bfplr" tags={['ground', 'reflections', 'video-texture']} /> </li> <li> <Codesandbox id="ni6v4" tags={['bruno-simon', 'threejs-journey']} /> </li> <li> <Codesandbox id="9keg6" tags={['html', 'iframe']} /> </li> <li> <Codesandbox id="f79ucc" tags={['splinetool', 'iframe']} /> </li> <li> <Codesandbox id="zqrreo" tags={['refraction']} /> </li> <li> <Codesandbox id="4gy946" tags={['refraction', 'instanced']} /> </li> <li> <Codesandbox id="q48jgy" tags={['ground-projected-env']} /> </li> <li> <Codesandbox id="ju368j" tags={['splinetool', 'transmission']} /> </li> <li> <Codesandbox id="mlgzsc" tags={['transmission', 'csg']} /> </li> <li> <Codesandbox id="y52tmt" tags={['csg']} /> </li> <li> <Codesandbox id="hg3ejl" tags={['scroll', 'animation', 'effects', 'tiltshift']} /> </li> <li> <Codesandbox id="ssbdsw" tags={['physics', 'effects', 'n8ao']} /> </li> <li> <Codesandbox id="024uom" tags={['html', 'input']} /> </li> <li> <Codesandbox id="gsm1y" tags={['scroll']} /> </li> <li> <Codesandbox id="x8gvs" tags={['scroll']} /> </li> <li> <Codesandbox id="yjhzv" tags={['scroll']} /> </li> <li> <Codesandbox id="qpfgyp" tags={['effects', 'particles']} /> </li> <li> <Codesandbox id="62o18n" tags={['cross-fade', 'transitions']} /> </li> <li> <Codesandbox id="8j36ok" tags={['transmission', 'portals', 'physics']} /> </li> <li> <Codesandbox id="n7jf0f" tags={['transmission', 'portals']} /> </li> <li> <Codesandbox id="ik11ln" tags={['portals', 'blend']} /> </li> <li> <Codesandbox id="lxvqek" /> </li> <li> <Codesandbox id="if9crg" /> </li> <li> <Codesandbox id="xzi6ps" /> </li> <li> <Codesandbox id="qvb1vk" /> </li> <li> <Codesandbox id="hxcc1x" /> </li> <li> <Codesandbox id="8pbw1f" /> </li> <li> <Codesandbox id="mw0dtc" /> </li> <li> <Codesandbox id="8flefh" /> </li> <li> <Codesandbox id="7e9y1b" /> </li> <li> <Codesandbox id="whnhyr" /> </li> <li> <Codesandbox id="0c5hv9" /> </li> <li> <Codesandbox id="0fqow2" /> </li> <li> <Codesandbox id="2ij9u" /> </li> <li> <Codesandbox id="42glz0" /> </li> <li> <Codesandbox id="ledhe1" /> </li> <li> <Codesandbox id="nurp5t" /> </li> <li> <Codesandbox id="2csbr1" /> </li> <li> <Codesandbox id="go0b4w" /> </li> <li> <Codesandbox id="s006f" /> </li> <li> <Codesandbox id="l900i" /> </li> <li> <Codesandbox id="qyz5r" /> </li> <li> <Codesandbox id="kv7tv" /> </li> <li> <Codesandbox id="ls503" /> </li> <li> <Codesandbox id="n60qg" /> </li> <li> <Codesandbox id="4jr4p" /> </li> <li> <Codesandbox id="kud9p" /> </li> <li> <Codesandbox id="zgsyn" /> </li> <li> <Codesandbox id="i6t0j" /> </li> <li> <Codesandbox id="h8o2d" /> </li> <li> <Codesandbox id="wu51m" /> </li> <li> <Codesandbox id="tu24h" /> </li> <li> <Codesandbox id="jz9l97qn89" /> </li> <li> <Codesandbox id="prb9t" /> </li> <li> <Codesandbox id="pecl6" /> </li> <li> <Codesandbox id="sbf2i" /> </li> <li> <Codesandbox id="t4l0f" /> </li> <li> <Codesandbox id="wdzv4" /> </li> <li> <Codesandbox id="6hi1y" /> </li> <li> <Codesandbox id="1sccp" /> </li> <li> <Codesandbox id="q23sw" /> </li> <li> <Codesandbox id="gpioq" /> </li> <li> <Codesandbox id="3rjsl" /> </li> <li> <Codesandbox id="4j2q2" /> </li> <li> <Codesandbox id="dh2jc" /> </li> <li> <Codesandbox id="gkfhr" /> </li> <li> <Codesandbox id="0buje" /> </li> <li> <Codesandbox id="5oufp" /> </li> <li> <Codesandbox id="f1ixt" /> </li> <li> <Codesandbox id="7psew" /> </li> <li> <Codesandbox id="vl221" /> </li> <li> <Codesandbox id="oep9o" /> </li> <li> <Codesandbox id="tx1pq" /> </li> </Grid>

Game prototypes

<Grid> <li> <Codesandbox id="lo6kp" /> </li> <li> <Codesandbox id="rmfcq" /> </li> <li> <Codesandbox id="i2160" /> </li> <li> <Codesandbox id="vkgi6" /> </li> <li> <Codesandbox id="2yqpv" /> </li> <li> <Codesandbox id="ptdgrn" /> </li> <li> <Codesandbox id="66cd7" /> </li> </Grid>

Basic examples

<Grid> <li> <Codesandbox id="rrppl0y8l4" /> </li> <li> <Codesandbox id="yup2o" /> </li> <li> <Codesandbox id="0z8i2c" /> </li> <li> <Codesandbox id="txzeq8" /> </li> <li> <Codesandbox id="pj7zjq" /> </li> <li> <Codesandbox id="wlz1o0" /> </li> <li> <Codesandbox id="7n2yru" /> </li> <li> <Codesandbox id="z3f2mw" /> </li> <li> <Codesandbox id="btsbj" /> </li> <li> <Codesandbox id="rz2g0" /> </li> <li> <Codesandbox id="8fo01" /> </li> <li> <Codesandbox id="7duy8" /> </li> <li> <Codesandbox id="bp6tmc" tags={['views', 'portals']} /> </li> <li> <Codesandbox id="r9w2ob" tags={['views', 'portals']} /> </li> <li> <Codesandbox id="p9umgf" tags={['html', 'scroll']} /> </li> <li> <Codesandbox id="k8phr" /> </li> <li> <Codesandbox id="dix1y" /> </li> <li> <Codesandbox id="zcuqh" /> </li> <li> <Codesandbox id="7ucso" /> </li> <li> <Codesandbox id="py4db" /> </li> <li> <Codesandbox id="hf1cs" /> </li> <li> <Codesandbox id="39hg8" /> </li> <li> <Codesandbox id="wbrfs" /> </li> <li> <Codesandbox id="itfgk" /> </li> <li> <Codesandbox id="iup24" /> </li> <li> <Codesandbox id="zu2wo" /> </li> <li> <Codesandbox id="1g4qq" /> </li> <li> <Codesandbox id="z8e6m" /> </li> <li> <Codesandbox id="h545c" /> </li> <li> <Codesandbox id="0k27n" /> </li> <li> <Codesandbox id="d36mw" /> </li> <li> <Codesandbox id="h873k" /> </li> <li> <Codesandbox id="08s1u" /> </li> <li> <Codesandbox id="wvgxp" /> </li> <li> <Codesandbox id="5xho4" /> </li> <li> <Codesandbox id="mbfzf" /> </li> <li> <Codesandbox id="mkq8e" /> </li> <li> <Codesandbox id="12nmp" /> </li> <li> <Codesandbox id="6oei7" /> </li> <li> <Codesandbox id="3k4g6" /> </li> <li> <Codesandbox id="3878x" /> </li> <li> <Codesandbox id="1b40u" /> </li> <li> <Codesandbox id="0ycwe" /> </li> <li> <Codesandbox id="ib0jc" /> </li> </Grid>