kitchen-simulator 5.10.2-react.18 → 5.10.4-react.18

package/es/components/viewer3d/fbm.js

@@ -0,0 +1,414 @@
+export default [{
+  x: 6.513524830609185e-9,
+  y: 0,
+  z: 1.19209286886246e-9
+}, {
+  x: -2.9929081435398075e-10,
+  y: 0.11430007964372635,
+  z: 1.5497207073167374e-8
+}, {
+  x: -2.9929081435398075e-10,
+  y: 0.11430007964372635,
+  z: 1.5497207073167374e-8
+}, {
+  x: 6.513524830609185e-9,
+  y: 0,
+  z: 1.19209286886246e-9
+}, {
+  x: -2.9929081435398075e-10,
+  y: 0.11430007964372635,
+  z: -0.011996750719845295
+}, {
+  x: -2.9929081435398075e-10,
+  y: 0.11430007964372635,
+  z: -0.011996750719845295
+}, {
+  x: -2.857603875749959e-10,
+  y: 0.11407307535409927,
+  z: -0.014381852000951767
+}, {
+  x: -2.857603875749959e-10,
+  y: 0.11407307535409927,
+  z: -0.014381852000951767
+}, {
+  x: -2.6880001002815845e-10,
+  y: 0.11378852277994156,
+  z: -0.01577681116759777
+}, {
+  x: -2.6880001002815845e-10,
+  y: 0.11378852277994156,
+  z: -0.01577681116759777
+}, {
+  x: -2.3992810516126895e-10,
+  y: 0.11330413818359375,
+  z: -0.016878647729754448
+}, {
+  x: -2.3992810516126895e-10,
+  y: 0.11330413818359375,
+  z: -0.016878647729754448
+}, {
+  x: -1.9096546566288453e-10,
+  y: 0.11248268187046051,
+  z: -0.017795395106077194
+}, {
+  x: -1.9096546566288453e-10,
+  y: 0.11248268187046051,
+  z: -0.017795395106077194
+}, {
+  x: -1.3194607906275024e-10,
+  y: 0.11149249970912933,
+  z: -0.018403001129627228
+}, {
+  x: -1.3194607906275024e-10,
+  y: 0.11149249970912933,
+  z: -0.018403001129627228
+}, {
+  x: -6.697859628035374e-11,
+  y: 0.11040252447128296,
+  z: -0.01870192028582096
+}, {
+  x: -6.697859628035374e-11,
+  y: 0.11040252447128296,
+  z: -0.01870192028582096
+}, {
+  x: -1.7337242481495901e-13,
+  y: 0.10928171873092651,
+  z: -0.018692459911108017
+}, {
+  x: -1.7337242481495901e-13,
+  y: 0.10928171873092651,
+  z: -0.018692459911108017
+}, {
+  x: 6.436266797305024e-11,
+  y: 0.10819898545742035,
+  z: -0.018374618142843246
+}, {
+  x: 6.436266797305024e-11,
+  y: 0.10819898545742035,
+  z: -0.018374618142843246
+}, {
+  x: 1.2252029946147047e-10,
+  y: 0.1072232574224472,
+  z: -0.017748551443219185
+}, {
+  x: 1.2252029946147047e-10,
+  y: 0.1072232574224472,
+  z: -0.017748551443219185
+}, {
+  x: 1.7019147202645968e-10,
+  y: 0.10642346739768982,
+  z: -0.016814865171909332
+}, {
+  x: 1.7019147202645968e-10,
+  y: 0.10642346739768982,
+  z: -0.016814865171909332
+}, {
+  x: 1.960347578711108e-10,
+  y: 0.10598989576101303,
+  z: -0.015734391286969185
+}, {
+  x: 1.960347578711108e-10,
+  y: 0.10598989576101303,
+  z: -0.015734391286969185
+}, {
+  x: 2.1125515226039226e-10,
+  y: 0.10573453456163406,
+  z: -0.01397657860070467
+}, {
+  x: 2.1125515226039226e-10,
+  y: 0.10573453456163406,
+  z: -0.01397657860070467
+}, {
+  x: 2.1715663989230194e-10,
+  y: 0.10563552379608154,
+  z: -0.011996750719845295
+}, {
+  x: 2.1715663989230194e-10,
+  y: 0.10563552379608154,
+  z: -0.011996750719845295
+}, {
+  x: 3.628213007811354e-10,
+  y: 0.10319168120622635,
+  z: -0.011996750719845295
+}, {
+  x: 3.628213007811354e-10,
+  y: 0.10319168120622635,
+  z: -0.011996750719845295
+}, {
+  x: 3.628213007811354e-10,
+  y: 0.10319168120622635,
+  z: -0.016662126407027245
+}, {
+  x: 3.628213007811354e-10,
+  y: 0.10319168120622635,
+  z: -0.016662126407027245
+}, {
+  x: 3.6975278394635325e-10,
+  y: 0.10307538509368896,
+  z: -0.017714371904730797
+}, {
+  x: 3.6975278394635325e-10,
+  y: 0.10307538509368896,
+  z: -0.017714371904730797
+}, {
+  x: 3.89493381991457e-10,
+  y: 0.1027441918849945,
+  z: -0.01863997057080269
+}, {
+  x: 3.89493381991457e-10,
+  y: 0.1027441918849945,
+  z: -0.01863997057080269
+}, {
+  x: 4.204628034631952e-10,
+  y: 0.10222461819648743,
+  z: -0.01945677399635315
+}, {
+  x: 4.204628034631952e-10,
+  y: 0.10222461819648743,
+  z: -0.01945677399635315
+}, {
+  x: 4.610791193293551e-10,
+  y: 0.10154318809509277,
+  z: -0.020138230174779892
+}, {
+  x: 4.610791193293551e-10,
+  y: 0.10154318809509277,
+  z: -0.020138230174779892
+}, {
+  x: 5.097632316264367e-10,
+  y: 0.1007264032959938,
+  z: -0.020657790824770927
+}, {
+  x: 5.097632316264367e-10,
+  y: 0.1007264032959938,
+  z: -0.020657790824770927
+}, {
+  x: 5.649337664337395e-10,
+  y: 0.09980079531669617,
+  z: -0.020989060401916504
+}, {
+  x: 5.649337664337395e-10,
+  y: 0.09980079531669617,
+  z: -0.020989060401916504
+}, {
+  x: 6.250098771864998e-10,
+  y: 0.09879288822412491,
+  z: -0.021105332300066948
+}, {
+  x: 6.250098771864998e-10,
+  y: 0.09879288822412491,
+  z: -0.021105332300066948
+}, {
+  x: 1.7002150798361981e-9,
+  y: 0.08075393736362457,
+  z: -0.021105334162712097
+}, {
+  x: 1.7002150798361981e-9,
+  y: 0.08075393736362457,
+  z: -0.021105334162712097
+}, {
+  x: 1.714297481747451e-9,
+  y: 0.08051767200231552,
+  z: -0.018116597086191177
+}, {
+  x: 1.714297481747451e-9,
+  y: 0.08051767200231552,
+  z: -0.018116597086191177
+}, {
+  x: 1.7745017677484043e-9,
+  y: 0.07950761169195175,
+  z: -0.017054280266165733
+}, {
+  x: 1.7745017677484043e-9,
+  y: 0.07950761169195175,
+  z: -0.017054280266165733
+}, {
+  x: 1.8525417866399607e-9,
+  y: 0.07819831371307373,
+  z: -0.016856525093317032
+}, {
+  x: 1.8525417866399607e-9,
+  y: 0.07819831371307373,
+  z: -0.016856525093317032
+}, {
+  x: 1.924275405684739e-9,
+  y: 0.07699482887983322,
+  z: -0.017449786886572838
+}, {
+  x: 1.924275405684739e-9,
+  y: 0.07699482887983322,
+  z: -0.017449786886572838
+}, {
+  x: 1.953144312949462e-9,
+  y: 0.0765104815363884,
+  z: -0.01833067648112774
+}, {
+  x: 1.953144312949462e-9,
+  y: 0.0765104815363884,
+  z: -0.01833067648112774
+}, {
+  x: 1.965059892583554e-9,
+  y: 0.07631057500839233,
+  z: -0.021105336025357246
+}, {
+  x: 1.965059892583554e-9,
+  y: 0.07631057500839233,
+  z: -0.021105336025357246
+}, {
+  x: 2.4947495180782653e-9,
+  y: 0.06742385774850845,
+  z: -0.021105336025357246
+}, {
+  x: 2.4947495180782653e-9,
+  y: 0.06742385774850845,
+  z: -0.021105336025357246
+}, {
+  x: 2.503704132905682e-9,
+  y: 0.06727362424135208,
+  z: -0.018105152994394302
+}, {
+  x: 2.503704132905682e-9,
+  y: 0.06727362424135208,
+  z: -0.018105152994394302
+}, {
+  x: 2.571708179743837e-9,
+  y: 0.06613270938396454,
+  z: -0.016959065571427345
+}, {
+  x: 2.571708179743837e-9,
+  y: 0.06613270938396454,
+  z: -0.016959065571427345
+}, {
+  x: 2.6591682189547328e-9,
+  y: 0.06466536968946457,
+  z: -0.016765890643000603
+}, {
+  x: 2.6591682189547328e-9,
+  y: 0.06466536968946457,
+  z: -0.016765890643000603
+}, {
+  x: 2.7385753664788126e-9,
+  y: 0.06333313882350922,
+  z: -0.017454519867897034
+}, {
+  x: 2.7385753664788126e-9,
+  y: 0.06333313882350922,
+  z: -0.017454519867897034
+}, {
+  x: 2.767359896793664e-9,
+  y: 0.0628502145409584,
+  z: -0.018239127472043037
+}, {
+  x: 2.767359896793664e-9,
+  y: 0.0628502145409584,
+  z: -0.018239127472043037
+}, {
+  x: 2.77283662697414e-9,
+  y: 0.06275832653045654,
+  z: -0.021105336025357246
+}, {
+  x: 2.77283662697414e-9,
+  y: 0.06275832653045654,
+  z: -0.021105336025357246
+}, {
+  x: 6.513524830609185e-9,
+  y: 0,
+  z: -0.021105345338582993
+}, {
+  x: 6.513524830609185e-9,
+  y: 0,
+  z: -0.021105345338582993
+}, {
+  x: 6.513524830609185e-9,
+  y: 0,
+  z: 1.19209286886246e-9
+}, {
+  x: -2.9929081435398075e-10,
+  y: 0.11430007964372635,
+  z: -0.011996750719845295
+}, {
+  x: -2.9929081435398075e-10,
+  y: 0.11430007964372635,
+  z: 1.5497207073167374e-8
+}, {
+  x: 1.965059892583554e-9,
+  y: 0.07631057500839233,
+  z: -0.021105336025357246
+}, {
+  x: 2.503704132905682e-9,
+  y: 0.06727362424135208,
+  z: -0.018105152994394302
+}
+// ,{x: 2.4947495180782653e-9, y: 0.06742385774850845, z: -0.021105336025357246}
+// ,{x: 1.953144312949462e-9, y: 0.0765104815363884, z: -0.01833067648112774}
+// ,{x: 6.250098771864998e-10, y: 0.09879288822412491, z: -0.021105332300066948}
+// ,{x: 1.714297481747451e-9, y: 0.08051767200231552, z: -0.018116597086191177}
+// ,{x: 1.7002150798361981e-9, y: 0.08075393736362457, z: -0.021105334162712097}
+// ,{x: 2.7385753664788126e-9, y: 0.06333313882350922, z: -0.017454519867897034}
+// ,{x: 1.924275405684739e-9, y: 0.07699482887983322, z: -0.017449786886572838}
+// ,{x: 2.571708179743837e-9, y: 0.06613270938396454, z: -0.016959065571427345}
+// ,{x: 2.6591682189547328e-9, y: 0.06466536968946457, z: -0.016765890643000603}
+// ,{x: 1.7745017677484043e-9, y: 0.07950761169195175, z: -0.017054280266165733}
+// ,{x: 1.8525417866399607e-9, y: 0.07819831371307373, z: -0.016856525093317032}
+// ,{x: 1.2252029946147047e-10, y: 0.1072232574224472, z: -0.017748551443219185}
+// ,{x: 1.960347578711108e-10, y: 0.10598989576101303, z: -0.015734391286969185}
+// ,{x: 1.7019147202645968e-10, y: 0.10642346739768982, z: -0.016814865171909332}
+// ,{x: 6.436266797305024e-11, y: 0.10819898545742035, z: -0.018374618142843246}
+// ,{x: -1.7337242481495901e-13, y: 0.10928171873092651, z: -0.018692459911108017}
+// ,{x: -6.697859628035374e-11, y: 0.11040252447128296, z: -0.01870192028582096}
+// ,{x: -1.3194607906275024e-10, y: 0.11149249970912933, z: -0.018403001129627228}
+// ,{x: -1.9096546566288453e-10, y: 0.11248268187046051, z: -0.017795395106077194}
+// ,{x: -2.3992810516126895e-10, y: 0.11330413818359375, z: -0.016878647729754448}
+// ,{x: -2.6880001002815845e-10, y: 0.11378852277994156, z: -0.01577681116759777}
+// ,{x: 2.1125515226039226e-10, y: 0.10573453456163406, z: -0.01397657860070467}
+// ,{x: -2.857603875749959e-10, y: 0.11407307535409927, z: -0.014381852000951767}
+// ,{x: 2.1715663989230194e-10, y: 0.10563552379608154, z: -0.011996750719845295}
+// ,{x: 3.628213007811354e-10, y: 0.10319168120622635, z: -0.011996750719845295}
+// ,{x: 3.628213007811354e-10, y: 0.10319168120622635, z: -0.016662126407027245}
+// ,{x: 3.6975278394635325e-10, y: 0.10307538509368896, z: -0.017714371904730797}
+// ,{x: 5.649337664337395e-10, y: 0.09980079531669617, z: -0.020989060401916504}
+// ,{x: 5.097632316264367e-10, y: 0.1007264032959938, z: -0.020657790824770927}
+// ,{x: 3.89493381991457e-10, y: 0.1027441918849945, z: -0.01863997057080269}
+// ,{x: 4.204628034631952e-10, y: 0.10222461819648743, z: -0.01945677399635315}
+// ,{x: 4.610791193293551e-10, y: 0.10154318809509277, z: -0.020138230174779892}
+// ,{x: 2.77283662697414e-9, y: 0.06275832653045654, z: -0.021105336025357246}
+// ,{x: 6.513524830609185e-9, y: 0, z: -0.021105345338582993}
+// ,{x: 6.513524830609185e-9, y: 0, z: 1.19209286886246e-9}
+// ,{x: 2.767359896793664e-9, y: 0.0628502145409584, z: -0.018239127472043037}
+// ,{x: -2.9929081435398075e-10, y: 0.11430007964372635, z: 1.5497207073167374e-8}
+// ,{x: -2.9929081435398075e-10, y: 0.11430007964372635, z: -0.011996750719845295}
+// ,{x: 1.965059892583554e-9, y: 0.07631057500839233, z: -0.021105336025357246}
+// ,{x: 2.4947495180782653e-9, y: 0.06742385774850845, z: -0.021105336025357246}
+// ,{x: 2.503704132905682e-9, y: 0.06727362424135208, z: -0.018105152994394302}
+// ,{x: 1.953144312949462e-9, y: 0.0765104815363884, z: -0.01833067648112774}
+// ,{x: 6.250098771864998e-10, y: 0.09879288822412491, z: -0.021105332300066948}
+// ,{x: 1.7002150798361981e-9, y: 0.08075393736362457, z: -0.021105334162712097}
+// ,{x: 1.714297481747451e-9, y: 0.08051767200231552, z: -0.018116597086191177}
+// ,{x: 2.7385753664788126e-9, y: 0.06333313882350922, z: -0.017454519867897034}
+// ,{x: 1.924275405684739e-9, y: 0.07699482887983322, z: -0.017449786886572838}
+// ,{x: 2.571708179743837e-9, y: 0.06613270938396454, z: -0.016959065571427345}
+// ,{x: 2.6591682189547328e-9, y: 0.06466536968946457, z: -0.016765890643000603}
+// ,{x: 1.7745017677484043e-9, y: 0.07950761169195175, z: -0.017054280266165733}
+// ,{x: 1.8525417866399607e-9, y: 0.07819831371307373, z: -0.016856525093317032}
+// ,{x: 1.2252029946147047e-10, y: 0.1072232574224472, z: -0.017748551443219185}
+// ,{x: 1.7019147202645968e-10, y: 0.10642346739768982, z: -0.016814865171909332}
+// ,{x: 1.960347578711108e-10, y: 0.10598989576101303, z: -0.015734391286969185}
+// ,{x: 6.436266797305024e-11, y: 0.10819898545742035, z: -0.018374618142843246}
+// ,{x: -1.7337242481495901e-13, y: 0.10928171873092651, z: -0.018692459911108017}
+// ,{x: -6.697859628035374e-11, y: 0.11040252447128296, z: -0.01870192028582096}
+// ,{x: -1.3194607906275024e-10, y: 0.11149249970912933, z: -0.018403001129627228}
+// ,{x: -1.9096546566288453e-10, y: 0.11248268187046051, z: -0.017795395106077194}
+// ,{x: -2.3992810516126895e-10, y: 0.11330413818359375, z: -0.016878647729754448}
+// ,{x: -2.6880001002815845e-10, y: 0.11378852277994156, z: -0.01577681116759777}
+// ,{x: 2.1125515226039226e-10, y: 0.10573453456163406, z: -0.01397657860070467}
+// ,{x: -2.857603875749959e-10, y: 0.11407307535409927, z: -0.014381852000951767}
+// ,{x: 2.1715663989230194e-10, y: 0.10563552379608154, z: -0.011996750719845295}
+// ,{x: 3.628213007811354e-10, y: 0.10319168120622635, z: -0.011996750719845295}
+// ,{x: 3.628213007811354e-10, y: 0.10319168120622635, z: -0.016662126407027245}
+// ,{x: 3.6975278394635325e-10, y: 0.10307538509368896, z: -0.017714371904730797}
+// ,{x: 5.649337664337395e-10, y: 0.09980079531669617, z: -0.020989060401916504}
+// ,{x: 5.097632316264367e-10, y: 0.1007264032959938, z: -0.020657790824770927}
+// ,{x: 3.89493381991457e-10, y: 0.1027441918849945, z: -0.01863997057080269}
+// ,{x: 4.204628034631952e-10, y: 0.10222461819648743, z: -0.01945677399635315}
+// ,{x: 4.610791193293551e-10, y: 0.10154318809509277, z: -0.020138230174779892}
+];

