UNPKG

iv-3d-lib

Version:

A reusable ThreeJS library providing features for Ivee 3D Editor.

790 lines 79.2 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Iv3dObjectHandler = void 0; const THREE = require("three"); const TWEEN = require("tween.js"); const parser = require("expr-eval"); const iv_3d_object_1 = require("./models/iv-3d-object"); const cfg = require("./wgl-util-cfgs"); const k_gen_1 = require("./models/k-gen"); const wgl_util_1 = require("./wgl-util"); const iv_3d_light_1 = require("./models/iv-3d-light"); const user_service_1 = require("./services/user-service"); const iv_3d_shader_1 = require("./models/iv-3d-shader"); const iv_3d_data_source_1 = require("./models/iv-3d-data-source"); class Iv3dObjectHandler { constructor(userSvc, errorSvc, environment) { this.userSvc = userSvc; this.errorSvc = errorSvc; this.environment = environment; this.offset = new cfg.XYZ(100, 100, 100); this.radius = 50; this.cssBackgroundColor = '#1E1E1E'; this.oParser = new parser.Parser(); this.fonts = [ 'helvetiker', 'optimer', 'gentilis', 'droid/droid_serif' ]; this.fontWeights = ['regular', 'bold']; this.materials = ['LineBasicMaterial', 'LineDashedMaterial', 'MeshBasicMaterial', 'MeshDepthMaterial', 'MeshLambertMaterial', 'MeshPhongMaterial', 'MeshStandardMaterial', 'MeshToonMaterial', 'PointsMaterial', 'MultiMaterial']; // , 'MeshNormalMaterial', 'RawShaderMaterial', 'MeshPhysicalMaterial', 'ShaderMaterial', 'ShadowMaterial', 'SpriteMaterial']; // 'Material', 'MultiMaterial' this.objectTypes = []; this.valueFormats = []; this.lineCfg = { start: { x: 0, y: 0, z: 0 }, end: { x: this.offset.x / 3, y: this.offset.y / 3, z: this.offset.z / 3 }, color: Math.random() * 0xFFFFFF }; this.lineGeomProps = []; this.cubeCfg = { width: this.offset.x, height: this.offset.y, depth: this.offset.z, color: Math.random() * 0xFF0000, wireframe: false, position: { x: 0, y: 0, z: 0 }, widthSegments: 1, heightSegments: 1, depthSegments: 1, castShadow: true, rotation: { x: 0, y: 0, z: 0 }, rotationSpeed: 0.5 }; this.cubeGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.box, readOnly: true }, { prop1: null, prop2: 'width', type: 'number', label: 'Width', min: 0, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'height', type: 'number', label: 'Height', min: 0, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'depth', type: 'number', label: 'Depth', min: 0, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'widthSegments', type: 'number', label: 'Width Segments', min: 1, max: 100, value: 1, step: 10 }, { prop1: null, prop2: 'heightSegments', type: 'number', label: 'Height Segments', min: 1, max: 100, value: 1, step: 10 }, { prop1: null, prop2: 'depthSegments', type: 'number', label: 'Depth Segments', min: 1, max: 100, value: 1, step: 10 }, ]; //public circleGeomCfg: any = { // radius: 0, // segments: 0, // thetaStart: 0, // thetaLength: 0 //}; this.circleCfg = { radius: this.radius, segments: 36, thetaStart: 0, thetaLength: 2 * Math.PI, color: Math.random() * 0xFFFFFF, wireframe: false, position: { x: 0, y: 0, z: 0 }, castShadow: true, rotation: { x: 0, y: 0, z: 0 } }; this.circleGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.circle, readOnly: true }, { prop1: null, prop2: 'radius', type: 'number', label: 'Radius', min: -1000, max: 1000, value: 50, step: 10 }, { prop1: null, prop2: 'segments', type: 'number', label: 'Segments', min: 1, max: 360, value: 8, step: 10 }, { prop1: null, prop2: 'thetaStart', type: 'number', label: 'Theta Start', min: 0, max: 2 * Math.PI, value: 0, step: 0.1, deg: true }, { prop1: null, prop2: 'thetaLength', type: 'number', label: 'Theta Start', min: 0, max: 2 * Math.PI, value: 2 * Math.PI, step: 0.1, deg: true }, ]; //public planeGeomCfg: any = { // width: 0, // height: 0, // widthSegments: 0, // heightSegments: 0 //}; this.planeCfg = { width: this.offset.x, height: 20, widthSegments: 1, heightSegments: 1, color: Math.random() * 0xFFFFFF, position: { x: 0, y: 0, z: 0 }, receiveShadow: true }; this.planeGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.plane, readOnly: true }, { prop1: null, prop2: 'width', type: 'number', label: 'Width', min: 0, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'height', type: 'number', label: 'Height', min: 0, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'widthSegments', type: 'number', label: 'Width Segments', min: 1, max: 100, value: 1, step: 10 }, { prop1: null, prop2: 'heightSegments', type: 'number', label: 'Height Segments', min: 1, max: 100, value: 1, step: 10 } ]; //public sphereGeomCfg: any = { // radius: this.radius, // widthSegments: 0, // heightSegments: 0, // phiStart: 0, // phiLength: 0, // thetaStart: 0, // thetaLength: 0 //}; this.sphereCfg = { radius: this.radius, widthSegments: 36, heightSegments: 36, phiStart: 0, phiLength: 2 * Math.PI, thetaStart: 0, thetaLength: 2 * Math.PI, color: Math.random() * 0xFF0000, wireframe: false, position: { x: 0, y: 0, z: 0 }, castShadow: true, rotation: { x: 0, y: 0, z: 0 } }; this.sphereGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.sphere, readOnly: true }, { prop1: null, prop2: 'radius', type: 'number', label: 'Radius', min: 1, max: 1000, value: this.sphereCfg.radius, step: 10 }, { prop1: null, prop2: 'widthSegments', type: 'number', label: 'Width Segments', min: 3, max: 360, value: this.sphereCfg.widthSegments, step: 10 }, { prop1: null, prop2: 'heightSegments', type: 'number', label: 'Height Segments', min: 2, max: 360, value: this.sphereCfg.heightSegments, step: 10 }, { prop1: null, prop2: 'phiStart', type: 'number', label: 'Phi Start', min: 0, max: 2 * Math.PI, value: this.sphereCfg.phiStart, step: 0.1, deg: true }, { prop1: null, prop2: 'phiLength', type: 'number', label: 'Phi Length', min: 0, max: 2 * Math.PI, value: this.sphereCfg.phiLength, step: 0.1, deg: true }, { prop1: null, prop2: 'thetaStart', type: 'number', label: 'Theta Start', min: 0, max: 2 * Math.PI, value: this.sphereCfg.thetaStart, step: 0.1, deg: true }, { prop1: null, prop2: 'thetaLength', type: 'number', label: 'Theta Length', min: 0, max: 2 * Math.PI, value: this.sphereCfg.thetaLength, step: 0.1, deg: true }, ]; this.cylinderCfg = { radiusTop: this.radius / 2, radiusBottom: this.radius / 2, height: this.offset.y, radiusSegments: 36, heightSegments: 1, openEnded: false, thetaStart: 0, thetaLength: 2 * Math.PI, color: Math.random() * 0xFFFFFF, position: { x: 0, y: 0, z: 0 } }; this.cylinderGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.cylinder, readOnly: true }, { prop1: null, prop2: 'radiusTop', type: 'number', label: 'Radius Top', value: 50, min: 1, max: 1000, step: 10 }, { prop1: null, prop2: 'radiusBottom', type: 'number', label: 'Radius Bottom', value: 50, min: 1, max: 1000, step: 10 }, { prop1: null, prop2: 'height', type: 'number', label: 'Height', value: 100, min: 1, max: 1000, step: 10 }, { prop1: null, prop2: 'radiusSegments', type: 'number', label: 'Radius Segments', value: 36, min: 1, max: 360, step: 10 }, { prop1: null, prop2: 'heightSegments', type: 'number', label: 'Height Segments', value: 1, min: 1, max: 100, step: 10 }, { prop1: null, prop2: 'openEnded', type: 'bool', label: 'Open Ended', value: false }, { prop1: null, prop2: 'thetaStart', type: 'number', label: 'Theta Start', min: 0, max: 2 * Math.PI, value: 0, step: 0.1, deg: true }, { prop1: null, prop2: 'thetaLength', type: 'number', label: 'Theta Length', min: 0, max: 2 * Math.PI, value: 2 * Math.PI, step: 0.1, deg: true }, ]; //public torusGeomCfg: any = { // radius: this.radius / 2, // tube: this.radius / 8, // radialSegments: 36, // tubularSegments: 36, // arc: 2 * Math.PI, // color: Math.random() * 0xFFFFFF, // wireframe: false //}; this.torusCfg = { radius: this.radius, tube: this.radius / 2, radialSegments: 36, tubularSegments: 36, arc: 2 * Math.PI, color: Math.random() * 0xFF0000 }; this.torusGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.torus, readOnly: true }, { prop1: null, prop2: 'radius', type: 'number', label: 'Radius', min: 1, max: 1000, value: 100, step: 10 }, { prop1: null, prop2: 'tube', type: 'number', label: 'Tube', min: 1, max: 1000, value: 40, step: 10 }, { prop1: null, prop2: 'radialSegments', type: 'number', label: 'Radial Segments', min: 1, max: 1000, value: 8, step: 10 }, { prop1: null, prop2: 'tubularSegments', type: 'number', label: 'Tubular Segments', min: 1, max: 1000, value: 6, step: 10 }, { prop1: null, prop2: 'arc', type: 'number', label: 'Arc', min: 0, max: 2 * Math.PI, value: 2 * Math.PI, step: 0.1, deg: true }, ]; this.torusKnotCfg = { radius: this.radius, tube: this.radius / 4, radialSegments: 64, tubularSegments: 8, color: Math.random() * 0xFF0000 }; this.torusKnotGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.torusKnot, readOnly: true }, { prop1: null, prop2: 'radius', type: 'number', label: 'Radius', min: 1, max: 1000, value: 100, step: 10 }, { prop1: null, prop2: 'tube', type: 'number', label: 'Tube', min: 1, max: 1000, value: 40, step: 10 }, { prop1: null, prop2: 'radialSegments', type: 'number', label: 'Radial Segments', min: 1, max: 1000, value: 64, step: 10 }, { prop1: null, prop2: 'tubularSegments', type: 'number', label: 'Tubular Segments', min: 1, max: 1000, value: 8, step: 10 }, { prop1: null, prop2: 'p', type: 'number', label: 'p', min: 1, max: 100, value: 2, step: 1 }, { prop1: null, prop2: 'q', type: 'number', label: 'q', min: 1, max: 100, value: 3, step: 1 }, ]; this.textCfg = { text: '', font: {}, fontName: '', hover: 0, weight: 'regular', height: 10, size: this.offset.x / 2, curveSegments: 12, bevelEnabled: true, bevelThickness: 0.5, bevelSize: .5, bevelSegments: 5, useMirror: true, offsetX: 0, frontColor: Math.random() * 0xFF0000, sideColor: Math.random() * 0xFF0000, textMesh: null, style: '' }; this.textGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.text, readOnly: true }, { prop1: null, prop2: 'text', type: 'string', label: 'Text', value: '' }, //<Iv3dObjectProperty>{ prop1: null, prop2: 'font', type: 'object', label: 'Font', value: 'helvetiker', values: this.fonts }, { prop1: null, prop2: 'fontName', type: 'string', label: 'Font', value: 'helvetiker', values: this.fonts }, { prop1: null, prop2: 'font', type: 'object', label: 'Font data', value: null, hidden: true }, { prop1: null, prop2: 'hover', type: 'number', label: 'Hover', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'weight', type: 'string', label: 'Weight', value: 'regular', values: this.fontWeights }, { prop1: null, prop2: 'height', type: 'number', label: 'Height', min: 1, max: 1000, value: 50, step: 10 }, { prop1: null, prop2: 'size', type: 'number', label: 'Size', min: 1, max: 1000, value: 50, step: 10 }, { prop1: null, prop2: 'bevelEnabled', type: 'bool', label: 'Bevel Enabled', value: false }, { prop1: null, prop2: 'bevelThickness', type: 'number', label: 'Bevel Thickness', min: 0, max: 100, value: 0.5, step: 1 }, { prop1: null, prop2: 'bevelSize', type: 'number', label: 'Bevel Size', min: 0, max: 100, value: 0.5, step: 1 } ]; this.particleCfg = { count: 100, size: 1, range: 500, transparent: true, opacity: 0.5, vertexColors: [], sizeAttenuation: true, color: 0xFF0000 }; this.particleGeomProps = [ { prop1: null, prop2: 'type', type: 'enum', label: 'Type', value: iv_3d_object_1.Iv3dGeometryType.particles, readOnly: true }, { prop1: null, prop2: 'count', type: 'number', label: 'Count', value: 100, min: 1, max: 10000, step: 10 }, { prop1: null, prop2: 'size', type: 'number', label: 'Size', value: 1, min: 1, max: 100, step: 1 }, { prop1: null, prop2: 'range', type: 'number', label: 'Range', value: 500, min: 100, max: 10000, step: 10 }, ]; this.objectProps = [ { prop1: null, prop2: 'name', type: 'string', label: 'Name', value: '' }, { prop1: null, prop2: 'uuid', type: 'string', label: 'UUID', value: '', readOnly: true }, { prop1: null, prop2: 'url', type: 'string', label: 'Url', value: '' }, { prop1: null, prop2: 'contentPanels', type: 'string', label: 'Content Panels', value: '' }, { prop1: null, prop2: 'visible', type: 'boolean', label: 'Visible', value: true }, { prop1: null, prop2: 'visibleRuntime', type: 'boolean', label: 'Runtime', value: true }, { prop1: null, prop2: 'sVisibleRuntime', type: 'string', label: 'SRuntime', value: 'true', hidden: true }, { prop1: null, prop2: 'script', type: 'string', label: 'Script', value: '' }, { prop1: 'position', prop2: 'x', type: 'number', label: 'Position X', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'position', prop2: 'y', type: 'number', label: 'Position Y', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'position', prop2: 'z', type: 'number', label: 'Position Z', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'rotation', prop2: 'x', type: 'number', label: 'Rotation X', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'rotation', prop2: 'y', type: 'number', label: 'Rotation Y', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'rotation', prop2: 'z', type: 'number', label: 'Rotation Z', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'scale', prop2: 'x', type: 'number', label: 'Scale X', min: -10, max: 10, value: 1, step: 1 }, { prop1: 'scale', prop2: 'y', type: 'number', label: 'Scale Y', min: -10, max: 10, value: 1, step: 1 }, { prop1: 'scale', prop2: 'z', type: 'number', label: 'Scale Z', min: -10, max: 10, value: 1, step: 1 } ]; this.objectPropsDirectNames = ['name', 'url', 'contentPanels', 'visibleRuntime', 'sVisibleRuntime', 'script']; this.materialProps = [ { prop1: 'material', prop2: 'type', type: 'object', label: 'Type', value: '', values: this.materials }, { prop1: 'material', prop2: 'color', type: 'color', label: 'Color', value: '#FFFFFF' }, { prop1: 'material', prop2: 'specular', type: 'color', label: 'Specular', value: '#111111' }, { prop1: 'material', prop2: 'wireframe', type: 'boolean', label: 'Wireframe', value: false }, { prop1: 'material', prop2: 'transparent', type: 'boolean', label: 'Transparent', value: false }, { prop1: 'material', prop2: 'opacity', type: 'number', label: 'Opacity', min: 0.00, max: 1.00, value: 0.5, step: 0.05 }, // <ObjectProperty>{ prop1: 'material', prop2: 'lights', type: 'boolean', label: 'Lights', value: false }, { prop1: 'material', prop2: 'texture', type: 'map', label: 'Map Texture', value: '' }, { prop1: 'material', prop2: 'select', type: 'map', label: 'Select', value: '' }, { prop1: 'material', prop2: 'refresh', type: 'map', label: 'Refresh', value: '' }, { prop1: 'material', prop2: 'shaderId', type: 'string', label: 'Shader Id', value: '' }, { prop1: 'material', prop2: 'useCanvas', type: 'boolean', label: 'Use Canvas', value: false }, { prop1: 'canvas', prop2: 'text', type: 'string', label: 'Canvas text', value: 'Text' }, { prop1: 'canvas', prop2: 'font', type: 'string', label: 'Font', value: '12px Arial' }, { prop1: 'canvas', prop2: 'textColor', type: 'color', label: 'Text color', value: '#000' }, { prop1: 'canvas', prop2: 'backgroundColor', type: 'color', label: 'Background color', value: '#fff' }, { prop1: 'canvas', prop2: 'textAlign', type: 'string', label: 'Text align', value: 'center', values: ['left', 'center', 'right', 'justify'] }, { prop1: 'canvas', prop2: 'textBaseline', type: 'string', label: 'Text baseline', value: 'middle', values: ['top', 'middle', 'bottom'] }, ]; this.pointLightCfg = { color: 0xFFFFFF, intensity: 1, position: { x: 0, y: this.offset.y, z: 0 }, distance: this.radius * 2, helperSphereSize: 5, showHelper: true, showHelperRuntime: false, helper: null }; this.pointLightProps = [ { prop1: null, prop2: 'type', type: 'string', label: 'Type', value: iv_3d_light_1.Iv3dLightType.point, readOnly: true }, { prop1: null, prop2: 'uuid', type: 'string', label: 'UUID', value: '', readOnly: true }, { prop1: null, prop2: 'name', type: 'string', label: 'name', value: '' }, { prop1: null, prop2: 'color', type: 'color', label: 'Color', value: '#FFFFFF' }, { prop1: null, prop2: 'intensity', type: 'number', label: 'Intensity', value: 1, min: 0.00, max: 1.00, step: 0.05 }, { prop1: 'position', prop2: 'x', type: 'number', label: 'Position X', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'position', prop2: 'y', type: 'number', label: 'Position Y', min: -1000, max: 1000, value: this.offset.y, step: 10 }, { prop1: 'position', prop2: 'z', type: 'number', label: 'Position Z', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'distance', type: 'number', label: 'Distance', min: -1000, max: 1000, value: this.radius * 2, step: 10 }, { prop1: null, prop2: 'helperSphereSize', type: 'number', label: 'Helper Size', min: 1, max: 100, value: 5, step: 1 }, { prop1: null, prop2: 'showHelper', type: 'bool', label: 'Show Helper', value: true }, { prop1: null, prop2: 'showHelperRuntime', type: 'bool', label: 'Runtime', value: false }, ]; this.dirLightCfg = { color: 0xFFFFFF, intensity: 1, position: { x: this.offset.x, y: this.offset.y, z: this.offset.z }, size: 5, showHelper: true, helper: null, shadowCameraFov: 70, castShadow: false }; this.dirLightProps = [ { prop1: null, prop2: 'type', type: 'string', label: 'Type', value: iv_3d_light_1.Iv3dLightType.directional, readOnly: true }, { prop1: null, prop2: 'uuid', type: 'string', label: 'UUID', value: '', readOnly: true }, { prop1: null, prop2: 'name', type: 'string', label: 'name', value: '' }, { prop1: null, prop2: 'color', type: 'color', label: 'Color', value: '#FFFFFF' }, { prop1: null, prop2: 'intensity', type: 'number', label: 'Intensity', value: 1, min: 0.00, max: 1.00, step: 0.05 }, { prop1: 'position', prop2: 'x', type: 'number', label: 'Position X', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'position', prop2: 'y', type: 'number', label: 'Position Y', min: -1000, max: 1000, value: this.offset.y, step: 10 }, { prop1: 'position', prop2: 'z', type: 'number', label: 'Position Z', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'size', type: 'number', label: 'Size', min: 1, max: 100, value: 5, step: 1 }, { prop1: null, prop2: 'shadowCameraFov', type: 'number', label: 'Shadow Camera FOV', value: 70, min: 0, max: 1000, step: 10 }, { prop1: null, prop2: 'castShadow', type: 'bool', label: 'Cast Shadow', value: false }, { prop1: null, prop2: 'showHelper', type: 'bool', label: 'Show Helper', value: true }, { prop1: null, prop2: 'showHelperRuntime', type: 'bool', label: 'Runtime', value: false }, ]; this.hemisphereLightCfg = { skyColor: 0xFFFFFF, groundColor: 0xFFFFFF, intensity: 1, helperSphereSize: 5, showHelper: true, helper: null }; this.hemisphereLightProps = [ { prop1: null, prop2: 'type', type: 'string', label: 'Type', value: iv_3d_light_1.Iv3dLightType.hemisphere, readOnly: true }, { prop1: null, prop2: 'uuid', type: 'string', label: 'UUID', value: '', readOnly: true }, { prop1: null, prop2: 'name', type: 'string', label: 'name', value: '' }, { prop1: null, prop2: 'skyColor', type: 'color', label: 'Sky Color', value: '#FFFFFF' }, { prop1: null, prop2: 'groundColor', type: 'color', label: 'Ground Color', value: '#FFFFFF' }, { prop1: null, prop2: 'intensity', type: 'number', label: 'Intensity', value: 1, min: 0.00, max: 1.00, step: 0.05 }, { prop1: 'position', prop2: 'x', type: 'number', label: 'Position X', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'position', prop2: 'y', type: 'number', label: 'Position Y', min: -1000, max: 1000, value: this.offset.y, step: 10 }, { prop1: 'position', prop2: 'z', type: 'number', label: 'Position Z', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'helperSphereSize', type: 'number', label: 'Helper Size', min: 1, max: 100, value: 5, step: 1 }, { prop1: null, prop2: 'showHelper', type: 'bool', label: 'Show Helper', value: true }, { prop1: null, prop2: 'showHelperRuntime', type: 'bool', label: 'Runtime', value: false }, ]; this.spotLightCfg = { color: 0xFFFFFF, intensity: 1, position: { x: 0, y: this.offset.y, z: 0 }, distance: this.radius * 2, helperSphereSize: 5, showHelper: true, showHelperRuntime: false, helper: null, angle: Math.PI / 2, penumbra: 0, decay: 0 }; this.spotLightProps = [ { prop1: null, prop2: 'type', type: 'string', label: 'Type', value: iv_3d_light_1.Iv3dLightType.spot, readOnly: true }, { prop1: null, prop2: 'uuid', type: 'string', label: 'UUID', value: '', readOnly: true }, { prop1: null, prop2: 'name', type: 'string', label: 'name', value: '' }, { prop1: null, prop2: 'color', type: 'color', label: 'Color', value: '#FFFFFF' }, { prop1: null, prop2: 'intensity', type: 'number', label: 'Intensity', value: 1, min: 0.00, max: 1.00, step: 0.05 }, { prop1: 'position', prop2: 'x', type: 'number', label: 'Position X', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: 'position', prop2: 'y', type: 'number', label: 'Position Y', min: -1000, max: 1000, value: this.offset.y, step: 10 }, { prop1: 'position', prop2: 'z', type: 'number', label: 'Position Z', min: -1000, max: 1000, value: 0, step: 10 }, { prop1: null, prop2: 'distance', type: 'number', label: 'Distance', min: -1000, max: 1000, value: this.radius * 2, step: 10 }, { prop1: null, prop2: 'penumbra', type: 'number', label: 'Penumbra', min: 0.00, max: 1.00, value: 0, step: 0.01 }, { prop1: null, prop2: 'decay', type: 'number', label: 'Decay', min: 1.00, max: 2.00, value: 1, step: 0.01 }, { prop1: null, prop2: 'helperSphereSize', type: 'number', label: 'Helper Size', min: 1, max: 100, value: 5, step: 1 }, { prop1: null, prop2: 'showHelper', type: 'bool', label: 'Show Helper', value: true }, { prop1: null, prop2: 'showHelperRuntime', type: 'bool', label: 'Runtime', value: false }, ]; this.cameraCfg = { fov: 50, aspect: window.innerWidth / window.innerHeight, near: 0.1, far: 10000, position: { x: 200, y: 200, z: 200 } }; this.cameraProps = [ { prop1: null, prop2: 'fov', type: 'number', label: 'FOV', value: this.cameraCfg.fov, min: 1, max: 1000, step: 10 }, { prop1: null, prop2: 'aspect', type: 'number', label: 'Aspect', value: this.cameraCfg.aspect, min: 0, max: 100 }, { prop1: null, prop2: 'near', type: 'number', label: 'Near', value: this.cameraCfg.near, min: 0.00, max: 100.00, step: 0.1 }, { prop1: null, prop2: 'far', type: 'number', label: 'Far', value: this.cameraCfg.far, min: 0, max: 10000 }, { prop1: 'position', prop2: 'x', type: 'number', label: 'Position X', min: -1000, max: 1000, value: this.cameraCfg.position.x, step: 10 }, { prop1: 'position', prop2: 'y', type: 'number', label: 'Position Y', min: -1000, max: 1000, value: this.cameraCfg.position.y, step: 10 }, { prop1: 'position', prop2: 'z', type: 'number', label: 'Position Z', min: -1000, max: 1000, value: this.cameraCfg.position.z, step: 10 }, ]; this.cssCfg = { position: 'absolute', left: '', top: '', width: '', height: '', opacity: '1', 'background-color': '' }; this.dataSourceProps = [ { prop1: null, prop2: 'title', type: 'string', label: 'Title', value: '' }, { prop1: null, prop2: 'url', type: 'string', label: 'Url', value: '' }, { prop1: null, prop2: 'contentPanel', type: 'string', label: 'Content panel', value: '' }, { prop1: null, prop2: 'type', type: 'string', label: 'Type', value: iv_3d_object_1.Iv3dObjectType.cube, values: this.objectTypes }, { prop1: null, prop2: 'textBackgroundColor', type: 'color', label: 'Text background color', value: '#FFF' }, { prop1: null, prop2: 'textColor', type: 'color', label: 'Text color', value: '#000' }, { prop1: null, prop2: 'transparentBackground', type: 'boolean', label: 'Transparent background', value: false }, { prop1: null, prop2: 'valueFormat', type: 'string', label: 'Format', value: '', values: this.valueFormats }, { prop1: null, prop2: 'page', type: 'number', label: 'Page', value: 1 }, { prop1: null, prop2: 'pageSize', type: 'number', label: 'Page size', value: 50 }, { prop1: 'css', prop2: 'position', type: 'string', label: 'Position', value: this.cssCfg.position }, { prop1: 'css', prop2: 'left', type: 'string', label: 'Left', value: this.cssCfg.left }, { prop1: 'css', prop2: 'top', type: 'string', label: 'Top', value: this.cssCfg.top }, { prop1: 'css', prop2: 'width', type: 'string', label: 'Width', value: this.cssCfg.width }, { prop1: 'css', prop2: 'height', type: 'string', label: 'Height', value: this.cssCfg.height }, { prop1: 'css', prop2: 'opacity', type: 'string', label: 'Opacity', value: this.cssCfg.opacity }, { prop1: 'css', prop2: 'background-color', type: 'string', label: 'Background color', value: this.cssCfg['background-color'] }, { prop1: null, prop2: 'drilldownPatternUrl', type: 'string', label: 'Drilldown Pattern Url', value: '' }, { prop1: 'urls', prop2: 'title0', type: 'string', label: 'Title 0', value: '' }, { prop1: 'urls', prop2: 'url0', type: 'string', label: 'Url 0', value: '' }, { prop1: 'urls', prop2: 'type0', type: 'string', label: 'Type 0', value: iv_3d_object_1.Iv3dObjectType.cube, values: this.objectTypes }, { prop1: 'urls', prop2: 'title1', type: 'string', label: 'Title 1', value: '' }, { prop1: 'urls', prop2: 'url1', type: 'string', label: 'Url 1', value: '' }, { prop1: 'urls', prop2: 'type1', type: 'string', label: 'Type 1', value: iv_3d_object_1.Iv3dObjectType.cube, values: this.objectTypes }, { prop1: 'urls', prop2: 'title2', type: 'string', label: 'Title 2', value: '' }, { prop1: 'urls', prop2: 'url2', type: 'string', label: 'Url 2', value: '' }, { prop1: 'urls', prop2: 'type2', type: 'string', label: 'Type 2', value: iv_3d_object_1.Iv3dObjectType.cube, values: this.objectTypes }, ]; this.sceneCfg = { useFog: false, fogColor: 0xffffff, fogMistDensity: 0.015, showAxis: true, showAxisRuntime: true, axisSize: 1000, useAxisArrows: true, axisArrowHeadLength: 100, showGrid: true, showGridRuntime: true, gridSize: 2000, gridDivisions: 100, gridColorCenterLine: 0xFFFFFF, gridColor: 0x808080, backgroundColor: this.cssBackgroundColor, useStereoEffect: false, useStereoEffectRuntime: false, useAnaglyphEffect: false, useAnaglyphEffectRuntime: false, useAsciiEffect: false, useAsciiEffectRuntime: false, noSleep: false }; this.sceneProps = [ { prop1: 'scene', prop2: 'useFog', type: 'bool', label: 'Use Fog', value: this.sceneCfg.useFog }, { prop1: 'scene', prop2: 'fogColor', type: 'color', label: 'Fog Color', value: '#FFFFFF' }, { prop1: 'scene', prop2: 'fogMistDensity', type: 'number', label: 'Fog Mist Density', value: this.sceneCfg.fogMistDensity, min: 0, max: 1, step: 0.001 }, { prop1: 'axis', prop2: 'showAxis', type: 'bool', label: 'Show Axis', value: this.sceneCfg.showAxis }, { prop1: 'axis', prop2: 'showAxisRuntime', type: 'bool', label: 'Runtime', value: this.sceneCfg.showAxisRuntime }, { prop1: 'axis', prop2: 'axisSize', type: 'number', label: 'Axis Size', value: this.sceneCfg.axisSize, min: 1, max: 1000, step: 10 }, { prop1: 'axis', prop2: 'useAxisArrows', type: 'bool', label: 'Axis Arrows', value: this.sceneCfg.useAxisArrows }, { prop1: 'axis', prop2: 'axisArrowHeadLength', type: 'number', label: 'Axis Arrow Head Length', value: this.sceneCfg.axisArrowHeadLength, min: 1, max: 100, step: 1 }, { prop1: 'grid', prop2: 'showGrid', type: 'bool', label: 'Show Grid', value: this.sceneCfg.showGrid }, { prop1: 'grid', prop2: 'showGridRuntime', type: 'bool', label: 'Runtime', value: this.sceneCfg.showGridRuntime }, { prop1: 'grid', prop2: 'gridSize', type: 'number', label: 'Grid Size', value: this.sceneCfg.gridSize, min: 1, max: 1000, step: 10 }, { prop1: 'grid', prop2: 'gridDivisions', type: 'number', label: 'Grid Divisions', value: this.sceneCfg.gridDivisions, min: 1, max: 100, step: 1 }, { prop1: 'grid', prop2: 'gridColor', type: 'color', label: 'Grid Color', value: '#808080' }, { prop1: 'grid', prop2: 'gridColorCenterLine', type: 'color', label: 'Grid Color Center Line', value: '#FFFFFF' }, { prop1: 'scene', prop2: 'backgroundColor', type: 'cssColor', label: 'Background Color', value: this.cssBackgroundColor }, { prop1: 'renderer', prop2: 'useStereoEffect', type: 'bool', label: 'Stereo Effect', value: this.sceneCfg.useStereoEffect }, { prop1: 'renderer', prop2: 'useStereoEffectRuntime', type: 'bool', label: 'Runtime', value: this.sceneCfg.useStereoEffectRuntime }, { prop1: 'renderer', prop2: 'useAnaglyphEffect', type: 'bool', label: 'Anaglyph Effect', value: this.sceneCfg.useAnaglyphEffect }, { prop1: 'renderer', prop2: 'useAnaglyphEffectRuntime', type: 'bool', label: 'Runtime', value: this.sceneCfg.useAnaglyphEffectRuntime }, { prop1: 'renderer', prop2: 'useAsciiEffect', type: 'bool', label: 'Ascii Effect', value: this.sceneCfg.useAsciiEffect }, { prop1: 'renderer', prop2: 'useAsciiEffectRuntime', type: 'bool', label: 'Runtime', value: this.sceneCfg.useAsciiEffectRuntime }, { prop1: 'scene', prop2: 'noSleep', type: 'bool', label: 'No Sleep', value: this.sceneCfg.noSleep }, ]; this.audioCfg = { fileName: '', autoPlay: false, controls: true, loop: true, position: 'absolute', left: '10px', top: '10px' }; this.audioProps = [ { prop1: null, prop2: 'fileName', type: 'string', label: 'Audio File Name', value: this.audioCfg.fileName }, { prop1: null, prop2: 'select', type: 'function', label: 'Select', value: '' }, { prop1: null, prop2: 'play', type: 'function', label: 'Play', value: '' }, { prop1: null, prop2: 'pause', type: 'function', label: 'Pause', value: '' }, { prop1: null, prop2: 'autoPlay', type: 'bool', label: 'Auto Play', value: this.audioCfg.autoPlay }, { prop1: null, prop2: 'loop', type: 'bool', label: 'Loop', value: this.audioCfg.loop }, { prop1: null, prop2: 'controls', type: 'bool', label: 'Controls', value: this.audioCfg.controls }, { prop1: null, prop2: 'position', type: 'string', label: 'Position', value: this.audioCfg.position, values: ['static', 'relative', 'absolute'] }, { prop1: null, prop2: 'left', type: 'string', label: 'Left', value: this.audioCfg.left }, { prop1: null, prop2: 'top', type: 'string', label: 'Top', value: this.audioCfg.top }, ]; this.cssProps = [ { prop1: null, prop2: 'position', type: 'string', label: 'Position', value: this.cssCfg.position }, { prop1: null, prop2: 'left', type: 'string', label: 'Left', value: this.cssCfg.left }, { prop1: null, prop2: 'top', type: 'string', label: 'Top', value: this.cssCfg.top }, { prop1: null, prop2: 'width', type: 'string', label: 'Width', value: this.cssCfg.width }, { prop1: null, prop2: 'height', type: 'string', label: 'Height', value: this.cssCfg.height }, { prop1: null, prop2: 'opacity', type: 'string', label: 'Opacity', value: this.cssCfg.opacity }, { prop1: null, prop2: 'background-color', type: 'string', label: 'Background color', value: this.cssCfg['background-color'] }, ]; this.errorSvc.useAlertForErrors = this.environment.useAlertForErrors; for (let p in iv_3d_object_1.Iv3dObjectType) { this.objectTypes.push(p); } for (let p in iv_3d_data_source_1.Iv3dDataSourceValueFormat) { this.valueFormats.push(p); } } getProp(propName, props) { return props.find(item => item.prop2 === propName); } getChild(uuid, container) { return container.children.find(item => item.uuid === uuid); } getCfg(props) { let cfg = {}; for (let p of props) { cfg[p.prop2] = p.value; } return cfg; } getGenCfg(config, props) { let c = this.getCfg(props); for (let p1 in config) { // if (typeof (config[p1]) === 'object' && config[p1].length > 0) { if (config[p1] && typeof (config[p1]) === 'object' && Object.keys(config[p1]).length > 0) { for (let p2 in config[p1]) { if (!cfg.U.isEmpty(c[p2])) { config[p1][p2] = c[p2]; } } } else { if (!cfg.U.isEmpty(c[p1])) { config[p1] = c[p1]; } } } return config; } getLineCfg(props) { let config = new cfg.LineCfg(); return this.getGenCfg(config, props); } getPlaneCfg(props) { let config = new cfg.PlaneCfg(); return this.getGenCfg(config, props); } getCircleCfg(props) { let config = new cfg.CircleCfg(); return this.getGenCfg(config, props); } getCubeCfg(props) { let config = new cfg.CubeCfg(); return this.getGenCfg(config, props); } getSphereCfg(props) { let config = new cfg.SphereCfg(); return this.getGenCfg(config, props); } getCylinderCfg(props) { let config = new cfg.CylinderCfg(); return this.getGenCfg(config, props); } getTorusCfg(props) { let config = new cfg.TorusCfg(); return this.getGenCfg(config, props); } getTorusKnotCfg(props) { let config = new cfg.TorusKnotCfg(); return this.getGenCfg(config, props); } getTextCfg(props) { let config = new cfg.TextCfg(); return this.getGenCfg(config, props); } getParticleCfg(props) { let config = new cfg.ParticleCfg(); return this.getGenCfg(config, props); } getPointLightCfg(props) { let config = new cfg.PointLightCfg(); return this.getGenCfg(config, props); } getDirLightCfg(props) { let config = new cfg.DirLightCfg(); return this.getGenCfg(config, props); } getHemishphereLightCfg(props) { let config = new cfg.HempisphereLightCfg(); return this.getGenCfg(config, props); } getSpotLightCfg(props) { let config = new cfg.SpotLightCfg(); return this.getGenCfg(config, props); } getCameraCfg(props) { let config = new cfg.CameraCfg(); return this.getGenCfg(config, props); } getSceneCfg(props) { let config = new cfg.SceneRuntimeCfg(); return this.getGenCfg(config, props); } getAudioCfg(props) { let config = Object.assign({}, this.audioCfg); return this.getGenCfg(config, props); } getCssCfg(props) { let config = Object.assign({}, this.cssCfg); return this.getGenCfg(config, props); } getTextureCfg(props) { let config = new cfg.TextureCfg(); return this.getGenCfg(config, props); } setCfgProps(config, props, excludeProps) { for (let p1 in config) { if (excludeProps && excludeProps.indexOf(p1) >= 0) continue; // if (typeof (config[p1]) === 'object' && config[p1].length > 0) { if (config[p1] && typeof (config[p1]) === 'object' && Object.keys(config[p1]).length > 0) { for (let p2 in config[p1]) { if (!cfg.U.isEmpty(config[p1][p2])) { let prop = this.getProp(p2, props); if (prop) { prop.value = config[p1][p2]; } } } } else { if (!cfg.U.isEmpty(config[p1])) { let prop = this.getProp(p1, props); if (prop) { prop.value = config[p1]; } } } } } setLineCfgProps(config, props) { this.setCfgProps(config, props); } setPlaneCfgProps(config, props) { this.setCfgProps(config, props); } setCircleCfgProps(config, props) { this.setCfgProps(config, props); } setCubeCfgProps(config, props) { this.setCfgProps(config, props); } setSphereCfgProps(config, props) { this.setCfgProps(config, props); } setCylinderCfgProps(config, props) { this.setCfgProps(config, props); } setTorusCfgProps(config, props) { this.setCfgProps(config, props); } setTorusKnotCfgProps(config, props) { this.setCfgProps(config, props); } setTextCfgProps(config, props) { this.setCfgProps(config, props, ['textMesh', 'textMeshMirror', 'textMaterial', 'font', 'geometry']); } setParticleCfgProps(config, props) { this.setCfgProps(config, props); } setPointLightCfgProps(config, props) { this.setCfgProps(config, props, ['helper']); } setDirLightCfgProps(config, props) { this.setCfgProps(config, props, ['helper']); } setHempisphereLightCfgProps(config, props) { this.setCfgProps(config, props, ['helper']); } setSpotLightCfgProps(config, props) { this.setCfgProps(config, props, ['helper']); } setCameraCfgProps(config, props) { this.setCfgProps(config, props); } setSceneCfgProps(config, props) { this.setCfgProps(config, props); } setAudioCfgProps(config, props) { this.setCfgProps(config, props); } setTextureCfgProps(config, props) { this.setCfgProps(config, props); } setCssCfgProps(config, props) { this.setCfgProps(config, props); } loadObject(obj, w, mainGroup, demo, isPublic, key, threeObjCallback) { let threeObj; let geom, mat; switch (obj.meshType) { case iv_3d_object_1.Iv3dObjectType.line: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.line, obj.geometryProps, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); /* mat = this.genMat(obj.materialProps, w); threeObj = w.addMesh(geom, mat, mainGroup); this.setThreeObjProps(obj, threeObj); */ break; case iv_3d_object_1.Iv3dObjectType.plane: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.plane, obj.geometryProps, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); break; case iv_3d_object_1.Iv3dObjectType.circle: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.circle, obj.geometryProps, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); break; case iv_3d_object_1.Iv3dObjectType.cube: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.box, obj.geometryProps, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); break; case iv_3d_object_1.Iv3dObjectType.sphere: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.sphere, obj.geometryProps, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); break; case iv_3d_object_1.Iv3dObjectType.cylinder: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.cylinder, obj.geometryProps, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); break; case iv_3d_object_1.Iv3dObjectType.torus: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.torus, obj.geometryProps, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); break; case iv_3d_object_1.Iv3dObjectType.torusKnot: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.torusKnot, obj.geometryProps, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); break; case iv_3d_object_1.Iv3dObjectType.text: let fontName = 'helvetiker'; let weight = 'regular'; let fontNameProp = obj.geometryProps.find(p => p.prop2 === 'fontName'); if (fontNameProp) { fontName = fontNameProp.value; } let weightProp = obj.geometryProps.find(p => p.prop2 === 'weight'); if (weightProp) { weight = weightProp.value; } let loader = new THREE.FontLoader(); loader.load(`${this.environment.assetsRelUrl}libs/threejs/fonts/${fontName}_${weight}.typeface.json`, (response) => { let props = obj.geometryProps; let fontProp = props.find(p => p.prop2 === 'font'); fontProp.value = response; // props.push(<Iv3dObjectProperty>{ prop1: null, prop2: 'font', type: 'object', label: 'Font data', value: response, hidden: true }); geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.text, props, w); this.genObjectWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); }, (arg) => console.log(arg), (error) => console.log(error)); break; case iv_3d_object_1.Iv3dObjectType.particles: geom = this.genGeom(iv_3d_object_1.Iv3dGeometryType.particles, obj.geometryProps, w); this.genParticlesWithMat(obj, geom, mainGroup, w, demo, isPublic, key, threeObjCallback); break; default: break; } } createShaderMaterial(shader, w, demo, isPublic, key) { let uniforms = {}; for (let u of shader.uniforms.filter(item => item.type !== iv_3d_shader_1.Iv3dUniformType.t)) { uniforms[u.name] = { type: u.type, value: u.value }; } if (shader.timeExpr && shader.timeExpr.expression) { shader.timeExpr.fn = this.oParser.parse(shader.timeExpr.expression); } let shaderMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: shader.vertexProgram, fragmentShader: shader.fragmentProgram }); if (uniforms['resolution']) { if (!uniforms['resolution'].value) { uniforms['resolution'].value = new THREE.Vector2(); } uniforms['resolution'].value.x = window.innerWidth; uniforms['resolution'].value.y = window.innerHeight; } for (let u of shader.uniforms.filter(item => item.type === iv_3d_shader_1.Iv3dUniformType.t)) { let imgFile = u.value; let texture = this.loadTexture(imgFile, w, demo, isPublic, key, null); uniforms[u.name] = { type: u.type, value: texture }; } for (let prop in uniforms) { switch (uniforms[prop].type) { case iv_3d_shader_1.Iv3dUniformType.v3: uniforms[prop].value = new THREE.Vector3(0, 0, 0); break; case iv_3d_shader_1.Iv3dUniformType.t: uniforms[prop].value.wrapS = uniforms[prop].value.wrapT = THREE.RepeatWrapping; break; default: break; } } return shaderMaterial; } attachShader(shader, obj, mesh, w, demo, isPublic, key) { if (!mesh) return; if (!shader) return; let shaderMaterial = this.createShaderMaterial(shader, w, demo, isPublic, key); mesh.material = shaderMaterial; } loadLight(light, w) { let config; let lightHelper; switch (light.type) { case iv_3d_light_1.Iv3dLightType.point: config = this.getPointLightCfg(light.lightProps); lightHelper = w.genPointLight(config); break; case iv_3d_light_1.Iv3dLightType.directional: config = this.getDirLightCfg(light.lightProps); lightHelper = w.genDirLight(config); break; case iv_3d_light_1.Iv3dLightType.hemisphere: config = this.getHemishphereLightCfg(light.lightProps); lightHelper = w.genHemisphereLight(config); break; case iv_3d_light_1.Iv3dLightType.spot: config = this.getSpotLightCfg(light.lightProps); lightHelper = w.genSpotLight(config); break; default: break; } th