yuliang
/
yvan-rcs-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修正 GStore 大小问题

master
修宁 6 months ago
parent
c663498e31
commit
c166150d81
3 changed files with 76 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/core/manager/LineSegmentManager.ts
  2. 22
      src/example/example1.js
  3. 143
      src/modules/gstore/GstoreRenderer.ts

7
src/core/manager/LineSegmentManager.ts
View File

@ -26,11 +26,12 @@ export default class LineSegmentManager {
* @param color 线段颜色 (可选) * @param color 线段颜色 (可选)
* @param userData 自定义数据 (可选) * @param userData 自定义数据 (可选)
*/ */
createLine(lineId: string, start: THREE.Vector3 | [number, number, number], end: Vector3Like, color?: THREE.Color | number | string, userData: Partial<UserData> = {}): LineManageWrap { createLine(lineId: string, start: Vector3Like, end: Vector3Like, color?: THREE.Color | number | string, userData: Partial<UserData> = {}): LineManageWrap {
const segment = this.segments.get(lineId) const segment = this.segments.get(lineId)
if (segment) { if (segment) {
console.error(`LineSegmentManager: Line with id ${lineId} already exists.`) // console.error(`LineSegmentManager: Line with id ${lineId} already exists.`)
return // 如果线段已存在，则更新其起点、终点和颜色
return this.updateLine(lineId, start, end, color)
} }
const startVec = start instanceof THREE.Vector3 const startVec = start instanceof THREE.Vector3

22
src/example/example1.js
View File

@ -97,31 +97,31 @@ export default {
id: '6UhIIw9QPYh6acwyW8OSGs', id: '6UhIIw9QPYh6acwyW8OSGs',
t: 'gstore', t: 'gstore',
v: true, v: true,
tf: [[-1, 0.1, 0.55], [0, 0, 0], [1.5, 1.2, 0.1]], tf: [[-1, 0.1, 0.55], [0, 0, 0], [1.5, 0.1, 1.5]],
dt: { in: [], out: [], center: [], storeWidth: 1.4, storeDepth: 1.4 } dt: { in: [], out: [], center: [] }
}, { }, {
id: '1D0WSRPj8JJJwIcmA0UMqG', id: '1D0WSRPj8JJJwIcmA0UMqG',
t: 'gstore', t: 'gstore',
v: true, v: true,
tf: [[0.75, 0.1, 0.55], [0, 0, 0], [1.5, 1.2, 0.1]], tf: [[0.75, 0.1, 0.55], [0, 0, 0], [1.5, 0.1, 1.5]],
dt: { in: [], out: [], center: [], storeWidth: 1.4, storeDepth: 1.4 } dt: { in: [], out: [], center: [] }
}, { }, {
id: 'gstore3', id: 'gstore333',
t: 'gstore', t: 'gstore',
v: true, v: true,
tf: [[3, 0.1, 0.55], [0, 0, 0], [1.5, 1.2, 0.1]], tf: [[3, 0.1, 0.55], [0, 0, 0], [1.5, 0.1, 1.5]],
dt: { in: [], out: [], center: [], storeWidth: 1.4, storeDepth: 1.4 } dt: { in: [], out: [], center: [] }
}, { }, {
id: 'pallet1', id: 'pallet1',
t: 'pallet', t: 'pallet',
v: true, v: true,
tf: [[0.75, 0.075, 0.55], [0, 0, 0], [1.5, 1.2, 0.1]], tf: [[0.75, 0.075, 0.55], [0, 0, 0], [1.0, 0.1, 1.2]],
dt: { in: [], out: [], center: [], palletWidth: 1, palletDepth: 1.2 } dt: { in: [], out: [], center: [], palletWidth: 1, palletDepth: 1.2 }
}, { }, {
id: 'pallet2', id: 'pallet2',
t: 'pallet', t: 'pallet',
v: true, v: true,
tf: [[3, 0.075, 0.55], [0, 0, 0], [1.5, 1.2, 0.1]], tf: [[3, 0.075, 0.55], [0, 0, 0], [1.0, 0.1, 1.2]],
dt: { in: [], out: [], center: [], palletWidth: 1, palletDepth: 1.2 } dt: { in: [], out: [], center: [], palletWidth: 1, palletDepth: 1.2 }
}, { }, {
id: 'ptr1', id: 'ptr1',
@ -139,13 +139,13 @@ export default {
id: 'pallet3', id: 'pallet3',
t: 'pallet', t: 'pallet',
v: true, v: true,
tf: [[3, 0.175, 1.88], [0, 0, 0], [1.5, 1.2, 0.1]], tf: [[3, 0.175, 1.88], [0, 0, 0], [1.5, 0.1, 1.2]],
dt: { in: [], out: [], center: [], palletWidth: 1, palletDepth: 1.2 } dt: { in: [], out: [], center: [], palletWidth: 1, palletDepth: 1.2 }
}, { }, {
id: 'pallet4', id: 'pallet4',
t: 'pallet', t: 'pallet',
v: true, v: true,
tf: [[0.75, 0.175, 3.5], [0, 0, 0], [1.5, 1.2, 0.1]], tf: [[0.75, 0.175, 3.5], [0, 0, 0], [1.5, 0.1, 1.2]],
dt: { in: [], out: [], center: [], palletWidth: 1, palletDepth: 1.2 } dt: { in: [], out: [], center: [], palletWidth: 1, palletDepth: 1.2 }
} }
] ]

143
src/modules/gstore/GstoreRenderer.ts
View File

@ -2,6 +2,9 @@ import * as THREE from 'three'
import BaseRenderer from '@/core/base/BaseRenderer.ts' import BaseRenderer from '@/core/base/BaseRenderer.ts'
import Constract from '@/core/Constract.ts' import Constract from '@/core/Constract.ts'
import { type Object3DLike } from '@/types/ModelTypes.ts' import { type Object3DLike } from '@/types/ModelTypes.ts'
import InstancePointManager from '@/core/manager/InstancePointManager.ts'
import LineSegmentManager from '@/core/manager/LineSegmentManager.ts'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
/** /**
* 地堆货位渲染器 * 地堆货位渲染器
@ -10,8 +13,6 @@ import { type Object3DLike } from '@/types/ModelTypes.ts'
export default class GstoreRenderer extends BaseRenderer { export default class GstoreRenderer extends BaseRenderer {
static POINT_NAME = 'ground_store' static POINT_NAME = 'ground_store'
pointMaterial: THREE.Material
/** /**
* 默认点的高度, 防止和地面重合 * 默认点的高度, 防止和地面重合
*/ */
@ -24,105 +25,77 @@ export default class GstoreRenderer extends BaseRenderer {
width: 1.5, width: 1.5,
depth: 1.3, depth: 1.3,
strokeColor: 0x038217, strokeColor: 0x038217,
strokeWidth: 0.15 strokeWidth: 0.08
} }
centerMaterial = new THREE.MeshBasicMaterial({ pointGeometry = new THREE.PlaneGeometry(
1, 1
).rotateX(-Math.PI / 2)
pointMaterial: THREE.Material = new THREE.MeshBasicMaterial({
color: 0xffffff, color: 0xffffff,
transparent: true, transparent: true,
opacity: 0.5 opacity: 0.5
}) })
getColorOfMaterial(strokeColor: number): THREE.MeshBasicMaterial { strokeMaterial = new LineMaterial({
return new THREE.MeshBasicMaterial({ color: this.defaultPointOption.strokeColor,
color: strokeColor, transparent: false,
transparent: true, linewidth: this.defaultPointOption.strokeWidth,
opacity: 0.9 gapSize: 0,
worldUnits: true
}) })
}
edgeMaterial = this.getColorOfMaterial(this.defaultPointOption.strokeColor)
createPoint(item: ItemJson, option?: RendererCudOption): Object3DLike { get pointManager(): InstancePointManager {
const point = this.createMesh(item.tf[2][0], item.tf[2][2], item.dt.strokeWidth, item.dt.strokeColor) if (!this.tempViewport) {
point.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2]) throw new Error('tempViewport is not set.')
}
point.rotation.set( return this.tempViewport.getOrCreatePointManager(this.itemTypeName, () =>
THREE.MathUtils.degToRad(item.tf[1][0]), // 构建 InstanceMesh 代理对象
THREE.MathUtils.degToRad(item.tf[1][1]), InstancePointManager.create(this.itemTypeName,
THREE.MathUtils.degToRad(item.tf[1][2]) this.tempViewport,
this.pointGeometry,
this.pointMaterial,
Constract.MAX_MEASURE_INSTANCES)
) )
return point
} }
updatePoint(item: ItemJson, object: THREE.Group, option?: RendererCudOption): Object3DLike { get lineSegmentManager(): LineSegmentManager {
// 如果 object.userData.strokeWidth 没有变化，并且 scale.x/z 没有变化, 则只平移位置 if (!this.tempViewport) {
if (!object || throw new Error('tempViewport is not set.')
(object.userData.strokeWidth !== item.dt.strokeWidth && item.dt.strokeWidth) ||
(object.userData.strokeColor !== item.dt.strokeColor && item.dt.strokeColor) ||
(object.userData.width !== item.tf[2][0] || object.userData.depth !== item.tf[2][2])) {
// 线宽度 / 大小 / 颜色发生变化. 重新创建一个新的点
object = this.createPoint(item) as THREE.Group
} }
return this.tempViewport.getOrCreateLineManager(this.itemTypeName, () =>
object.rotation.set( // 构建 LineSegment.points 代理对象
THREE.MathUtils.degToRad(item.tf[1][0]), LineSegmentManager.create(this.itemTypeName,
THREE.MathUtils.degToRad(item.tf[1][1]), this.tempViewport,
THREE.MathUtils.degToRad(item.tf[1][2]) this.strokeMaterial)
) )
object.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2])
return object
} }
createMesh(totalWidth: number, totalDepth: number, strokeWidth = 0.15, strokeColor = this.defaultPointOption.strokeColor): Object3DLike { createPointBasic(item: ItemJson, option?: RendererCudOption): Object3DLike {
// === 边框部分（使用 Shape + Hole 构建）=== return this.pointManager.createPoint(item)
const shape = new THREE.Shape()
shape.moveTo(-totalWidth / 2, -totalDepth / 2)
shape.lineTo(totalWidth / 2, -totalDepth / 2)
shape.lineTo(totalWidth / 2, totalDepth / 2)
shape.lineTo(-totalWidth / 2, totalDepth / 2)
shape.closePath()
const hole = new THREE.Path()
hole.moveTo(-totalWidth / 2 + strokeWidth, -totalDepth / 2 + strokeWidth)
hole.lineTo(totalWidth / 2 - strokeWidth, -totalDepth / 2 + strokeWidth)
hole.lineTo(totalWidth / 2 - strokeWidth, totalDepth / 2 - strokeWidth)
hole.lineTo(-totalWidth / 2 + strokeWidth, totalDepth / 2 - strokeWidth)
hole.closePath()
shape.holes.push(hole)
// ExtrudeGeometry 默认是沿 Z 轴拉伸 → 我们需要让它朝 Y 轴拉伸
const edgeGeometry = new THREE.ExtrudeGeometry(shape, {
depth: 0.02,
bevelEnabled: false
})
edgeGeometry.rotateX(-Math.PI / 2)
edgeGeometry.translate(0, 0.01, 0)
const centerGeometry = new THREE.PlaneGeometry(totalWidth, totalDepth)
centerGeometry.rotateX(-Math.PI / 2)
// === 网格组合 ===
const edgeMesh = new THREE.Mesh(edgeGeometry,
(this.defaultPointOption.strokeColor === strokeColor) ? this.edgeMaterial : this.getColorOfMaterial(strokeColor)
)
const centerMesh = new THREE.Mesh(centerGeometry, this.centerMaterial)
const group = new THREE.Group()
group.add(edgeMesh)
if (this.defaultPointOption.strokeColor !== strokeColor) {
// this.centerMaterial.color.set(strokeColor)
edgeMesh.material.color.set(strokeColor)
} }
group.add(centerMesh)
group.userData.strokeWidth = strokeWidth afterCreateOrUpdatePoint(item: ItemJson, option: RendererCudOption, object: Object3DLike) {
group.userData.strokeColor = strokeColor super.afterCreateOrUpdatePoint(item, option, object)
group.userData.width = totalWidth
group.userData.depth = totalDepth const center = [item.tf[0][0], item.tf[0][2]]
return group const h = item.tf[0][1] || this.defulePositionY
const widthHalf = item.tf[2][0] / 2
const depthHalf = item.tf[2][2] / 2
const lwHalf = (item.dt.strokeWidth || this.defaultPointOption.strokeWidth) / 2
// 左上角
const p1 = [center[0] - widthHalf + lwHalf, h, center[1] - depthHalf + lwHalf]
// 右上角
const p2 = [center[0] + widthHalf - lwHalf, h, center[1] - depthHalf + lwHalf]
// 右下角
const p3 = [center[0] + widthHalf - lwHalf, h, center[1] + depthHalf - lwHalf]
// 左下角
const p4 = [center[0] - widthHalf + lwHalf, h, center[1] + depthHalf - lwHalf]
this.lineSegmentManager.createLine(item.id + '_l1', p1, p2, this.strokeMaterial.color)
this.lineSegmentManager.createLine(item.id + '_l2', p2, p3, this.strokeMaterial.color)
this.lineSegmentManager.createLine(item.id + '_l3', p3, p4, this.strokeMaterial.color)
this.lineSegmentManager.createLine(item.id + '_l4', p4, p1, this.strokeMaterial.color)
} }
createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D { createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D {
@ -135,6 +108,8 @@ export default class GstoreRenderer extends BaseRenderer {
dispose() { dispose() {
super.dispose() super.dispose()
this.pointMaterial?.dispose() this.pointGeometry.dispose()
this.pointMaterial.dispose()
this.strokeMaterial.dispose()
} }
} }

Write Preview
Loading…
Cancel
Save