package/es/components/viewer3d/front3D.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import Viewer3D from "./viewer3d";
+import State3D from "./ruler-utils/state3D";
+import { isEmpty } from "../viewer2d/utils";
+var k = 0;
+export default function Front3D(_ref, _ref2) {
+  var width = _ref.width,
+    height = _ref.height,
+    state = _ref.state,
+    setToolbar = _ref.setToolbar,
+    replaceCabinet = _ref.replaceCabinet,
+    keyDownEnable = _ref.keyDownEnable,
+    catalog = _ref.catalog;
+  var viewer2DActions = _ref2.viewer2DActions;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var sceneWidth = width;
+  var sceneHeight = height;
+  if (mode !== state.get('mode')) {
+    k++;
+    setMode(state.get('mode'));
+  }
+  var mouseUpEvent = function mouseUpEvent(event) {
+    setToolbar('');
+  };
+  useEffect(function () {
+    if (!isEmpty(document.getElementById('front'))) document.getElementById('front').addEventListener('mouseup', mouseUpEvent);
+    return function () {
+      if (!isEmpty(document.getElementById('front'))) document.getElementById('front').removeEventListener('mouseup', mouseUpEvent);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+    width: sceneWidth,
+    height: sceneHeight,
+    id: "front",
+    style: {
+      position: 'absolute',
+      display: 'block'
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(width / 2, ", ").concat(height / 2, ")")
+  }, /*#__PURE__*/React.createElement(State3D, {
+    state: state,
+    catalog: catalog,
+    height: sceneHeight,
+    width: sceneWidth,
+    downloadFlag: false
+  }))), /*#__PURE__*/React.createElement(Viewer3D, {
+    id: "viewer3D",
+    key: k,
+    state: state,
+    width: width,
+    height: height,
+    setToolbar: setToolbar,
+    replaceCabinet: replaceCabinet,
+    keyDownEnable: keyDownEnable,
+    downloadFlag: false
+  }));
+}

