"use strict"; // Define variables - these make it easy to work with from the console let _3dpreviewScale = 70; let _3dpreviewCamera = null; let _3dpreviewScene = null; let _3dpreviewRenderer = null; let _3danimationFrame = null; let _3dmaterial = null; let _3dmesh = null; // Create a mesh from pixel data async function addMesh(width, height, segmentsX, segmentsY) { const _3dgeometry = new THREE.PlaneGeometry(width, height, segmentsX-1, segmentsY-1); const _3dmaterial = new THREE.MeshBasicMaterial({wireframe: false}); const url = await getMapURL("mesh"); _3dmaterial.map = new THREE.TextureLoader().load(url); _3dgeometry.vertices.forEach((v, i) => v.z = getMeshHeight(i)); _3dmesh = new THREE.Mesh(_3dgeometry, _3dmaterial); _3dmesh.rotation.x = -Math.PI / 2; _3dpreviewScene.add(_3dmesh); } function getMeshHeight(i) { const h = grid.cells.h[i]; return h < 20 ? 0 : (h - 18) / 82 * _3dpreviewScale; } // Function to render scene and camera function render() { _3danimationFrame = requestAnimationFrame(render); _3dpreviewRenderer.render(_3dpreviewScene, _3dpreviewCamera); } function start3dpreview(canvas) { _3dpreviewScene = new THREE.Scene(); _3dpreviewCamera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 0.1, 100000); _3dpreviewCamera.position.x = 0; _3dpreviewCamera.position.z = 350; _3dpreviewCamera.position.y = 285; _3dpreviewRenderer = new THREE.WebGLRenderer({canvas}); new THREE.OrbitControls(_3dpreviewCamera, _3dpreviewRenderer.domElement); _3dpreviewRenderer.setSize(canvas.width, canvas.height); addMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY); _3danimationFrame = requestAnimationFrame(render); } function update3dpreview(canvas) { _3dpreviewScene.remove(_3dmesh); _3dpreviewRenderer.setSize(canvas.width, canvas.height); addMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY); } function stop3dpreview() { cancelAnimationFrame(_3danimationFrame); _3danimationFrame = null; _3dmesh = undefined; _3dmaterial = undefined; _3dpreviewScene = null; _3dpreviewRenderer = null; }