kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
222 lines (221 loc) • 6.66 kB
JavaScript
import React from 'react';
import * as Three from 'three';
import { loadGLTF } from "../../utils/load-obj";
import { OBJTYPE_MESH } from "../../../constants";
var cached3DDoor = null;
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: '13px',
fontFamily: 'Proxima Nova Rg'
};
var EPSILON = 3;
export default {
name: 'Closet',
prototype: 'holes',
info: {
title: 'Closet',
tag: ['door'],
description: 'Closet door(Wooden)',
image: '/assets/img/svg/door/Closet.svg',
url: '/assets/gltf/door_closet.gltf'
},
properties: {
width: {
label: 'Width',
type: 'length-measure',
defaultValue: {
length: 91.44
}
},
height: {
label: 'Height',
type: 'length-measure',
defaultValue: {
length: 215
},
length: 215
},
altitude: {
label: 'Altitude',
type: 'length-measure',
defaultValue: {
length: 0
}
},
thickness: {
label: 'Thickness',
type: 'length-measure',
defaultValue: {
length: 6
}
},
flip_orizzontal: {
label: 'Flip Door',
type: 'checkbox',
defaultValue: false,
values: {
none: false,
yes: true
}
}
},
render2D: function render2D(element, layer, scene) {
var flip = element.properties.get('flip_orizzontal');
var lineWidth = 6;
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');
if (flip == false) {
return /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(-length / 2, ", 0)")
}, /*#__PURE__*/React.createElement("path", {
d: arcPath,
style: arcStyle,
transform: "translate(".concat(0, ",", holeWidth, ") scale(", 1, ",").concat(-1, ") rotate(", 0, ")")
}), /*#__PURE__*/React.createElement("line", {
x1: 0,
y1: holeWidth - EPSILON,
x2: 0,
y2: 0 - EPSILON,
style: holeStyle,
transform: "scale(".concat(-1, ",", 1, ")")
}), /*#__PURE__*/React.createElement("rect", {
style: rectStyle,
x: "0",
y: -lineWidth / 2,
width: holeWidth,
height: lineWidth
}));
} else {
return /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(-length / 2, ", 0)")
}, /*#__PURE__*/React.createElement("path", {
d: arcPath,
style: arcStyle,
transform: "translate(".concat(0, ",", -holeWidth, ") scale(", 1, ",", 1, ") rotate(", 0, ")")
}), /*#__PURE__*/React.createElement("line", {
x1: 0,
y1: -holeWidth - EPSILON,
x2: 0,
y2: 0 - EPSILON,
style: holeStyle,
transform: "scale(".concat(1, ",", 1, ")")
}), /*#__PURE__*/React.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 boundingBox = new Three.Box3().setFromObject(object);
var initialWidth = boundingBox.max.x - boundingBox.min.x;
var initialHeight = boundingBox.max.y - boundingBox.min.y;
var initialThickness = boundingBox.max.z - boundingBox.min.z;
if (element.selected) {
var box = new Three.BoxHelper(object, 0x99c3fb);
box.material.linewidth = 2;
box.material.depthTest = false;
box.renderOrder = 1000;
object.add(box);
}
var params = {
envMap: 'HDR',
roughness: 0.9,
metalness: 0.1,
exposure: 1.0
};
var examplecolor = new Three.Color(0xffffff);
var mat2 = new Three.MeshStandardMaterial({
color: examplecolor,
metalness: params.metalness,
roughness: params.roughness
});
// let normalMap = require('./texture.png');
// let t = new Three.TextureLoader().load(normalMap);
// let mat2 = new Three.MeshStandardMaterial({
// metalness: params.metalness,
// roughness: params.roughness
// });
// mat2.map = t;
// mat2.envMap = textureCube;
for (var j = 0; j < object.children.length; j++) {
if (object.children[j].type === OBJTYPE_MESH) {
object.children[j].material = mat2;
object.children[j].receiveShadow = true;
}
}
var width = element.properties.get('width').get('length');
var height = element.properties.get('height').get('length');
var thickness = element.properties.get('thickness').get('length');
// console.log(width, height, thickness)
object.scale.set(width / initialWidth, height / initialHeight, thickness / initialThickness);
return object;
};
if (cached3DDoor) {
return Promise.resolve(onLoadItem(cached3DDoor.clone()));
}
return loadGLTF(element.url).then(function (object) {
cached3DDoor = object;
return onLoadItem(cached3DDoor.clone());
});
}
};