UNPKG

kitchen-simulator

Version:

It is a kitchen simulator (self-contained micro-frontend).

286 lines (260 loc) 9.66 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _react = _interopRequireDefault(require("react")); var Three = _interopRequireWildcard(require("three")); var _loadObj = require("../../utils/load-obj"); var _constants = require("../../../constants"); function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); } var cached3DWindow = null; var STYLE_HOLE_BASE = { stroke: '#000', strokeWidth: '3px', fill: '#000' }; var STYLE_HOLE_SELECTED = { stroke: '#0096fd', strokeWidth: '3px', fill: '#0096fd', cursor: 'move' }; var EPSILON = 3; var _default = exports["default"] = { name: 'window-vertical', prototype: 'holes', info: { tag: ['window'], title: 'Vertical', description: 'Vertical Window', image: '/assets/img/svg/window/Vertical.svg', url: '/assets/gltf/window_vertical.gltf' }, properties: { width: { label: 'width', type: 'length-measure', defaultValue: { length: 86.36 } }, height: { label: 'height', type: 'length-measure', defaultValue: { length: 100 } }, altitude: { label: 'Distance from floor', type: 'length-measure', defaultValue: { length: 121.92 } }, thickness: { label: 'thickness', type: 'length-measure', defaultValue: { length: 6 } } }, render2D: function render2D(element, layer, scene) { var STYLE_HOLE_BASE = { stroke: 'rgb(73, 73, 73)', strokeWidth: '1px', strokeDasharray: '9,5', fill: 'rgb(73, 73, 73)' }; var STYLE_HOLE_SELECTED = { stroke: '#0096fd', strokeWidth: '1px', strokeDasharray: '9,5', fill: '#0096fd', cursor: 'move' }; var STYLE_ARC_BASE = { stroke: 'rgb(73, 73, 73)', strokeWidth: '1px', strokeDasharray: '9,5', fill: 'none' }; var STYLE_ARC_SELECTED = { stroke: '#0096fd', strokeWidth: '1px', strokeDasharray: '9,5', fill: 'none', cursor: 'move' }; var STYLE_STR0 = { fill: 'rgb(185, 185, 185)', stroke: '#494949', strokeWidth: '1', strokeMiterlimit: '2.61313' }; var STYLE_STR0_S = { fill: 'rgb(185, 185, 185)', stroke: '#0096fd', strokeWidth: '1', strokeMiterlimit: '2.61313' }; var STYLE_STR1 = { fill: 'none', stroke: '#494949', strokeWidth: '1', strokeLinecap: 'round', strokeLinejoin: 'round', strokeMiterlimit: '2.61313', strokeDasharray: '23.860041 11.930021' }; var STYLE_FILL2 = { fill: '#1183B7' }; var STYLE_FNT0 = { fill: 'white', fontWeight: 'normal', fontSize: '12px', fontFamily: 'Proxima Nova Rg' }; //let line = layer.lines.get(hole.line); //let epsilon = line.properties.get('thickness') / 2; var EPSILON = 3; var lineWidth = element.properties.get('thickness').get('length'); var flip = element.properties.get('flip'); var holeWidth = element.properties.get('width').get('length'); var holePath = "M".concat(0, " ", -EPSILON, " L").concat(holeWidth, " ").concat(-EPSILON, " L").concat(holeWidth, " ").concat(EPSILON, " L", 0, " ").concat(EPSILON, " z"); var arcPath = "M".concat(0, ",", 0, " A", holeWidth, ",").concat(holeWidth, " 0 0,1 ").concat(holeWidth, ",").concat(holeWidth); var holeStyle = element.selected ? STYLE_HOLE_SELECTED : STYLE_HOLE_BASE; var arcStyle = element.selected ? STYLE_ARC_SELECTED : STYLE_ARC_BASE; var rectStyle = element.selected ? STYLE_STR0_S : STYLE_STR0; var length = element.properties.get('width').get('length'); return /*#__PURE__*/_react["default"].createElement("g", { transform: "translate(".concat(-length / 2, ", 0)") }, /*#__PURE__*/_react["default"].createElement("rect", { style: rectStyle, x: "0", y: -lineWidth / 2, width: holeWidth, height: lineWidth })); }, render3D: function render3D(element, layer, scene) { var onLoadItem = function onLoadItem(object) { var width = element.properties.get('width').get('length'); var height = element.properties.get('height').get('length'); var thickness = element.properties.get('thickness').get('length'); (0, _loadObj.scaleObject)(object, [90, 100, 6], [width, height, thickness]); if (element.selected) { var box = new Three.BoxHelper(object, 0x99c3fb); box.material.linewidth = 2; box.material.depthTest = false; box.renderOrder = 1000; object.add(box); } //let normalMap = require('./texture.png'); //let t = new Three.TextureLoader().load(normalMap); var examplecolor = new Three.Color(0xffffff); var mat2 = new Three.MeshStandardMaterial({ color: examplecolor, metalness: 0.1, roughness: 0.9 }); //mat2.map = t; // mat2.envMap = textureCube; for (var j = 0; j < object.children.length; j++) { if (object.children[j].type === _constants.OBJTYPE_MESH) { if (object.children[j].name.includes('_glass')) object.children[j].scale.z /= 2; object.children[j].material = mat2; object.children[j].receiveShadow = true; } } return object; }; if (cached3DWindow) { return Promise.resolve(onLoadItem(cached3DWindow.clone())); } return (0, _loadObj.loadGLTF)(element.url).then(function (object) { cached3DWindow = object; return onLoadItem(cached3DWindow.clone()); }); // function createTenda() { // let radialWave = function (u, v) { // let r = 10; // let x = Math.sin(u) * 3 * r; // let z = Math.sin(v / 2) * 2 * r; // let y = (Math.sin(u * 2 * Math.PI) + Math.cos(v * 2 * Math.PI)) * .5; // return new Three.Vector3(x, y, z); // }; // //color // let white = new Three.MeshLambertMaterial({ color: 0xeae6ca }); // let Tenda = new Three.Object3D(); // let mesh = createMesh(new Three.ParametricGeometry(radialWave, 20, 20)); // mesh.rotation.x += Math.PI / 2; // mesh.rotation.y += Math.PI / 2; // mesh.position.y += 3.1; // mesh.position.x += .05; // mesh.scale.set(.125, .125, .125); // let mesh2 = mesh.clone(); // mesh2.rotation.x += Math.PI; // mesh2.position.set(1.4, 0, 0.06); // Tenda.add(mesh); // Tenda.add(mesh2); // for (let i = -.7; i > -3.4; i -= .45) { // let geometry = new Three.TorusGeometry(.08, .016, 32, 32, 2 * Math.PI); // let torus = new Three.Mesh(geometry, white); // if (i == -1.15) // torus.position.set(i, 3.14, .045); // else if (i == -2.5) // torus.position.set(i, 3.14, -.01); // else // torus.position.set(i, 3.14, .04); // torus.rotation.y += Math.PI / 2; // Tenda.add(torus); // } // let geometryAsta = new Three.CylinderGeometry(0.02, 0.02, 1.25, 32); // let asta = new Three.Mesh(geometryAsta, white); // asta.position.set(-1.1, 3.18, 0.02); // asta.rotation.z += Math.PI / 2; // Tenda.add(asta); // let asta2 = asta.clone(); // asta2.position.set(-2.5, 3.18, 0.02); // Tenda.add(asta2); // let geometrySphereUp = new Three.SphereGeometry(0.04, 32, 32); // let sphere = new Three.Mesh(geometrySphereUp, white); // sphere.position.set(-.5, 3.18, 0.02); // sphere.rotation.x += Math.PI / 2; // sphere.scale.set(0.8, 1, 1); // Tenda.add(sphere); // let sphere2 = sphere.clone(); // sphere2.position.x += -1.2; // Tenda.add(sphere2); // let sphere3 = sphere.clone(); // sphere3.position.x += -1.4; // Tenda.add(sphere3); // let sphere4 = sphere.clone(); // sphere4.position.x += -2.6; // Tenda.add(sphere4); // let valueObject = new Three.Box3().setFromObject(Tenda); // let deltaX = Math.abs(valueObject.max.x - valueObject.min.x); // let deltaY = Math.abs(valueObject.max.y - valueObject.min.y); // let deltaZ = Math.abs(valueObject.max.z - valueObject.min.z); // Tenda.position.x += width / 1.48; // Tenda.position.y += -height / 2.1; // Tenda.position.z += thickness / 1024; // Tenda.scale.set(width / deltaX, height / deltaY, thickness / deltaZ); // return Tenda; // } // function createMesh(geom) { // geom.applyMatrix(new Three.Matrix4().makeTranslation(-25, 0, -25)); // let meshMaterial = new Three.MeshLambertMaterial({ color: 0xffffff, opacity: 0.9, transparent: true }); // meshMaterial.side = Three.DoubleSide; // let plane = new Three.Mesh(geom, meshMaterial); // return plane; // } } }; module.exports = exports.default;