Browse Source

rack

master
yuliang 6 months ago
parent
commit
f3fdbec87a
  1. 49
      src/example/example1.js
  2. 244
      src/modules/rack/RackRenderer.ts

49
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: []

244
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)

Loading…
Cancel
Save