package/es/components/viewer3d/grid-creator.js

@@ -0,0 +1,25 @@
+import * as Three from 'three';
+import { HELVETIKER } from "./libs/helvetiker_regular.typeface.js";
+import gridStreak from "./grids/grid-streak";
+import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
+export default function createGrid(scene) {
+  var gridMesh = new Three.Object3D();
+  gridMesh.name = 'grid';
+  var fontLoader = new FontLoader();
+  var font = fontLoader.parse(HELVETIKER); // For measures
+  var grids = scene.grids,
+    width = scene.width,
+    height = scene.height;
+  grids.forEach(function (grid) {
+    switch (grid.type) {
+      case 'horizontal-streak':
+        gridMesh.add(gridStreak(width, height, grid, font));
+        break;
+      default:
+        break;
+    }
+  });
+
+  // gridMesh.position.y = -1;
+  return gridMesh;
+}

package/es/components/viewer3d/grids/grid-horizontal-streak.js

@@ -0,0 +1,36 @@
+import * as Three from 'three';
+import { List } from 'immutable';
+import { COLORS } from "../../../shared-style";
+export default function (width, height, grid, font) {
+  var step = grid.properties.get('step');
+  var colors = grid.properties.has('color') ? new List([grid.properties.get('color')]) : grid.properties.get('colors');
+  var streak = new Three.Object3D();
+  streak.name = 'streak';
+  var counter = 0;
+  for (var i = 0; i <= height; i += step) {
+    var geometry = new Three.Geometry();
+    geometry.vertices.push(new Three.Vector3(0, 0, -i));
+    geometry.vertices.push(new Three.Vector3(width, 0, -i));
+    var color = colors.get(counter % colors.size);
+    var material = new Three.LineBasicMaterial({
+      color: color
+    });
+    if (counter % 5 == 0) {
+      var shape = new Three.TextGeometry('' + counter * step, {
+        size: 16,
+        height: 1,
+        font: font
+      });
+      var wrapper = new Three.MeshBasicMaterial({
+        color: COLORS.black
+      });
+      var words = new Three.Mesh(shape, wrapper);
+      words.rotation.x -= Math.PI / 2;
+      words.position.set(-90, 0, -i);
+      // streak.add(words);
+    }
+    streak.add(new Three.LineSegments(geometry, material));
+    counter++;
+  }
+  return streak;
+}

