30 changed files with 1038 additions and 106 deletions
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,281 @@ |
|||||
|
import * as THREE from 'three' |
||||
|
import type Viewport from '@/core/engine/Viewport.ts' |
||||
|
import type IControls from '@/core/controls/IControls.ts' |
||||
|
import { Curve } from 'three' |
||||
|
import { getClosestObject } from '@/core/ModelUtils.ts' |
||||
|
import EventBus from '@/runtime/EventBus.ts' |
||||
|
|
||||
|
/** |
||||
|
* DragControl2 - ThreeJS 拖拽管理器（仅限 X/Z 平面） |
||||
|
*/ |
||||
|
export default class DragControl2 implements IControls { |
||||
|
private viewport: Viewport |
||||
|
private _is_enabled: boolean = true |
||||
|
private domElement: HTMLElement |
||||
|
public isDragging: boolean = false |
||||
|
private isPointerDown: boolean = false |
||||
|
private dragStartMouse: THREE.Vector2 = new THREE.Vector2() |
||||
|
|
||||
|
private dragShadows: THREE.Group | null = null |
||||
|
|
||||
|
init(viewport: Viewport): void { |
||||
|
this.viewport = viewport |
||||
|
|
||||
|
const domElement = this.viewport.renderer.domElement |
||||
|
domElement.addEventListener('pointermove', this.onPointerMove) |
||||
|
domElement.addEventListener('pointerdown', this.onPointerDown) |
||||
|
domElement.addEventListener('pointerup', this.onPointerUp) |
||||
|
domElement.addEventListener('pointerleave', this.onPointerLeave) |
||||
|
|
||||
|
domElement.style.cursor = 'auto' |
||||
|
this.domElement = domElement |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 设置启用/禁用 |
||||
|
*/ |
||||
|
public set enabled(value: boolean) { |
||||
|
this._is_enabled = value |
||||
|
if (!value) { |
||||
|
this.cleanupDrag() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public get enabled(): boolean { |
||||
|
return this._is_enabled |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 卸载资源 |
||||
|
*/ |
||||
|
dispose(): void { |
||||
|
if (this.domElement) { |
||||
|
this.domElement.removeEventListener('pointermove', this.onPointerMove) |
||||
|
this.domElement.removeEventListener('pointerdown', this.onPointerDown) |
||||
|
this.domElement.removeEventListener('pointerup', this.onPointerUp) |
||||
|
this.domElement.removeEventListener('pointerleave', this.onPointerLeave) |
||||
|
|
||||
|
this.cleanupDrag() |
||||
|
this.domElement.style.cursor = 'auto' |
||||
|
this.viewport = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 清理拖拽状态 |
||||
|
*/ |
||||
|
private cleanupDrag(): void { |
||||
|
if (this.domElement) { |
||||
|
this.domElement.style.cursor = 'auto' |
||||
|
this.isDragging = false |
||||
|
this.isPointerDown = false |
||||
|
this.dragStartMouse.set(NaN, NaN) |
||||
|
this.removeShadows() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取当前鼠标坐标（归一化设备坐标） |
||||
|
*/ |
||||
|
private getMousePosition(clientX: number, clientY: number): THREE.Vector2 { |
||||
|
const rect = this.domElement.getBoundingClientRect() |
||||
|
return new THREE.Vector2( |
||||
|
((clientX - rect.left) / rect.width) * 2 - 1, |
||||
|
((clientY - rect.top) / rect.height) * -2 + 1 |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 射线检测，返回第一个可拖拽对象 |
||||
|
*/ |
||||
|
private getIntersectedDraggableObject(mouse: THREE.Vector2): THREE.Object3D | null { |
||||
|
const raycaster = new THREE.Raycaster() |
||||
|
raycaster.setFromCamera(mouse, this.viewport.camera) |
||||
|
|
||||
|
const draggableObjects = this.viewport.entityManager._draggableObjects || [] |
||||
|
const intersects = raycaster.intersectObjects(draggableObjects, true) |
||||
|
|
||||
|
if (intersects.length > 0) { |
||||
|
return getClosestObject(intersects[0].object) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建拖拽阴影 |
||||
|
*/ |
||||
|
private createShadows(objects: THREE.Object3D[]): void { |
||||
|
this.removeShadows() |
||||
|
|
||||
|
console.log('createShadows', objects.map(obj => obj.name)) |
||||
|
|
||||
|
this.dragShadows = new THREE.Group() |
||||
|
for (const obj of objects) { |
||||
|
if (!obj.userData.entityId) { |
||||
|
console.error('Object does not have entityId:', obj.name) |
||||
|
continue // 跳过没有 entityId 的对象
|
||||
|
} |
||||
|
|
||||
|
const shadow = obj.clone() |
||||
|
|
||||
|
shadow.userData = { |
||||
|
isShadow: true, |
||||
|
entityId: obj.userData.entityId, |
||||
|
originPosition: obj.position.clone() // 保存原始位置
|
||||
|
} |
||||
|
this.dragShadows.add(shadow) |
||||
|
} |
||||
|
this.viewport.scene.add(this.dragShadows) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 移除阴影 |
||||
|
*/ |
||||
|
private removeShadows(): void { |
||||
|
if (this.dragShadows) { |
||||
|
this.viewport.scene.remove(this.dragShadows) |
||||
|
this.dragShadows = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新阴影位置（仅 X/Z 平面） |
||||
|
*/ |
||||
|
private updateShadows(newPosition: THREE.Vector2): void { |
||||
|
if (!this.dragShadows) return |
||||
|
|
||||
|
// 计算新位置与拖拽开始位置的偏移量
|
||||
|
const offsetX = newPosition.x - this.dragStartMouse.x |
||||
|
const offsetZ = newPosition.y - this.dragStartMouse.y |
||||
|
|
||||
|
this.dragShadows.children.forEach((shadow, index) => { |
||||
|
const newPosX = shadow.userData.originPosition.x + offsetX |
||||
|
const newPosZ = shadow.userData.originPosition.z + offsetZ |
||||
|
|
||||
|
shadow.position.set(newPosX, shadow.userData.originPosition.y, newPosZ) // 锁定 Y 轴高度
|
||||
|
console.log(`Updated shadow position for ${shadow.name}:`, shadow.position) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private dragComplete = (startPos: THREE.Vector2, targetPos: THREE.Vector2): void => { |
||||
|
// console.log(`Drag completed from ${startPos.toArray()} to ${targetPos.toArray()}`)
|
||||
|
this.viewport.stateManager.beginStateUpdate() |
||||
|
for (const object of this.dragShadows.children) { |
||||
|
const entityId = object.userData.entityId |
||||
|
if (entityId) { |
||||
|
const entity = this.viewport.stateManager.findItemById(entityId) |
||||
|
if (entity) { |
||||
|
// 更新实体位置
|
||||
|
entity.tf[0][0] = object.position.x |
||||
|
entity.tf[0][2] = object.position.z |
||||
|
|
||||
|
} else { |
||||
|
system.showErrorDialog('not found entityId:' + entityId) |
||||
|
} |
||||
|
} else { |
||||
|
system.showErrorDialog('not found entity') |
||||
|
} |
||||
|
} |
||||
|
this.viewport.stateManager.endStateUpdate() |
||||
|
EventBus.dispatch('multiselectedObjectChanged', { |
||||
|
multiSelectedObjects: this.viewport.state.multiSelectedObjects |
||||
|
}) |
||||
|
EventBus.dispatch('selectedObjectPropertyChanged', {}) |
||||
|
|
||||
|
this.cleanupDrag() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* pointermove 事件处理 |
||||
|
*/ |
||||
|
private onPointerMove = (event: PointerEvent): void => { |
||||
|
if (!this.enabled || !this.domElement) return |
||||
|
|
||||
|
if (!isNaN(this.dragStartMouse.x) && !isNaN(this.dragStartMouse.y) && this.dragShadows) { |
||||
|
this.isDragging = true |
||||
|
// 更新鼠标样式
|
||||
|
this.domElement.style.cursor = 'grabbing' |
||||
|
|
||||
|
// 更新阴影位置（锁定 Y 轴）
|
||||
|
this.updateShadows(new THREE.Vector2(CurrentMouseInfo.x, CurrentMouseInfo.z)) |
||||
|
|
||||
|
} else { |
||||
|
|
||||
|
const mouse = this.getMousePosition(event.clientX, event.clientY) |
||||
|
const intersected = this.getIntersectedDraggableObject(mouse) |
||||
|
if (intersected) { |
||||
|
this.domElement.style.cursor = 'grab' |
||||
|
} else { |
||||
|
this.domElement.style.cursor = 'auto' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* pointerdown 事件处理 |
||||
|
*/ |
||||
|
private onPointerDown = (event: PointerEvent): void => { |
||||
|
if (!this.enabled) return |
||||
|
|
||||
|
const mouse = this.getMousePosition(event.clientX, event.clientY) |
||||
|
const intersected = this.getIntersectedDraggableObject(mouse) |
||||
|
|
||||
|
if (!intersected) return |
||||
|
|
||||
|
this.isPointerDown = true |
||||
|
this.dragStartMouse.set(intersected.position.x, intersected.position.z) |
||||
|
this.viewport.controls.enabled = false |
||||
|
|
||||
|
let selectedObjects = [intersected] |
||||
|
if (this.viewport.state.multiSelectedObjects.length > 0) { |
||||
|
if (this.viewport.state.multiSelectedObjects.includes(intersected)) { |
||||
|
// drag multi-selected objects
|
||||
|
selectedObjects = this.viewport.state.multiSelectedObjects |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.createShadows(selectedObjects) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* pointerup 事件处理 |
||||
|
*/ |
||||
|
private onPointerUp = (event: PointerEvent): void => { |
||||
|
if (!this.enabled) return |
||||
|
|
||||
|
this.dragStartMouse.set(NaN, NaN) |
||||
|
this.isPointerDown = false |
||||
|
// console.log('enable controls')
|
||||
|
this.viewport.controls.enabled = true |
||||
|
|
||||
|
if (this.isDragging) { |
||||
|
const startPos = this.dragStartMouse |
||||
|
const targetPos = new THREE.Vector2(CurrentMouseInfo.x, CurrentMouseInfo.z) |
||||
|
|
||||
|
if (startPos && targetPos) { |
||||
|
this.dragComplete(startPos, targetPos) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* pointerleave 事件处理 |
||||
|
*/ |
||||
|
private onPointerLeave = (_event: PointerEvent): void => { |
||||
|
if (!this.enabled) return |
||||
|
this.cleanupDrag() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 取消当前拖拽状态 |
||||
|
*/ |
||||
|
cancelDrag(): void { |
||||
|
if (!this.domElement) return |
||||
|
if (this.isDragging || this.isPointerDown) { |
||||
|
this.cleanupDrag() |
||||
|
this.domElement.style.cursor = 'auto' |
||||
|
this.viewport.controls.enabled = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
import BaseEntity from '@/core/base/BaseItemEntity.ts' |
||||
|
|
||||
|
export default class ChargerEntity extends BaseEntity { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
import BaseInteraction from '@/core/base/BaseInteraction.ts' |
||||
|
import * as THREE from 'three' |
||||
|
|
||||
|
export default class ChargerInteraction extends BaseInteraction { |
||||
|
|
||||
|
get isSinglePointMode(): boolean { |
||||
|
return true |
||||
|
} |
||||
|
|
||||
|
constructor(itemTypeName: string) { |
||||
|
super(itemTypeName) |
||||
|
} |
||||
|
|
||||
|
createPointOfItem(item: ItemJson, point: THREE.Vector3): ItemJson { |
||||
|
item = super.createPointOfItem(item, point) |
||||
|
|
||||
|
// 创建一个地堆货架
|
||||
|
item.dt.palletWidth = 1 // 宽度
|
||||
|
item.dt.palletDepth = 1.2 // 深度
|
||||
|
return item |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
import type { IMeta } from '@/core/base/IMeta.ts' |
||||
|
|
||||
|
export default [ |
||||
|
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
||||
|
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
||||
|
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
||||
|
{ editor: 'TransformEditor', category: 'basic' }, |
||||
|
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
||||
|
{ editor: '-', category: 'basic' }, |
||||
|
|
||||
|
{ field: 'dt.chargerWidth', editor: 'NumberInput', label: '充电桩宽度', category: 'basic' }, |
||||
|
{ field: 'dt.chargerDepth', editor: 'NumberInput', label: '充电桩深度', category: 'basic' }, |
||||
|
/** |
||||
|
* dt.bays 5列3层货架示例 |
||||
|
* { |
||||
|
* dt: { |
||||
|
* rackDepth: 1.1, // 货架深度
|
||||
|
* levelCount: 3, // 总层数
|
||||
|
* bayCount: 5, // 总列数
|
||||
|
* hideFloor: false, // 隐藏底板
|
||||
|
* extendColumns: true, // 扩展挡板
|
||||
|
* columnSpacing: 1, // 支脚跨越
|
||||
|
* bays: [ // 每列的配置
|
||||
|
* { |
||||
|
* bayWidth: 1.6, // 列的宽度
|
||||
|
* levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
|
||||
|
* }, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* ] |
||||
|
* } |
||||
|
* } |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
||||
|
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
||||
|
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
||||
|
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
||||
|
] as IMeta |
||||
@ -0,0 +1,97 @@ |
|||||
|
import * as THREE from 'three' |
||||
|
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 {decimalSumBy} from "@/core/ModelUtils"; |
||||
|
import Constract from '@/core/Constract.ts' |
||||
|
import chargerUrl from '@/assets/images/ptr/charger.png' |
||||
|
|
||||
|
/** |
||||
|
* 充电器渲染器 |
||||
|
*/ |
||||
|
export default class ChargerRenderer extends BaseRenderer { |
||||
|
static POINT_NAME = 'charger' |
||||
|
|
||||
|
pointMaterial: THREE.Material |
||||
|
|
||||
|
/** |
||||
|
* 默认点的高度, 防止和地面重合 |
||||
|
*/ |
||||
|
readonly defulePositionY: number = Constract.HEIGHT_WAY |
||||
|
readonly defaultScale: THREE.Vector3 = new THREE.Vector3(1, 1, 1) |
||||
|
readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0) |
||||
|
readonly defaultLineWidth: number = 0.15 |
||||
|
|
||||
|
constructor(itemTypeName: string) { |
||||
|
super(itemTypeName) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 所有的点，必须使用 storeWidth/storeDepth, 改TF无效 |
||||
|
*/ |
||||
|
override afterCreateOrUpdatePoint(item: ItemJson, option: RendererCudOption, objects: THREE.Object3D[]) { |
||||
|
super.afterCreateOrUpdatePoint(item, option, objects) |
||||
|
|
||||
|
const point = objects[0] |
||||
|
// point.position.y = this.defulePositionY
|
||||
|
// point.scale.set(_.sumBy(item.dt.bays, b=>b.bayWidth), this.defaultScale.y, item.dt.rackDepth)
|
||||
|
point.rotation.set( |
||||
|
THREE.MathUtils.degToRad(item.tf[1][0]), |
||||
|
THREE.MathUtils.degToRad(item.tf[1][1]), |
||||
|
THREE.MathUtils.degToRad(item.tf[1][2]) |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D[] { |
||||
|
throw new Error('not allow store line.') |
||||
|
} |
||||
|
|
||||
|
updateLine(start: ItemJson, end: ItemJson, type: LinkType, option?: RendererCudOption) { |
||||
|
throw new Error('not allow store line.') |
||||
|
} |
||||
|
|
||||
|
|
||||
|
createPoint(item: ItemJson, option?: RendererCudOption): THREE.Object3D[] { |
||||
|
// 创建平面几何体
|
||||
|
if (!item.dt.chargerWidth || !item.dt.chargerDepth) { |
||||
|
return [] |
||||
|
} |
||||
|
|
||||
|
const textureLoader = new THREE.TextureLoader() |
||||
|
const texture = textureLoader.load(chargerUrl) |
||||
|
|
||||
|
const group = new THREE.Group() |
||||
|
group.name = ChargerRenderer.POINT_NAME |
||||
|
|
||||
|
// 绘制背景矩形框
|
||||
|
const planeGeometry = new THREE.PlaneGeometry(item.dt.chargerWidth, item.dt.chargerDepth); |
||||
|
planeGeometry.rotateX(-Math.PI / 2) |
||||
|
const planeMaterial = new THREE.MeshLambertMaterial({ |
||||
|
map: texture, // 颜色贴图
|
||||
|
transparent: true, // 允许透明纹理
|
||||
|
}); |
||||
|
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); |
||||
|
group.add(planeMesh) |
||||
|
|
||||
|
// 设置位置
|
||||
|
group.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2]) |
||||
|
|
||||
|
const points = [group] |
||||
|
this.fillObjectUserDataFromItem(item, ...points) |
||||
|
this.afterCreateOrUpdatePoint(item, option, points) |
||||
|
this.tempViewport.entityManager.appendObject(item.id, points) |
||||
|
this.appendToScene(...points) |
||||
|
return points |
||||
|
} |
||||
|
|
||||
|
dispose() { |
||||
|
super.dispose() |
||||
|
this.pointMaterial?.dispose() |
||||
|
} |
||||
|
|
||||
|
createPointBasic(item: ItemJson, option?: RendererCudOption): Object3D[] { |
||||
|
return []; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
import { defineModule } from '@/core/manager/ModuleManager.ts' |
||||
|
import ChargerRenderer from './ChargerRenderer.ts' |
||||
|
import ChargerEntity from './ChargerEntity.ts' |
||||
|
import ChargerMeta from './ChargerMeta.ts' |
||||
|
import ChargerInteraction from './ChargerInteraction.ts' |
||||
|
|
||||
|
export const ITEM_TYPE_NAME = 'charger' |
||||
|
|
||||
|
export default defineModule({ |
||||
|
name: ITEM_TYPE_NAME, |
||||
|
renderer: new ChargerRenderer(ITEM_TYPE_NAME), |
||||
|
interaction: new ChargerInteraction(ITEM_TYPE_NAME), |
||||
|
meta: ChargerMeta, |
||||
|
entity: ChargerEntity |
||||
|
}) |
||||
@ -0,0 +1,5 @@ |
|||||
|
import BaseEntity from '@/core/base/BaseItemEntity.ts' |
||||
|
|
||||
|
export default class ClxEntity extends BaseEntity { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
import BaseInteraction from '@/core/base/BaseInteraction.ts' |
||||
|
import * as THREE from 'three' |
||||
|
|
||||
|
export default class ClxInteraction extends BaseInteraction { |
||||
|
|
||||
|
get isSinglePointMode(): boolean { |
||||
|
return true |
||||
|
} |
||||
|
|
||||
|
constructor(itemTypeName: string) { |
||||
|
super(itemTypeName) |
||||
|
} |
||||
|
|
||||
|
createPointOfItem(item: ItemJson, point: THREE.Vector3): ItemJson { |
||||
|
item = super.createPointOfItem(item, point) |
||||
|
|
||||
|
// 创建一个地堆货架
|
||||
|
item.dt.palletWidth = 1 // 宽度
|
||||
|
item.dt.palletDepth = 1.2 // 深度
|
||||
|
return item |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
import type { IMeta } from '@/core/base/IMeta.ts' |
||||
|
|
||||
|
export default [ |
||||
|
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
||||
|
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
||||
|
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
||||
|
{ editor: 'TransformEditor', category: 'basic' }, |
||||
|
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
||||
|
{ editor: '-', category: 'basic' }, |
||||
|
|
||||
|
{ field: 'dt.clxWidth', editor: 'NumberInput', label: 'CLX宽度', category: 'basic' }, |
||||
|
{ field: 'dt.clxDepth', editor: 'NumberInput', label: 'CLX深度', category: 'basic' }, |
||||
|
/** |
||||
|
* dt.bays 5列3层货架示例 |
||||
|
* { |
||||
|
* dt: { |
||||
|
* rackDepth: 1.1, // 货架深度
|
||||
|
* levelCount: 3, // 总层数
|
||||
|
* bayCount: 5, // 总列数
|
||||
|
* hideFloor: false, // 隐藏底板
|
||||
|
* extendColumns: true, // 扩展挡板
|
||||
|
* columnSpacing: 1, // 支脚跨越
|
||||
|
* bays: [ // 每列的配置
|
||||
|
* { |
||||
|
* bayWidth: 1.6, // 列的宽度
|
||||
|
* levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
|
||||
|
* }, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* ] |
||||
|
* } |
||||
|
* } |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
||||
|
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
||||
|
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
||||
|
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
||||
|
] as IMeta |
||||
@ -0,0 +1,97 @@ |
|||||
|
import * as THREE from 'three' |
||||
|
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 {decimalSumBy} from "@/core/ModelUtils"; |
||||
|
import Constract from '@/core/Constract.ts' |
||||
|
import clxUrl from '@/assets/images/ptr/clx.png' |
||||
|
|
||||
|
/** |
||||
|
* clx渲染器 |
||||
|
*/ |
||||
|
export default class ClxRenderer extends BaseRenderer { |
||||
|
static POINT_NAME = 'clx' |
||||
|
|
||||
|
pointMaterial: THREE.Material |
||||
|
|
||||
|
/** |
||||
|
* 默认点的高度, 防止和地面重合 |
||||
|
*/ |
||||
|
readonly defulePositionY: number = Constract.HEIGHT_WAY |
||||
|
readonly defaultScale: THREE.Vector3 = new THREE.Vector3(1, 1, 1) |
||||
|
readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0) |
||||
|
readonly defaultLineWidth: number = 0.15 |
||||
|
|
||||
|
constructor(itemTypeName: string) { |
||||
|
super(itemTypeName) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 所有的点，必须使用 storeWidth/storeDepth, 改TF无效 |
||||
|
*/ |
||||
|
override afterCreateOrUpdatePoint(item: ItemJson, option: RendererCudOption, objects: THREE.Object3D[]) { |
||||
|
super.afterCreateOrUpdatePoint(item, option, objects) |
||||
|
|
||||
|
const point = objects[0] |
||||
|
// point.position.y = this.defulePositionY
|
||||
|
// point.scale.set(_.sumBy(item.dt.bays, b=>b.bayWidth), this.defaultScale.y, item.dt.rackDepth)
|
||||
|
point.rotation.set( |
||||
|
THREE.MathUtils.degToRad(item.tf[1][0]), |
||||
|
THREE.MathUtils.degToRad(item.tf[1][1]), |
||||
|
THREE.MathUtils.degToRad(item.tf[1][2]) |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D[] { |
||||
|
throw new Error('not allow store line.') |
||||
|
} |
||||
|
|
||||
|
updateLine(start: ItemJson, end: ItemJson, type: LinkType, option?: RendererCudOption) { |
||||
|
throw new Error('not allow store line.') |
||||
|
} |
||||
|
|
||||
|
|
||||
|
createPoint(item: ItemJson, option?: RendererCudOption): THREE.Object3D[] { |
||||
|
// 创建平面几何体
|
||||
|
if (!item.dt.clxWidth || !item.dt.clxDepth) { |
||||
|
return [] |
||||
|
} |
||||
|
|
||||
|
const textureLoader = new THREE.TextureLoader() |
||||
|
const texture = textureLoader.load(clxUrl) |
||||
|
|
||||
|
const group = new THREE.Group() |
||||
|
group.name = ClxRenderer.POINT_NAME |
||||
|
|
||||
|
// 绘制背景矩形框
|
||||
|
const planeGeometry = new THREE.PlaneGeometry(item.dt.clxWidth, item.dt.clxDepth); |
||||
|
planeGeometry.rotateX(-Math.PI / 2) |
||||
|
const planeMaterial = new THREE.MeshLambertMaterial({ |
||||
|
map: texture, // 颜色贴图
|
||||
|
transparent: true, // 允许透明纹理
|
||||
|
}); |
||||
|
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); |
||||
|
group.add(planeMesh) |
||||
|
|
||||
|
// 设置位置
|
||||
|
group.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2]) |
||||
|
|
||||
|
const points = [group] |
||||
|
this.fillObjectUserDataFromItem(item, ...points) |
||||
|
this.afterCreateOrUpdatePoint(item, option, points) |
||||
|
this.tempViewport.entityManager.appendObject(item.id, points) |
||||
|
this.appendToScene(...points) |
||||
|
return points |
||||
|
} |
||||
|
|
||||
|
dispose() { |
||||
|
super.dispose() |
||||
|
this.pointMaterial?.dispose() |
||||
|
} |
||||
|
|
||||
|
createPointBasic(item: ItemJson, option?: RendererCudOption): Object3D[] { |
||||
|
return []; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
import { defineModule } from '@/core/manager/ModuleManager.ts' |
||||
|
import ClxRenderer from './ClxRenderer.ts' |
||||
|
import ClxEntity from './ClxEntity.ts' |
||||
|
import ClxMeta from './ClxMeta.ts' |
||||
|
import ClxInteraction from './ClxInteraction.ts' |
||||
|
|
||||
|
export const ITEM_TYPE_NAME = 'clx' |
||||
|
|
||||
|
export default defineModule({ |
||||
|
name: ITEM_TYPE_NAME, |
||||
|
renderer: new ClxRenderer(ITEM_TYPE_NAME), |
||||
|
interaction: new ClxInteraction(ITEM_TYPE_NAME), |
||||
|
meta: ClxMeta, |
||||
|
entity: ClxEntity |
||||
|
}) |
||||
@ -0,0 +1,49 @@ |
|||||
|
import type { IMeta } from '@/core/base/IMeta.ts' |
||||
|
|
||||
|
export default [ |
||||
|
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
||||
|
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
||||
|
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
||||
|
{ editor: 'TransformEditor', category: 'basic' }, |
||||
|
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
||||
|
{ editor: '-', category: 'basic' }, |
||||
|
|
||||
|
{ field: 'dt.ptrWidth', editor: 'NumberInput', label: 'PTR宽度', category: 'basic' }, |
||||
|
{ field: 'dt.ptrDepth', editor: 'NumberInput', label: 'PTR深度', category: 'basic' }, |
||||
|
/** |
||||
|
* dt.bays 5列3层货架示例 |
||||
|
* { |
||||
|
* dt: { |
||||
|
* rackDepth: 1.1, // 货架深度
|
||||
|
* levelCount: 3, // 总层数
|
||||
|
* bayCount: 5, // 总列数
|
||||
|
* hideFloor: false, // 隐藏底板
|
||||
|
* extendColumns: true, // 扩展挡板
|
||||
|
* columnSpacing: 1, // 支脚跨越
|
||||
|
* bays: [ // 每列的配置
|
||||
|
* { |
||||
|
* bayWidth: 1.6, // 列的宽度
|
||||
|
* levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
|
||||
|
* }, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
||||
|
* ] |
||||
|
* } |
||||
|
* } |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
||||
|
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
||||
|
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
||||
|
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
||||
|
] as IMeta |
||||
Loading…
Reference in new issue