📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Feb 20, 2021
4 stars
html`
<div style="width: ${width}; height: 480px">
<three-game autorender>
<three-scene background-color="#eee">
<!-- Spinning dodecahedron(s) -- Dynamically change the scene via HTML! -->
${genMesh(meshNum)}
<!-- 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>
`
genMesh = (m)=> {
let retval = "";
let randColorArr = ["hotpink","darkviolet","forestgreen","gold","red","orange","green","blue","white","black","orchid","orangered","skyblue","tan","thistle","grey","yellow","maroon"]; // x11 colors
for(let i =0; i < m; i++){
let randX = 5 - Math.random()*10;
let randY = 5 -Math.random()*10;
let randZ = -Math.random()*5;
let randColor = randColorArr[Math.floor(Math.random() * randColorArr.length)];
retval += `<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)"
position="${randX}, ${randY}, ${randZ}"
>
<three-dodecahedron-buffer-geometry></three-dodecahedron-buffer-geometry>
<three-mesh-standard-material
color="${randColor}"
metalness="0.5"
roughness="0.5"
></three-mesh-standard-material>
</three-mesh>`
}
return retval;
}
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.
