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

package/es/components/viewer3d/three-memory-cleaner.js

@@ -0,0 +1,51 @@
+import * as Three from 'three';
+function disposeGeometry(geometry) {
+  geometry.dispose();
+}
+function disposeTexture(texture) {
+  if (!texture) {
+    return;
+  }
+  texture.dispose();
+}
+function disposeMultimaterial(material) {
+  if (!(material.isMaterial && !Array.isArray(material))) {
+    return;
+  }
+  material.materials.forEach(function (material) {
+    disposeMaterial(material);
+  });
+}
+function disposeMaterial(material) {
+  if (!(material instanceof Three.Material)) {
+    return;
+  }
+
+  // disposeTexture(material.map);
+  // material.map = null;
+  material.dispose();
+}
+function disposeMesh(mesh) {
+  if (!(mesh instanceof Three.Mesh || mesh instanceof Three.BoxHelper || mesh instanceof Three.LineSegments)) {
+    return;
+  }
+  if (mesh.geometry) {
+    disposeGeometry(mesh.geometry);
+  }
+  // disposeMultimaterial(mesh.material);
+  disposeMaterial(mesh.material);
+  mesh.geometry = null;
+  mesh.material = null;
+}
+export function disposeScene(scene3D) {
+  scene3D.traverse(function (child) {
+    disposeMesh(child);
+    child = null;
+  });
+}
+export function disposeObject(object) {
+  object.traverse(function (child) {
+    disposeMesh(child);
+    child = null;
+  });
+}

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

