diff --git a/src/example/example1.js b/src/example/example1.js index 4a919ab..6368283 100644 --- a/src/example/example1.js +++ b/src/example/example1.js @@ -168,10 +168,51 @@ export default { extendColumns: true, columnSpacing: 1, bays: [ - { bayWidth: 1.275, levelHeight: [1.4, 1.4, 1.4] }, - { bayWidth: 1.275, levelHeight: [1.4, 1.4, 1.4] }, - { bayWidth: 1.275, levelHeight: [1.4, 1.4, 1.4] }, - { bayWidth: 1.275, levelHeight: [1.4, 1.4, 1.4] }], + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }, + { bayWidth: 1.275, levelHeight: [1.4, 1.4,1.4, 1.4,1.4, 1.4, 1.4] }], center: [], in: [], out: [] diff --git a/src/modules/rack/RackRenderer.ts b/src/modules/rack/RackRenderer.ts index db47d38..cc3e2e3 100644 --- a/src/modules/rack/RackRenderer.ts +++ b/src/modules/rack/RackRenderer.ts @@ -3,6 +3,7 @@ import BaseRenderer from '@/core/base/BaseRenderer.ts' import { Line2 } from 'three/examples/jsm/lines/Line2.js' import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js' import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js' +import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js"; import { decimalSumBy } from '@/core/ModelUtils' import Constract from '@/core/Constract.ts' import Plastic_Rough_JPG from '@/assets/Models/Plastic_Rough.jpg' @@ -155,41 +156,66 @@ export default class RackRenderer extends BaseRenderer { rackVerticalBarGeometry: BufferGeometry = null rackVerticalBarMaterial: Material = null + rackLinkBarColor = 0xFF35499C + rackLinkBarGeometry: BufferGeometry = null + rackLinkBarMaterial: Material = null + rackHorizontalBarWidth = 0.1 rackHorizontalBarDepth = 0.08 rackHorizontalBarColor = 0xFFF97F27 rackHorizontalBarGeometry: BufferGeometry = null rackHorizontalBarMaterial: Material = null - sectionPoints = [ + bottomBarHeight = 0.2 + bottomLinkHeight = 0.2 + + barSectionPoints = [ {x: -0.05, y: -0.05}, {x: -0.025, y: -0.05}, - {x: 0.04-0.05, y: 0.005-0.05}, - {x: 0.06-0.05, y: 0.005-0.05}, - {x: 0.075-0.05, y: 0-0.05}, - {x: 0.1-0.05, y: 0-0.05}, - {x: 0.1-0.05, y: 0.092-0.05}, - {x: 0.092-0.05, y: 0.1-0.05}, - {x: 0.075-0.05, y: 0.1-0.05}, - {x: 0.075-0.05, y: 0.092-0.05}, - {x: 0.092-0.05, y: 0.092-0.05}, - {x: 0.092-0.05, y: 0.008-0.05}, - {x: 0.008-0.05, y: 0.008-0.05}, - {x: 0.008-0.05, y: 0.092-0.05}, - {x: 0.025-0.05, y: 0.092-0.05}, - {x: 0.025-0.05, y: 0.1-0.05}, - {x: 0.008-0.05, y: 0.1-0.05}, - {x: 0-0.05, y: 0.092-0.05}, - {x: 0-0.05, y: 0-0.05} + {x: -0.01, y: -0.045}, + {x: 0.05, y: -0.045}, + {x: 0.025, y: -0.05}, + {x: 0.05, y: -0.05}, + {x: 0.05, y: 0.042}, + {x: 0.042, y: 0.05}, + {x: 0.025, y: 0.05}, + {x: 0.025, y: 0.042}, + {x: 0.042, y: 0.042}, + {x: 0.042, y: -0.042}, + {x: -0.042, y: -0.042}, + {x: -0.042, y: 0.042}, + {x: -0.025, y: 0.042}, + {x: -0.025, y: 0.05}, + {x: -0.042, y: 0.05}, + {x: -0.05, y: 0.042}, + {x: -0.05, y: -0.05} + ] + + linkSectionPoints = [ + {x: -0.05, y: -0.05}, + {x: -0.05, y: 0.05}, + {x: 0, y: 0.05}, + {x: 0, y: 0.06}, + {x: -0.06, y: 0.06}, + {x: -0.06, y: -0.05}, + {x: -0.05, y: -0.05} + ] + + linkBarSectionPoints = [ + {x: -0.025, y: -0.025}, + {x: 0.025, y: -0.025}, + {x: 0.025, y: 0.025}, + {x: -0.025, y: 0.025}, + {x: -0.025, y: -0.025} ] createVerticalBar(x, y, z, length): THREE.BufferGeometry { // 创建一个形状 柱子的截面形状 const shape = new THREE.Shape(); - shape.moveTo(this.sectionPoints[0].x, this.sectionPoints[0].y); - for (let i = 1; i < this.sectionPoints.length; i++) { - shape.lineTo(this.sectionPoints[i].x , this.sectionPoints[i].y); + shape.moveTo(this.barSectionPoints[0].x, this.barSectionPoints[0].y); + for (let i = 1; i < this.barSectionPoints.length; i++) { + shape.lineTo(this.barSectionPoints[i].x , this.barSectionPoints[i].y); } // 拉伸轨迹线 @@ -243,18 +269,110 @@ export default class RackRenderer extends BaseRenderer { return material; } + createLinkBar(x, y, z, vBarLength, depth, bottomDistance, topDistance): THREE.BufferGeometry { + + const bgs: BufferGeometry[] = [] + const top = vBarLength - topDistance + // 创建一个形状 柱子的截面形状 + const shape = new THREE.Shape(); + shape.moveTo(this.linkBarSectionPoints[0].x, this.linkBarSectionPoints[0].y); + for (let i = 1; i < this.linkBarSectionPoints.length; i++) { + shape.lineTo(this.linkBarSectionPoints[i].x, this.linkBarSectionPoints[i].y); + } + + // 拉伸轨迹线 横向 底部 + const curveHBottom = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0, bottomDistance, 0), new THREE.Vector3(0, bottomDistance, depth)], + false, // 闭合曲线 + 'catmullrom', + 0 + ); + + // 挤出几何图形 参数 + const optionsHBottom = { + steps: 1, + bevelEnabled: false, + extrudePath: curveHBottom, // 设置挤出轨迹 + }; + + // 拉伸轨迹线 横向 底部 + const curveHTop = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0, top, 0), new THREE.Vector3(0, top, depth)], + false, // 闭合曲线 + 'catmullrom', + 0 + ); + + // 挤出几何图形 参数 + const optionsHTop = { + steps: 1, + bevelEnabled: false, + extrudePath: curveHTop, // 设置挤出轨迹 + }; + + // 创建挤出几何体 + const geometryHBottom = new THREE.ExtrudeGeometry(shape, optionsHBottom); + const geometryHTop = new THREE.ExtrudeGeometry(shape, optionsHTop); + bgs.push(geometryHBottom, geometryHTop) + + let remainingHeight = vBarLength - bottomDistance - topDistance + + // 需要创建斜杆 + + for (let i = 0; i < Math.floor(remainingHeight / depth); i++) { + // 拉伸轨迹线 斜向 + const curveD = new THREE.CatmullRomCurve3( + (i%2 == 0) ? [new THREE.Vector3(0, bottomDistance + depth * i, 0), new THREE.Vector3(0, bottomDistance + depth * (i+1), depth)] + : [new THREE.Vector3(0, bottomDistance + depth * (i+1), 0), new THREE.Vector3(0, bottomDistance + depth * (i), depth)], + false, // 闭合曲线 + 'catmullrom', + 0 + ); + + const optionsD = { + steps: 1, + bevelEnabled: false, + extrudePath: curveD, // 设置挤出轨迹 + }; + + const geometryD = new THREE.ExtrudeGeometry(shape, optionsD); + bgs.push(geometryD) + } + + if (vBarLength - bottomDistance - topDistance > depth) { + + + + } + + // 调整uv方便正确贴图 + // this.resetUVs(geometry); + return BufferGeometryUtils.mergeGeometries(bgs) + } + + createLinkBarMaterial(): THREE.Material { + + const material = new THREE.MeshPhongMaterial(); + material.color.setHex(this.rackLinkBarColor, "srgb"); + material.specular.setHex(0xff6d6d6d, 'srgb'); + material.transparent = true; + material.needsUpdate = true; + + return material; + } + createHorizontalBar(x, y, z, length): THREE.BufferGeometry { // 创建一个形状 柱子的截面形状 const shape = new THREE.Shape(); - shape.moveTo(this.sectionPoints[0].x, this.sectionPoints[0].y); - for (let i = 1; i < this.sectionPoints.length; i++) { - shape.lineTo(this.sectionPoints[i].x , this.sectionPoints[i].y); + shape.moveTo(this.barSectionPoints[0].x, this.barSectionPoints[0].y); + for (let i = 1; i < this.barSectionPoints.length; i++) { + shape.lineTo(this.barSectionPoints[i].x , this.barSectionPoints[i].y); } // 拉伸轨迹线 const curve = new THREE.CatmullRomCurve3( - [new THREE.Vector3(0, 0, 0), new THREE.Vector3(length, 0, 0)], + [new THREE.Vector3(0.05, 0, 0), new THREE.Vector3(length -0.05, 0, 0)], false, // 闭合曲线 'catmullrom', 0 @@ -268,9 +386,41 @@ export default class RackRenderer extends BaseRenderer { }; // 创建挤出几何体 const geometry = new THREE.ExtrudeGeometry(shape, options); + + const linkShapeL = new THREE.Shape(); + const linkShapeR = new THREE.Shape(); + linkShapeL.moveTo(this.linkSectionPoints[0].x, this.linkSectionPoints[0].y); + linkShapeR.moveTo(this.linkSectionPoints[0].x + (length), this.linkSectionPoints[0].y); + for (let i = 1; i < this.linkSectionPoints.length; i++) { + linkShapeL.lineTo(this.linkSectionPoints[i].x , this.linkSectionPoints[i].y); + linkShapeR.lineTo(this.linkSectionPoints[i].x + (length), this.linkSectionPoints[i].y); + } + + // 拉伸轨迹线 + const linkCurve = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0, 0, -0.08), new THREE.Vector3(0, 0, 0.08)], + false, // 闭合曲线 + 'catmullrom', + 0 + ); + + // 挤出几何图形 参数 + const linkOptions = { + steps: 1, + bevelEnabled: false, + extrudePath: linkCurve, // 设置挤出轨迹 + }; + // 创建挤出几何体 + const linkGeometryL = new THREE.ExtrudeGeometry(linkShapeL, linkOptions); + linkGeometryL.rotateZ(-Math.PI / 2) + const linkGeometryR = new THREE.ExtrudeGeometry(linkShapeR, linkOptions); + linkGeometryR.rotateX(-Math.PI) + linkGeometryR.rotateZ(-Math.PI / 2) + + // 调整uv方便正确贴图 - this.resetUVs(geometry); - return geometry + // this.resetUVs(geometry); + return BufferGeometryUtils.mergeGeometries([geometry, linkGeometryL, linkGeometryR]) } createHorizontalBarMaterial(): THREE.Material { @@ -307,6 +457,9 @@ export default class RackRenderer extends BaseRenderer { // 计算立住坐标点和长度 const vBarMatrix: {x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number}[] = []; + // 计算 + const linkBarMatrix: {x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number}[] = []; + let distanceX = 0, distanceY = 0; for (let i = -1; i < item.dt.bays.length; i++) { @@ -338,16 +491,31 @@ export default class RackRenderer extends BaseRenderer { rz: 0, l: rackHeight }) + linkBarMatrix.push({ + x: rackPoint.x + distanceX, + y: rackPoint.y, + z: i%2 == 0 ? (rackPoint.z + item.dt.rackDepth) : rackPoint.z, + sx: 1, + sy: 1, + sz: 1, + rx: 0, + ry: i%2 == 0 ? Math.PI : 0, + rz: 0, + l: rackHeight + }) } // 计算横梁数量 const hBarMatrix: {x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number}[] = []; distanceX = 0; for (let i = 0; i < item.dt.bays.length; i++) { - distanceY = 0; + distanceY = this.bottomBarHeight; const bay = item.dt.bays[i] for (let j = 0; j < bay.levelHeight.length; j++) { const levelHeight = bay.levelHeight[j] + if (distanceY <= 0) { + continue + } hBarMatrix.push({ x: rackPoint.x + distanceX, y: rackPoint.y + distanceY, @@ -399,6 +567,26 @@ export default class RackRenderer extends BaseRenderer { meshes.push(vBarMesh) } + if (linkBarMatrix.length > 0) { + if (!this.rackLinkBarGeometry) { + this.rackLinkBarGeometry = this.createLinkBar(linkBarMatrix[0].x, linkBarMatrix[0].y, linkBarMatrix[0].z, rackHeight, item.dt.rackDepth, this.bottomLinkHeight, 0.2) + } + if (!this.rackLinkBarMaterial) { + this.rackLinkBarMaterial = this.createLinkBarMaterial() + } + const dummy = new THREE.Object3D(); + const linkBarMesh = new THREE.InstancedMesh(this.rackLinkBarGeometry, this.rackLinkBarMaterial, linkBarMatrix.length); + for (let i = 0; i < linkBarMatrix.length; i++) { + const lp = linkBarMatrix[i] + dummy.position.set(lp.x, lp.y, lp.z); + dummy.rotation.set(lp.rx, lp.ry, lp.rz); + dummy.scale.set(lp.sx, lp.sy, lp.sz); + dummy.updateMatrix(); + linkBarMesh.setMatrixAt(i, dummy.matrix); + } + meshes.push(linkBarMesh) + } + if (hBarMatrix.length > 0) { if (!this.rackHorizontalBarGeometry) { this.rackHorizontalBarGeometry = this.createHorizontalBar(hBarMatrix[0].x, hBarMatrix[0].y, hBarMatrix[0].z, hBarMatrix[0].l)