package/es/components/viewer3d/grids/grid-streak.js

@@ -0,0 +1,27 @@
+import * as Three from 'three';
+import { List } from 'immutable';
+import { COLORS } from "../../../shared-style";
+export default function (width, height, grid, font) {
+  var step = grid.properties.get('step');
+  var colors = grid.properties.has('color') ? new List([grid.properties.get('color')]) : grid.properties.get('colors');
+  var streak = new Three.Object3D();
+  streak.name = 'streak';
+  var counter = 0;
+  for (var i = 0; i <= height; i += step) {
+    for (var j = 0; j <= width; j += step) {
+      var geometry = new Three.BufferGeometry();
+      geometry.setAttribute('position', new Three.BufferAttribute(new Float32Array([0, 0, -i, width, 0, -i]), 3));
+      var color = colors.get(counter % colors.size);
+      var material = new Three.LineBasicMaterial({
+        color: color
+      });
+      var circlegeometry = new Three.CircleGeometry(3, 32); // 3D dot's radius
+      var circle = new Three.Mesh(circlegeometry, material);
+      circle.rotation.x -= Math.PI / 2;
+      circle.position.set(j, -0.5, -i);
+      streak.add(circle);
+      counter++;
+    }
+  }
+  return streak;
+}

package/es/components/viewer3d/grids/grid-vertical-streak.js

