// 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(0, 0, 0), scene);

camera.setTarget(new BABYLON.Vector3(3,8,3));

camera.attachControl(canvas, true);

var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 0, 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(1, 0, 1.0);

/* TODO: find an efficient way to assign colors

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: 128 }, 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.

// Start the render loop.

// engine.runRenderLoop(renderLoop);