diff --git a/src/modules/clx/ClxRenderer.ts b/src/modules/clx/ClxRenderer.ts index 9ea6eaa..a7b481e 100644 --- a/src/modules/clx/ClxRenderer.ts +++ b/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]) + } + }