// 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;

// Create a new engine with enabled antialiasing and attach it to the canvas.

const engine = new BABYLON.Engine(canvas, true);

const scene = new BABYLON.Scene(engine);

scene.clearColor = new BABYLON.Color3(0.6, 0.5, 0.8);

// Add a rotatable camera with a radius of 3 units and point it to the center of the scene.

const camera = new BABYLON.ArcRotateCamera('camera', 0, 0, 6, new BABYLON.Vector3(0, 0, 0), scene);

// Prevent zooming by setting the lower and upper radius boundaries to the current radius.

camera.lowerRadiusLimit = camera.upperRadiusLimit = camera.radius;

// Attach the camera to the canvas and prevent default events.

camera.attachControl(canvas, true);

//const light = new BABYLON.PointLight('light', new BABYLON.Vector3(10, 10, 0), scene);

const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

const boxMaterial = new BABYLON.StandardMaterial('material', scene);

boxMaterial.emissiveColor = new BABYLON.Color3(0.8, 0.08, 0.06);

// Add a box with a size of 1 unit.

// const box = BABYLON.Mesh.CreateBox('box', 1, scene);

// box.material = boxMaterial;

// TruncatedOctahedron

// from https://cdn.rawgit.com/BabylonJS/Extensions/master/Polyhedron/polyhedra.js

var polyhedron = {

"vertex":[[0,0,1.054093],[0.6324555,0,0.843274],[-0.421637,0.4714045,0.843274],[-0.07027284,-0.6285394,0.843274],[0.843274,0.4714045,0.421637],[0.5621827,-0.6285394,0.6324555],[-0.9135469,0.3142697,0.421637],[-0.2108185,0.942809,0.421637],[-0.5621827,-0.7856742,0.421637],[0.9838197,0.3142697,-0.2108185],[0.421637,0.942809,0.2108185],[0.7027284,-0.7856742,0],[-0.7027284,0.7856742,0],[-0.9838197,-0.3142697,0.2108185],[-0.421637,-0.942809,-0.2108185],[0.5621827,0.7856742,-0.421637],[0.9135469,-0.3142697,-0.421637],[0.2108185,-0.942809,-0.421637],[-0.5621827,0.6285394,-0.6324555],[-0.843274,-0.4714045,-0.421637],[0.07027284,0.6285394,-0.843274],[0.421637,-0.4714045,-0.843274],[-0.6324555,0,-0.843274],[0,0,-1.054093]],

"face":[[0,3,5,1],[2,7,12,6],[4,9,15,10],[8,13,19,14],[11,17,21,16],[18,20,23,22],[0,1,4,10,7,2],[0,2,6,13,8,3],[1,5,11,16,9,4],[3,8,14,17,11,5],[6,12,18,22,19,13],[7,10,15,20,18,12],[9,16,21,23,20,15],[14,19,22,23,21,17]]};

var box = BABYLON.MeshBuilder.CreatePolyhedron(polyhedron.name, { custom: polyhedron, size: 1 }, scene);

box.convertToFlatShadedMesh();

box.material = boxMaterial;

var plane = BABYLON.Mesh.CreatePlane("planeName", 4, scene);

plane.material = boxMaterial;

// The main render loop.

const renderLoop = () => {

box.rotation.x -= .013;

box.rotation.y += .007;

// box.rotation.z += .007;

scene.render();

};

const onResize = () => {

canvas.width = getWidth();

engine.resize();

}

window.addEventListener('resize', onResize);

// 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);

}