You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
433 lines
13 KiB
433 lines
13 KiB
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'
|
|
import {CSG} from "three-csg-ts";
|
|
//@ts-ignore
|
|
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js'
|
|
|
|
/**
|
|
* 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, object: THREE.Object3D) {
|
|
super.afterCreateOrUpdatePoint(item, option, object)
|
|
|
|
const point = object
|
|
// 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) {
|
|
system.showErrorDialog('field clxWidth / clxDepth is null!')
|
|
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)
|
|
|
|
|
|
const clxPedestalGeometry = this.createClxPedestal(item, option)
|
|
const clxPedestalMaterial = new THREE.MeshPhongMaterial({color: 0xffdddbca});
|
|
const clxPedestalMesh = new THREE.Mesh(clxPedestalGeometry, clxPedestalMaterial);
|
|
|
|
const clxPillarGeometry = this.createClxPillar(item, option);
|
|
const clxPillarMaterial = new THREE.MeshPhongMaterial({color: 0xff6c6956});
|
|
const clxPillarMesh = new THREE.Mesh(clxPillarGeometry, clxPillarMaterial);
|
|
|
|
const clxForkGeometry = this.createClxFork(item, option);
|
|
const clxForkMaterial = new THREE.MeshPhongMaterial({color: 0xff111111});
|
|
const clxForkMesh = new THREE.Mesh(clxForkGeometry, clxForkMaterial);
|
|
|
|
const clxGemelGeometry =this.createClxGemel(item, option)
|
|
const clxGemelMaterial = new THREE.MeshPhongMaterial({color: 0xff888888});
|
|
const clxGemelMeshL1 = new THREE.Mesh(clxGemelGeometry, clxGemelMaterial);
|
|
const clxGemelMeshL2 = new THREE.Mesh(clxGemelGeometry, clxGemelMaterial);
|
|
const clxGemelMeshR1 = new THREE.Mesh(clxGemelGeometry, clxGemelMaterial);
|
|
const clxGemelMeshR2 = new THREE.Mesh(clxGemelGeometry, clxGemelMaterial);
|
|
|
|
const d = 0.5
|
|
|
|
group.add(clxPedestalMesh)
|
|
const groupPillar = new THREE.Group()
|
|
groupPillar.add(clxPillarMesh)
|
|
clxForkMesh.position.z = -d
|
|
groupPillar.add(clxForkMesh)
|
|
|
|
|
|
|
|
const ac = Math.asin(d/2)
|
|
|
|
|
|
clxGemelMeshL1.position.z = 0.5 - d/4
|
|
clxGemelMeshL1.position.y = 0.72
|
|
clxGemelMeshL1.rotation.x = -ac
|
|
|
|
clxGemelMeshL2.position.z = 0.5 - d/4 * 3
|
|
clxGemelMeshL2.position.y = 0.72
|
|
clxGemelMeshL2.rotation.x = -ac
|
|
|
|
clxGemelMeshR1.position.z = 0.5 - d/4
|
|
clxGemelMeshR1.position.y = 0.72
|
|
clxGemelMeshR1.rotation.x = ac
|
|
|
|
clxGemelMeshR2.position.z = 0.5 - d/4 * 3
|
|
clxGemelMeshR2.position.y = 0.72
|
|
clxGemelMeshR2.rotation.x = ac
|
|
|
|
groupPillar.add(clxGemelMeshL1)
|
|
groupPillar.add(clxGemelMeshL2)
|
|
groupPillar.add(clxGemelMeshR1)
|
|
groupPillar.add(clxGemelMeshR2)
|
|
group.add(groupPillar)
|
|
|
|
// 设置位置
|
|
group.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2])
|
|
return group
|
|
}
|
|
|
|
dispose() {
|
|
super.dispose()
|
|
this.pointMaterial?.dispose()
|
|
}
|
|
|
|
createPointBasic(item: ItemJson, option?: RendererCudOption): THREE.Object3D {
|
|
throw new Error('Clx createPointBasic not allow!')
|
|
}
|
|
|
|
// 创建clx的底座
|
|
createClxPedestal(item: ItemJson, option?: RendererCudOption): THREE.BufferGeometry {
|
|
|
|
const width = 1.65
|
|
const depth = 1.65
|
|
const dd = 0.05
|
|
const bd = 0.175
|
|
|
|
const shape = new THREE.Shape();
|
|
shape.moveTo(-width/2, -depth/2 + bd);
|
|
shape.lineTo(-width/2 + bd, -depth/2);
|
|
shape.lineTo(width/2 - bd, -depth/2);
|
|
shape.lineTo(width/2, -depth/2 + bd);
|
|
|
|
shape.lineTo(width/2, -0.285);
|
|
shape.lineTo(-0.475, -0.285);
|
|
shape.lineTo(-0.475, -0.125);
|
|
shape.lineTo(width/2, -0.125);
|
|
shape.lineTo(width/2, 0.125);
|
|
shape.lineTo(-0.475, 0.125);
|
|
shape.lineTo(-0.475, 0.285);
|
|
shape.lineTo(width/2, 0.285);
|
|
|
|
shape.lineTo(width/2, depth/2 - bd);
|
|
shape.lineTo(width/2 - bd, depth/2);
|
|
shape.lineTo(-width/2 + bd, depth/2);
|
|
shape.lineTo(-width/2, depth/2 - bd);
|
|
shape.closePath(); // 闭合路径
|
|
|
|
// 拉伸轨迹线
|
|
const curve = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.02, 0), new THREE.Vector3(0, 0.22, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const options = {
|
|
steps: 1,
|
|
bevelEnabled: false,
|
|
extrudePath: curve // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
const geometry = new THREE.ExtrudeGeometry(shape, options)
|
|
const material = new THREE.MeshBasicMaterial({color: 0xffdddbca});
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
|
|
mesh.updateMatrix()
|
|
|
|
// 倒角
|
|
const shapeD = new THREE.Shape();
|
|
shapeD.moveTo(-0.02, -0.02);
|
|
shapeD.lineTo(0.02, 0.02)
|
|
shapeD.lineTo(-0.02, 0.02)
|
|
shapeD.closePath()
|
|
|
|
const shapeDW = new THREE.Shape();
|
|
shapeDW.moveTo(0.02, -0.02);
|
|
shapeDW.lineTo(0.02, 0.02)
|
|
shapeDW.lineTo(-0.02, 0.02)
|
|
shapeDW.closePath()
|
|
|
|
const shapeDW1 = new THREE.Shape();
|
|
shapeDW1.moveTo(-0.02, -0.02);
|
|
shapeDW1.lineTo(0.02, -0.02)
|
|
shapeDW1.lineTo(-0.02, 0.02)
|
|
shapeDW1.closePath()
|
|
|
|
|
|
const positionDs:THREE.Vector3[] = [
|
|
new THREE.Vector3(-width / 2, 0.20, -depth / 2 + bd),
|
|
new THREE.Vector3(-width / 2 + bd, 0.20, -depth / 2),
|
|
new THREE.Vector3(width / 2 - bd, 0.20, -depth / 2),
|
|
new THREE.Vector3(width / 2, 0.20, -depth / 2 + bd),
|
|
new THREE.Vector3(width / 2, 0.20, depth / 2 - bd),
|
|
new THREE.Vector3(width / 2 - bd, 0.20, depth / 2),
|
|
new THREE.Vector3(-width / 2 + bd, 0.20, depth / 2),
|
|
new THREE.Vector3(-width / 2, 0.20, depth / 2 - bd),
|
|
new THREE.Vector3(-width / 2, 0.20, -depth / 2 + bd)
|
|
]
|
|
|
|
let result: THREE.Mesh = mesh
|
|
|
|
for (let i = 0; i < positionDs.length - 1; i++) {
|
|
|
|
const curveD = new THREE.CatmullRomCurve3([positionDs[i], positionDs[i+1]],
|
|
false,
|
|
'catmullrom',
|
|
0)
|
|
const optionsD = {
|
|
steps: 1,
|
|
bevelEnabled: false,
|
|
extrudePath: curveD
|
|
};
|
|
let geometryD: THREE.BufferGeometry = null
|
|
if (i == 1) {
|
|
geometryD = new THREE.ExtrudeGeometry(shapeDW, optionsD)
|
|
} else if (i == 5) {
|
|
geometryD = new THREE.ExtrudeGeometry(shapeDW1, optionsD)
|
|
} else {
|
|
geometryD = new THREE.ExtrudeGeometry(shapeD, optionsD)
|
|
}
|
|
const meshD = new THREE.Mesh(geometryD, material);
|
|
meshD.updateMatrix()
|
|
result = CSG.subtract(result, meshD)
|
|
}
|
|
return result.geometry
|
|
}
|
|
|
|
// 创建clx的立柱
|
|
createClxPillar(item: ItemJson, option?: RendererCudOption): THREE.BufferGeometry {
|
|
// 606.5
|
|
const width = 0.3
|
|
const depth = 1.188
|
|
const dd = 0.05
|
|
const shape = new THREE.Shape();
|
|
shape.moveTo(-0.744, -0.594 + dd);
|
|
shape.lineTo(-0.744 + dd, -0.594);
|
|
shape.lineTo(-0.744 + width - dd, -0.594);
|
|
shape.lineTo(-0.744 + width, -0.594 + dd);
|
|
|
|
shape.lineTo(-0.744 + width, -0.4);
|
|
shape.lineTo(-0.744 + width - 0.08, -0.4);
|
|
shape.lineTo(-0.744 + width - 0.08, 0.4);
|
|
shape.lineTo(-0.744 + width, 0.4);
|
|
|
|
shape.lineTo(-0.744 + width, -0.594 + depth - dd);
|
|
shape.lineTo(-0.744 + width - dd, -0.594 + depth);
|
|
shape.lineTo(-0.744 + dd, -0.594 + depth);
|
|
shape.lineTo(-0.744, -0.594 + depth - dd);
|
|
// shape.lineTo(-0.728, -0.594 + dd);
|
|
// shape.closePath()
|
|
|
|
// 拉伸轨迹线
|
|
const curve = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.22, 0), new THREE.Vector3(0, 3.357, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const options = {
|
|
steps: 1,
|
|
bevelSegments: 0.05,
|
|
bevelEnabled: true,
|
|
extrudePath: curve // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
const geometry = new THREE.ExtrudeGeometry(shape, options)
|
|
// const material = new THREE.MeshBasicMaterial({color: 0xffdddbca});
|
|
// const mesh = new THREE.Mesh(geometry, material);
|
|
return geometry
|
|
|
|
}
|
|
|
|
// 创建clx的叉
|
|
createClxFork(item: ItemJson, option?: RendererCudOption): THREE.BufferGeometry {
|
|
// 606.5
|
|
const width = 0.3
|
|
const depth = 1.188
|
|
const dd = 0.05
|
|
const fdx = 0.06
|
|
const fdy = 0.03
|
|
const shape = new THREE.Shape();
|
|
|
|
shape.moveTo(-0.744 + width - 0.08, -0.4);
|
|
shape.lineTo(-0.744 + width + 0.02, -0.4);
|
|
shape.lineTo(-0.744 + width + 0.02, -0.275);
|
|
shape.lineTo(-0.744 + width + 0.02 + 1.24 - fdx, -0.275);
|
|
shape.lineTo(-0.744 + width + 0.02 + 1.24, -0.275 + fdy);
|
|
shape.lineTo(-0.744 + width + 0.02 + 1.24, -0.135 - fdy);
|
|
shape.lineTo(-0.744 + width + 0.02 + 1.24 - fdx, -0.135);
|
|
shape.lineTo(-0.744 + width + 0.02, -0.135);
|
|
shape.lineTo(-0.744 + width + 0.02, 0.135);
|
|
shape.lineTo(-0.744 + width + 0.02 + 1.24 - fdx, 0.135);
|
|
shape.lineTo(-0.744 + width + 0.02 + 1.24, 0.135 + fdy);
|
|
shape.lineTo(-0.744 + width + 0.02 + 1.24, 0.275 - fdy);
|
|
shape.lineTo(-0.744 + width + 0.02 + 1.24 - fdx, 0.275);
|
|
shape.lineTo(-0.744 + width + 0.02, 0.275);
|
|
shape.lineTo(-0.744 + width + 0.02, 0.4);
|
|
shape.lineTo(-0.744 + width - 0.08, 0.4);
|
|
|
|
shape.closePath()
|
|
|
|
// 拉伸轨迹线
|
|
const curve = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.02, 0), new THREE.Vector3(0, 1.287, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const options = {
|
|
steps: 1,
|
|
bevelSegments: 0.05,
|
|
bevelEnabled: true,
|
|
extrudePath: curve // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
const geometry = new THREE.ExtrudeGeometry(shape, options)
|
|
const material = new THREE.MeshBasicMaterial({color: 0xffdddbca});
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
mesh.updateMatrix()
|
|
|
|
const shapeD = new THREE.Shape();
|
|
|
|
|
|
shapeD.moveTo(-0.744 + width + 0.02, -0.3);
|
|
shapeD.lineTo(-0.744 + width + 0.02 + 1.3, -0.3);
|
|
shapeD.lineTo(-0.744 + width + 0.02 + 1.3, 0.3);
|
|
shapeD.lineTo(-0.744 + width + 0.02, 0.3);
|
|
shape.closePath()
|
|
|
|
// 拉伸轨迹线
|
|
const curveD = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.07, 0), new THREE.Vector3(0, 1.3, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const optionsD = {
|
|
steps: 1,
|
|
bevelSegments: 0.05,
|
|
bevelEnabled: true,
|
|
extrudePath: curveD // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
const geometryD = new THREE.ExtrudeGeometry(shapeD, optionsD)
|
|
const meshD = new THREE.Mesh(geometryD, material);
|
|
|
|
meshD.updateMatrix()
|
|
|
|
// 布尔运算
|
|
const result = CSG.subtract(mesh, meshD)
|
|
|
|
return result.geometry
|
|
}
|
|
|
|
// 创建clx的铰链
|
|
createClxGemel(item: ItemJson, option?: RendererCudOption) {
|
|
const width = 0.08
|
|
const depth = 1.1
|
|
const shape = new THREE.Shape();
|
|
shape.moveTo(-width/2, -depth/2);
|
|
shape.lineTo(width/2, -depth/2);
|
|
shape.lineTo(width/2, depth/2);
|
|
shape.lineTo(-width/2, depth/2);
|
|
shape.closePath()
|
|
|
|
const curveL1 = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(-0.35, 0, 0), new THREE.Vector3(-0.30, 0, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
const curveL2 = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0.30, 0, 0), new THREE.Vector3(0.35, 0, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
const geometryL1 = new THREE.ExtrudeGeometry(shape, {
|
|
steps: 1,
|
|
bevelEnabled: false,
|
|
extrudePath: curveL1
|
|
});
|
|
|
|
const geometryL2 = new THREE.ExtrudeGeometry(shape, {
|
|
steps: 1,
|
|
bevelEnabled: false,
|
|
extrudePath: curveL2
|
|
});
|
|
|
|
return mergeGeometries([geometryL1, geometryL2])
|
|
}
|
|
|
|
}
|
|
|