📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
md`# three-elements example from home page`
html`
<div style="width: ${width}; height: 480px">
<three-game autorender>
<three-scene background-color="#eee">
<!-- Spinning dodecahedron -->
<three-mesh
scale="4"
cast-shadow
tick="object.rotation.x = object.rotation.y += 0.01;
object.scale.setScalar(4 + Math.cos(Date.now() / 700) * 0.6)"
>
<three-dodecahedron-buffer-geometry></three-dodecahedron-buffer-geometry>
<three-mesh-standard-material
color="hotpink"
metalness="0.5"
roughness="0.5"
></three-mesh-standard-material>
</three-mesh>
<!-- A floor. We like shadows. Shadows good! -->
<three-mesh rotation.x="-90deg" position.y="-7" receive-shadow>
<three-plane-buffer-geometry
args="1000, 1000, 32"
></three-plane-buffer-geometry>
<three-mesh-standard-material color="#888"></three-mesh-standard-material>
</three-mesh>
<!-- Orbit controls, because they're cool! -->
<three-orbit-controls></three-orbit-controls>
<!-- Lights -->
<three-ambient-light intensity="0.3"></three-ambient-light>
<three-directional-light
intensity="0.8"
position="40, 40, 20"
cast-shadow
></three-directional-light>
</three-scene>
</three-game>
</div>
`
import('https://unpkg.com/three-elements@0.3.0/dist/index.esm.js?module')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
