md`# Euler's Polyhedron Plane`
{
// A shorthand to get the current width.
const getWidth = () => document.body.clientWidth;
const canvas = html`<canvas width=${getWidth()} height=400>`;
// BabylonJS expects the canvas to be present in the DOM.
yield canvas;
//////
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(.9, .9, .9);
// camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
camera.setPosition(new BABYLON.Vector3(-10, -10, -10));
// var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(-3, -3, 0), scene);
// camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
/* TODO: find an efficient way to assign colors
var categoryColor = function (cat) {
switch (cat) {
case "Platonic Solid": color =
"Archimedean Solid"
"Prism"
"Antiprism"
"Johnson Solid"
return color;
}
*/
var createDiv = function (name) {
var div = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(div);
div.id = name;
return div;
}
var polygons = [];
var rotations = [];
var divs = {};
for (var p in POLYHEDRA) {
var polyhedron = POLYHEDRA[p];
var nvertex = polyhedron.vertex.length;
var nfaces = polyhedron.face.length;
var nedges = nvertex + nfaces - 2; // v - e + f = 2; Euler's polyhedron formula+
var polygon = BABYLON.MeshBuilder.CreatePolyhedron(polyhedron.name, { custom: polyhedron, size: 2 }, scene);
polygon.convertToFlatShadedMesh();
polygon.material = mat;
var spread = 4;
polygon.position.x = nvertex * spread;
polygon.position.y = nedges * spread;
polygon.position.z = nfaces * spread;
polygons.push(polygon);
var rotation = 0.01;
rotations.push(rotation);
divs[POLYHEDRA[p].name] = createDiv(POLYHEDRA[p].name);
}
var curDiv;
var lastDiv;
var onExit = true;
scene.registerBeforeRender(function () {
// rotations
for (var p = 0; p < polygons.length; p++) {
polygons[p].rotation.y += rotations[p];
polygons[p].rotation.x += rotations[p] / 4;
}
var pickResult = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
return mesh.isVisible && mesh.isReady }, false, camera);
if (pickResult.hit) {
var name = pickResult.pickedMesh.name;
curDiv = divs[name];
if (lastDiv && curDiv != lastDiv) { // in case we pass from a mesh straight to another one
lastDiv.style.display = "none";
lastDiv = curDiv;
}
curDiv.style.position = "fixed";
curDiv.style.width = "100px";
curDiv.style.height = "50px";
curDiv.style.left = scene.pointerX + "px";
curDiv.style.top = scene.pointerY + "px";
curDiv.style.display = "block";
curDiv.style.color = "black";
curDiv.style.backgroundcolor = "red";
curDiv.style.cursor = "pointer";
curDiv.innerHTML = name;
onExit = true;
lastDiv = curDiv;
}
else if (curDiv && onExit) {
curDiv.style.display = "none";
onExit = false;
}
pl.position = camera.position;
});
return scene;
};
let scene = createScene();
engine.runRenderLoop(function () {
if (scene) {
scene.render();
}
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
// Remove handlers, destroy the WebGL context and free up resources.
// invalidation.then(() => {
// window.removeEventListener('resize', onResize);
// engine.dispose();
// });
// Start the render loop.
// engine.runRenderLoop(renderLoop);
}
VERSION = "3.3.0"
BABYLON = import(`https://cdn.jsdelivr.net/npm/babylonjs@${VERSION}/es6.min.js`)
d3 = require("d3@5")
md`
Adapted from: https://cdn.rawgit.com/BabylonJS/Extensions/master/Polyhedron/polyhedra.js
Data from the website "Virtual Polyhedra: The Encyclopedia of Polyhedra" by George W. Hart
http://www.georgehart.com/virtual-polyhedra/vp.html
Converted to JSON by Lee Stemkoski
Reference : http://stemkoski.github.io/Three.js/Polyhedra.html
`
POLYHEDRA = FileAttachment("polyhedra@2.json").json()
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.
