kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
309 lines (284 loc) • 13.8 kB
JavaScript
'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";
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 ReactDOM from 'react-dom';
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";
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.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 _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.catalog;
var actions = {
areaActions: this.context.areaActions,
holesActions: this.context.holesActions,
itemsActions: this.context.itemsActions,
linesActions: this.context.linesActions,
projectActions: this.context.projectActions
};
var state = this.props.state;
var data = state.scene;
var canvasWrapper = ReactDOM.findDOMNode(this.refs.canvasWrapper);
var scene3D = new Three.Scene();
// As I need to show the pointer above all scene objects, I use this workaround http://stackoverflow.com/a/13309722
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;
var camera = new Three.OrthographicCamera(width / -4, width / 4, height / 4, height / -4, 1, 1000);
sceneOnTop.add(camera); // The pointer is on the camera so I show it above all
// Set position for the camera
camera.position.set(0, 0, 0);
camera.up = new Three.Vector3(0, 1, 0);
// HELPER AXIS
// let axisHelper = new Three.AxisHelper(100);
// scene3D.add(axisHelper);
// LIGHT
var light = new Three.AmbientLight(0xafafaf); // soft white light
scene3D.add(light);
// Add another 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.requestPointerLock();
var _initPointerLock = initPointerLock(camera, this.renderer.domElement),
controls = _initPointerLock.controls,
pointerlockChangeEvent = _initPointerLock.pointerlockChangeEvent,
requestPointerLockEvent = _initPointerLock.requestPointerLockEvent;
this.controls = controls;
this.pointerlockChangeListener = pointerlockChangeEvent;
this.requestPointerLockEvent = requestPointerLockEvent;
/* Set user initial position */
var humanHeight = 170; // 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()); // Add the pointer lock controls to the scene that will be rendered on top
// Add move controls on the page
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);
// Add a pointer to the scene
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); // Add the pointer to the camera
// OBJECT PICKING
var toIntersect = [this.planData.plan];
var mouseVector = new Three.Vector2(0, 0);
var raycaster = new Three.Raycaster();
this.firstPersonMouseDown = function (event) {
// First of all I check if controls are enabled
if (_this2.controls.enabled) {
event.preventDefault();
/* Per avere la direzione da assegnare al raycaster, chiamo il metodo getDirection di PointerLockControls,
* che restituisce una funzione che a sua volta prende un vettore, vi scrive i valori degli oggetti
* pitch e yaw e lo restituisce */
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 {
_this2.context.projectActions.unselectAll();
}
}
};
document.addEventListener('mousedown', this.firstPersonMouseDown, false);
this.renderer.domElement.style.display = 'block';
// add the output of the renderer to the html element
canvasWrapper.appendChild(this.renderer.domElement);
this.renderer.autoClear = false;
var _render = function render() {
if (!_this2.stopRendering) {
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; // 100.0 = mass
direction.z = Number(moveForward) - Number(moveBackward);
direction.x = Number(moveLeft) - Number(moveRight);
direction.normalize(); // this ensures consistent movements in all directions
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;
// Set light position
var controlObjectPosition = _this2.controls.getObject().position;
pointLight.position.set(controlObjectPosition.x, controlObjectPosition.y, controlObjectPosition.z);
for (var elemID in _this2.planData.sceneGraph.LODs) {
_this2.planData.sceneGraph.LODs[elemID].update(camera);
}
_this2.renderer.clear(); // clear buffers
_this2.renderer.render(scene3D, camera); // render scene 1
_this2.renderer.clearDepth(); // clear depth buffer
_this2.renderer.render(sceneOnTop, camera); // render scene 2
requestAnimationFrame(_render);
}
};
_render();
this.camera = camera;
this.scene3D = scene3D;
this.sceneOnTop = sceneOnTop;
// this.planData = planData;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
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.domElement.removeEventListener('click', this.requestPointerLockEvent);
disposeScene(this.scene3D);
this.scene3D.remove(this.planData.plan);
this.scene3D = null;
this.planData = null;
this.renderer.renderLists.dispose();
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var width = nextProps.width,
height = nextProps.height;
var camera = this.camera,
renderer = this.renderer,
scene3D = this.scene3D,
sceneOnTop = this.sceneOnTop,
planData = this.planData;
var actions = {
areaActions: this.context.areaActions,
holesActions: this.context.holesActions,
itemsActions: this.context.itemsActions,
linesActions: this.context.linesActions,
projectActions: this.context.projectActions
};
this.width = width;
this.height = height;
camera.aspect = width / height;
camera.updateProjectionMatrix();
if (nextProps.scene !== this.props.state.scene) {
var changedValues = diff(this.props.state.scene, nextProps.state.scene);
updateScene(planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog);
}
renderer.setSize(width, height);
renderer.clear(); // clear buffers
renderer.render(scene3D, camera); // render scene 1
renderer.clearDepth(); // clear depth buffer
renderer.render(sceneOnTop, camera); // render scene 2
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement('div', {
ref: 'canvasWrapper'
});
}
}]);
}(React.Component);
export { Viewer3DFirstPerson as default };
Viewer3DFirstPerson.propTypes = {
state: PropTypes.object.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired
};
Viewer3DFirstPerson.contextTypes = {
areaActions: PropTypes.object.isRequired,
holesActions: PropTypes.object.isRequired,
itemsActions: PropTypes.object.isRequired,
linesActions: PropTypes.object.isRequired,
projectActions: PropTypes.object.isRequired,
catalog: PropTypes.object
};