agv 动画

src/modules/clx/ClxRenderer.ts

@@ -6,6 +6,9 @@ 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渲染器
@@ -74,7 +77,62 @@ export default class ClxRenderer extends BaseRenderer {
       transparent: true // 允许透明纹理
     })
     const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
-    group.add(planeMesh)
+    // 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])
@@ -89,4 +147,287 @@ export default class ClxRenderer extends BaseRenderer {
   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])
+  }
+
 }