@@ -0,0 +1,36 @@
+import * as Three from 'three';
+import { List } from 'immutable';
+import { COLORS } from "../../../shared-style";
+export default function (width, height, grid, font) {
+  var step = grid.properties.get('step');
+  var colors = grid.properties.has('color') ? new List([grid.properties.get('color')]) : grid.properties.get('colors');
+  var streak = new Three.Object3D();
+  streak.name = 'streak';
+  var counter = 0;
+  for (var i = 0; i <= width; i += step) {
+    var geometry = new Three.Geometry();
+    geometry.vertices.push(new Three.Vector3(i, 0, 0));
+    geometry.vertices.push(new Three.Vector3(i, 0, -height));
+    var color = colors.get(counter % colors.size);
+    var material = new Three.LineBasicMaterial({
+      color: color
+    });
+    if (counter % 5 == 0) {
+      var shape = new Three.TextGeometry('' + counter * step, {
+        size: 16,
+        height: 1,
+        font: font
+      });
+      var wrapper = new Three.MeshBasicMaterial({
+        color: COLORS.black
+      });
+      var words = new Three.Mesh(shape, wrapper);
+      words.rotation.x -= Math.PI / 2;
+      words.position.set(i - 20, 0, 50);
+      // streak.add(words);
+    }
+    streak.add(new Three.LineSegments(geometry, material));
+    counter++;
+  }
+  return streak;
+}