@@ -0,0 +1,311 @@
+'use strict';
+
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Three from 'three';
+import { parseData, updateScene } from "./scene-creator";
+import { disposeScene } from "./three-memory-cleaner";
+import diff from 'immutablediff';
+import { initPointerLock } from "./pointer-lock-navigation";
+import { firstPersonOnKeyDown, firstPersonOnKeyUp } from "./libs/first-person-controls";
+import * as SharedStyle from "../../shared-style";
+import AppContext from "../../AppContext";
+var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
+  function Viewer3DFirstPerson(props) {
+    var _this;
+    _classCallCheck(this, Viewer3DFirstPerson);
+    _this = _callSuper(this, Viewer3DFirstPerson, [props]);
+    _this.width = props.width;
+    _this.height = props.height;
+    _this.stopRendering = false;
+    _this.canvasWrapperRef = /*#__PURE__*/React.createRef();
+    _this.renderer = window.__threeRenderer || new Three.WebGLRenderer({
+      preserveDrawingBuffer: true
+    });
+    window.__threeRenderer = _this.renderer;
+    return _this;
+  }
+  _inherits(Viewer3DFirstPerson, _React$Component);
+  return _createClass(Viewer3DFirstPerson, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$context,
+        _this$context2,
+        _this$context3,
+        _this$context4,
+        _this$context5,
+        _this$context6,
+        _document$body$reques,
+        _document$body,
+        _this2 = this;
+      /** Variables for movement control **/
+      var prevTime = performance.now();
+      var velocity = new Three.Vector3();
+      var direction = new Three.Vector3();
+      var moveForward = false;
+      var moveBackward = false;
+      var moveLeft = false;
+      var moveRight = false;
+      var canJump = false;
+      var catalog = (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.catalog;
+      var actions = {
+        areaActions: (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.areaActions,
+        holesActions: (_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : _this$context3.holesActions,
+        itemsActions: (_this$context4 = this.context) === null || _this$context4 === void 0 ? void 0 : _this$context4.itemsActions,
+        linesActions: (_this$context5 = this.context) === null || _this$context5 === void 0 ? void 0 : _this$context5.linesActions,
+        projectActions: (_this$context6 = this.context) === null || _this$context6 === void 0 ? void 0 : _this$context6.projectActions
+      };
+      var state = this.props.state;
+      var data = state.scene;
+      var canvasWrapper = this.canvasWrapperRef.current;
+      if (!canvasWrapper) return;
+      var scene3D = new Three.Scene();
+      var sceneOnTop = new Three.Scene();
+
+      // RENDERER
+      this.renderer.setClearColor(new Three.Color(SharedStyle.COLORS.white));
+      this.renderer.setSize(this.width, this.height);
+
+      // LOAD DATA
+      this.planData = parseData(data, actions, catalog);
+      scene3D.add(this.planData.plan);
+
+      // CAMERA
+      var aspectRatio = this.width / this.height;
+
+      // NOTE: your original code used `width/height` identifiers that were not defined
+      // and also used OrthographicCamera with "aspect". Keeping your structure but fixing identifiers.
+      var camera = new Three.OrthographicCamera(this.width / -4, this.width / 4, this.height / 4, this.height / -4, 1, 1000);
+      sceneOnTop.add(camera);
+      camera.position.set(0, 0, 0);
+      camera.up = new Three.Vector3(0, 1, 0);
+
+      // LIGHT
+      var light = new Three.AmbientLight(0xafafaf);
+      scene3D.add(light);
+      var pointLight = new Three.PointLight(SharedStyle.COLORS.white, 0.4, 1000);
+      pointLight.position.set(0, 0, 0);
+      scene3D.add(pointLight);
+
+      // POINTER LOCK
+      document.body.requestPointerLock = document.body.requestPointerLock || document.body.mozRequestPointerLock || document.body.webkitRequestPointerLock;
+      (_document$body$reques = (_document$body = document.body).requestPointerLock) === null || _document$body$reques === void 0 || _document$body$reques.call(_document$body);
+      var _initPointerLock = initPointerLock(camera, this.renderer.domElement),
+        controls = _initPointerLock.controls,
+        pointerlockChangeEvent = _initPointerLock.pointerlockChangeEvent,
+        requestPointerLockEvent = _initPointerLock.requestPointerLockEvent;
+      this.controls = controls;
+      this.pointerlockChangeEvent = pointerlockChangeEvent; // <-- you referenced this in unmount
+      this.requestPointerLockEvent = requestPointerLockEvent;
+
+      /* Set user initial position */
+      var humanHeight = 170; // cm
+
+      var yInitialPosition = this.planData.boundingBox.min.y + (this.planData.boundingBox.min.y - this.planData.boundingBox.max.y) / 2 + humanHeight;
+      this.controls.getObject().position.set(-50, yInitialPosition, -100);
+      sceneOnTop.add(this.controls.getObject());
+
+      // KEYBOARD MOVE EVENTS
+      this.keyDownEvent = function (event) {
+        var moveResult = firstPersonOnKeyDown(event, moveForward, moveLeft, moveBackward, moveRight, canJump, velocity);
+        moveForward = moveResult.moveForward;
+        moveLeft = moveResult.moveLeft;
+        moveBackward = moveResult.moveBackward;
+        moveRight = moveResult.moveRight;
+        canJump = moveResult.canJump;
+      };
+      this.keyUpEvent = function (event) {
+        var moveResult = firstPersonOnKeyUp(event, moveForward, moveLeft, moveBackward, moveRight, canJump);
+        moveForward = moveResult.moveForward;
+        moveLeft = moveResult.moveLeft;
+        moveBackward = moveResult.moveBackward;
+        moveRight = moveResult.moveRight;
+        canJump = moveResult.canJump;
+      };
+      document.addEventListener('keydown', this.keyDownEvent);
+      document.addEventListener('keyup', this.keyUpEvent);
+
+      // POINTER
+      var pointer = new Three.Object3D();
+      pointer.name = 'pointer';
+      var pointerMaterial = new Three.MeshBasicMaterial({
+        depthTest: false,
+        depthWrite: false,
+        color: SharedStyle.COLORS.black
+      });
+      var pointerGeometry1 = new Three.BufferGeometry();
+      var vertice = [-10, 0, 0, 10, 0, 0];
+      pointerGeometry1.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertice), 3));
+      var linePointer1 = new Three.Line(pointerGeometry1, pointerMaterial);
+      linePointer1.position.z -= 100;
+      var pointerGeometry2 = new Three.BufferGeometry();
+      vertice = [0, 10, 0, 0, -10, 0];
+      pointerGeometry2.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertice), 3));
+      var linePointer2 = new Three.Line(pointerGeometry2, pointerMaterial);
+      linePointer2.renderDepth = 1e20;
+      linePointer2.position.z -= 100;
+      var pointerGeometry3 = new Three.BufferGeometry();
+      vertice = [-1, 1, 0, 1, 1, 0, 1, -1, 0, -1, -1, 0, -1, 1, 0];
+      pointerGeometry3.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertice), 3));
+      var linePointer3 = new Three.Line(pointerGeometry3, pointerMaterial);
+      linePointer3.position.z -= 100;
+      pointer.add(linePointer1);
+      pointer.add(linePointer2);
+      pointer.add(linePointer3);
+      camera.add(pointer);
+
+      // OBJECT PICKING
+      var toIntersect = [this.planData.plan];
+      var mouseVector = new Three.Vector2(0, 0);
+      var raycaster = new Three.Raycaster();
+      this.firstPersonMouseDown = function (event) {
+        var _this2$controls;
+        if (!((_this2$controls = _this2.controls) !== null && _this2$controls !== void 0 && _this2$controls.enabled)) return;
+        event.preventDefault();
+        raycaster.setFromCamera(mouseVector, camera);
+        var intersects = raycaster.intersectObjects(toIntersect, true);
+        if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
+          intersects[0].object.interact && intersects[0].object.interact();
+        } else {
+          var _actions$projectActio, _actions$projectActio2;
+          (_actions$projectActio = actions.projectActions) === null || _actions$projectActio === void 0 || (_actions$projectActio2 = _actions$projectActio.unselectAll) === null || _actions$projectActio2 === void 0 || _actions$projectActio2.call(_actions$projectActio);
+        }
+      };
+      document.addEventListener('mousedown', this.firstPersonMouseDown, false);
+      this.renderer.domElement.style.display = 'block';
+      canvasWrapper.appendChild(this.renderer.domElement);
+      this.renderer.autoClear = false;
+      var _render = function render() {
+        if (_this2.stopRendering) return;
+        yInitialPosition = _this2.planData.boundingBox.min.y + humanHeight;
+        var multiplier = 5;
+        var time = performance.now();
+        var delta = (time - prevTime) / 1000 * multiplier;
+        velocity.x -= velocity.x * 10.0 * delta;
+        velocity.z -= velocity.z * 10.0 * delta;
+        velocity.y -= 9.8 * 100.0 * delta / multiplier;
+        direction.z = Number(moveForward) - Number(moveBackward);
+        direction.x = Number(moveLeft) - Number(moveRight);
+        direction.normalize();
+        if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
+        if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;
+        _this2.controls.getObject().translateX(velocity.x * delta);
+        _this2.controls.getObject().translateY(velocity.y * delta);
+        _this2.controls.getObject().translateZ(velocity.z * delta);
+        if (_this2.controls.getObject().position.y < yInitialPosition) {
+          velocity.y = 0;
+          _this2.controls.getObject().position.y = yInitialPosition;
+          canJump = true;
+        }
+        prevTime = time;
+        var p = _this2.controls.getObject().position;
+        pointLight.position.set(p.x, p.y, p.z);
+        for (var elemID in _this2.planData.sceneGraph.LODs) {
+          _this2.planData.sceneGraph.LODs[elemID].update(camera);
+        }
+        _this2.renderer.clear();
+        _this2.renderer.render(scene3D, camera);
+        _this2.renderer.clearDepth();
+        _this2.renderer.render(sceneOnTop, camera);
+        requestAnimationFrame(_render);
+      };
+      _render();
+      this.camera = camera;
+      this.scene3D = scene3D;
+      this.sceneOnTop = sceneOnTop;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$context7, _this$context8, _this$context9, _this$context0, _this$context1, _prevProps$state;
+      var _this$props = this.props,
+        width = _this$props.width,
+        height = _this$props.height,
+        state = _this$props.state;
+      var camera = this.camera,
+        renderer = this.renderer,
+        scene3D = this.scene3D,
+        sceneOnTop = this.sceneOnTop,
+        planData = this.planData;
+      if (!camera || !renderer || !scene3D || !sceneOnTop || !planData) return;
+      var actions = {
+        areaActions: (_this$context7 = this.context) === null || _this$context7 === void 0 ? void 0 : _this$context7.areaActions,
+        holesActions: (_this$context8 = this.context) === null || _this$context8 === void 0 ? void 0 : _this$context8.holesActions,
+        itemsActions: (_this$context9 = this.context) === null || _this$context9 === void 0 ? void 0 : _this$context9.itemsActions,
+        linesActions: (_this$context0 = this.context) === null || _this$context0 === void 0 ? void 0 : _this$context0.linesActions,
+        projectActions: (_this$context1 = this.context) === null || _this$context1 === void 0 ? void 0 : _this$context1.projectActions
+      };
+
+      // size change
+      if (prevProps.width !== width || prevProps.height !== height) {
+        this.width = width;
+        this.height = height;
+
+        // OrthographicCamera doesn't use aspect, but your original code did this.
+        // We'll just update projection and renderer size.
+        camera.updateProjectionMatrix();
+        renderer.setSize(width, height);
+      }
+
+      // scene change
+      if (((_prevProps$state = prevProps.state) === null || _prevProps$state === void 0 ? void 0 : _prevProps$state.scene) !== (state === null || state === void 0 ? void 0 : state.scene)) {
+        var _this$context10;
+        var changedValues = diff(prevProps.state.scene, state.scene);
+        updateScene(planData, state.scene, prevProps.state.scene, changedValues.toJS(), actions, (_this$context10 = this.context) === null || _this$context10 === void 0 ? void 0 : _this$context10.catalog);
+      }
+      renderer.clear();
+      renderer.render(scene3D, camera);
+      renderer.clearDepth();
+      renderer.render(sceneOnTop, camera);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$renderer$domEle;
+      this.stopRendering = true;
+      this.renderer.autoClear = true;
+      document.removeEventListener('mousedown', this.firstPersonMouseDown);
+      document.removeEventListener('keydown', this.keyDownEvent);
+      document.removeEventListener('keyup', this.keyUpEvent);
+      document.removeEventListener('pointerlockchange', this.pointerlockChangeEvent);
+      document.removeEventListener('mozpointerlockchange', this.pointerlockChangeEvent);
+      document.removeEventListener('webkitpointerlockchange', this.pointerlockChangeEvent);
+      (_this$renderer$domEle = this.renderer.domElement) === null || _this$renderer$domEle === void 0 || _this$renderer$domEle.removeEventListener('click', this.requestPointerLockEvent);
+      if (this.scene3D) {
+        var _this$planData;
+        disposeScene(this.scene3D);
+        if ((_this$planData = this.planData) !== null && _this$planData !== void 0 && _this$planData.plan) this.scene3D.remove(this.planData.plan);
+      }
+      this.scene3D = null;
+      this.planData = null;
+
+      // defensive: renderLists.dispose may not exist in some three versions
+      try {
+        var _this$renderer$render, _this$renderer$render2;
+        (_this$renderer$render = this.renderer.renderLists) === null || _this$renderer$render === void 0 || (_this$renderer$render2 = _this$renderer$render.dispose) === null || _this$renderer$render2 === void 0 || _this$renderer$render2.call(_this$renderer$render);
+      } catch (_unused) {}
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        ref: this.canvasWrapperRef
+      });
+    }
+  }]);
+}(React.Component);
+_defineProperty(Viewer3DFirstPerson, "contextType", AppContext);
+export { Viewer3DFirstPerson as default };
+Viewer3DFirstPerson.propTypes = {
+  state: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
+};