package/es/components/viewer3d/libs/first-person-controls.js

@@ -0,0 +1,67 @@
+export function firstPersonOnKeyDown(event, moveForward, moveLeft, moveBackward, moveRight, canJump, velocity) {
+  switch (event.keyCode) {
+    case 38: // up
+    case 87:
+      // w
+      moveForward = true;
+      break;
+    case 37: // left
+    case 65:
+      // a
+      moveLeft = true;
+      break;
+    case 40: // down
+    case 83:
+      // s
+      moveBackward = true;
+      break;
+    case 39: // right
+    case 68:
+      // d
+      moveRight = true;
+      break;
+    case 32:
+      // space
+      if (canJump === true) velocity.y += 225;
+      canJump = false;
+      break;
+  }
+  return {
+    moveForward: moveForward,
+    moveLeft: moveLeft,
+    moveBackward: moveBackward,
+    moveRight: moveRight,
+    canJump: canJump
+  };
+}
+export function firstPersonOnKeyUp(event, moveForward, moveLeft, moveBackward, moveRight, canJump) {
+  switch (event.keyCode) {
+    case 38: // up
+    case 87:
+      // w
+      moveForward = false;
+      break;
+    case 37: // left
+    case 65:
+      // a
+      moveLeft = false;
+      break;
+    case 40: // down
+    case 83:
+      // s
+      moveBackward = false;
+      break;
+    case 39: // right
+    case 68:
+      // d
+      moveRight = false;
+      break;
+  }
+  return {
+    moveForward: moveForward,
+    moveLeft: moveLeft,
+    moveBackward: moveBackward,
+    moveRight: moveRight,
+    canJump: canJump
+  };
+}