From 449910f24a3d9daa844469fa8213a833a1bee754 Mon Sep 17 00:00:00 2001 From: yuliang <398780299@qq.com> Date: Wed, 18 Jun 2025 10:11:36 +0800 Subject: [PATCH] CLX CL2 --- src/modules/cl2/Cl2Renderer.ts | 48 +++++++++++++++++- src/modules/clx/ClxRenderer.ts | 111 ++++++++++++++++++++++++++++++++++------- 2 files changed, 139 insertions(+), 20 deletions(-) diff --git a/src/modules/cl2/Cl2Renderer.ts b/src/modules/cl2/Cl2Renderer.ts index bde5c3f..c2128e6 100644 --- a/src/modules/cl2/Cl2Renderer.ts +++ b/src/modules/cl2/Cl2Renderer.ts @@ -2,6 +2,8 @@ import * as THREE from 'three' import BaseRenderer from '@/core/base/BaseRenderer.ts' import Constract from '@/core/Constract.ts' import { CSG } from 'three-csg-ts' +//@ts-ignore +import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js' /** * ptr侧叉渲染器 @@ -70,7 +72,7 @@ export default class PtrRenderer extends BaseRenderer { ptrPillarMesh.name = 'ptrPillarMesh' const ptrForkGeometry = this.createPtrFork(item, option); - const ptrForkMaterial = new THREE.MeshPhongMaterial({color: 0xff111111}); + const ptrForkMaterial = new THREE.MeshPhongMaterial({color: 0xff444444}); const ptrForkMesh = new THREE.Mesh(ptrForkGeometry, ptrForkMaterial); ptrForkMesh.name = 'ptrForkMesh' @@ -220,7 +222,49 @@ export default class PtrRenderer extends BaseRenderer { const geometry = new THREE.ExtrudeGeometry(shape, options) // const material = new THREE.MeshBasicMaterial({color: 0xffdddbca}); // const mesh = new THREE.Mesh(geometry, material); - return geometry + + + const fd = 0.03 + const shapeBf = new THREE.Shape(); + + shapeBf.moveTo(-0.728 + width - 0.08, -0.28); + shapeBf.lineTo(-0.728 + width + 0.02, -0.28); + shapeBf.lineTo(-0.728 + width + 0.02, -0.25); + shapeBf.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.25); + shapeBf.lineTo(-0.728 + width + 0.02 + 1.130, -0.25 + fd); + shapeBf.lineTo(-0.728 + width + 0.02 + 1.130, -0.14 - fd); + shapeBf.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.14); + shapeBf.lineTo(-0.728 + width + 0.02, -0.14); + shapeBf.lineTo(-0.728 + width + 0.02, 0.14); + shapeBf.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.14); + shapeBf.lineTo(-0.728 + width + 0.02 + 1.130, 0.14 + fd); + shapeBf.lineTo(-0.728 + width + 0.02 + 1.130, 0.25 - fd); + shapeBf.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.25); + shapeBf.lineTo(-0.728 + width + 0.02, 0.25); + shapeBf.lineTo(-0.728 + width + 0.02, 0.28); + shapeBf.lineTo(-0.728 + width - 0.08, 0.28); + + shapeBf.closePath() + + // 拉伸轨迹线 + const curveBf = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0, 0.02, 0), new THREE.Vector3(0, 0.06, 0)], + false, // 闭合曲线 + 'catmullrom', + 0 + ) + + // 挤出几何图形 参数 + const optionsBf = { + steps: 1, + bevelSegments: 0.05, + bevelEnabled: true, + extrudePath: curveBf // 设置挤出轨迹 + } + // 创建挤出几何体 + const geometryBf = new THREE.ExtrudeGeometry(shapeBf, optionsBf) + + return mergeGeometries([geometry, geometryBf]) } diff --git a/src/modules/clx/ClxRenderer.ts b/src/modules/clx/ClxRenderer.ts index a7b481e..3c1b0f5 100644 --- a/src/modules/clx/ClxRenderer.ts +++ b/src/modules/clx/ClxRenderer.ts @@ -89,17 +89,18 @@ export default class ClxRenderer extends BaseRenderer { const clxPillarMesh = new THREE.Mesh(clxPillarGeometry, clxPillarMaterial); const clxForkGeometry = this.createClxFork(item, option); - const clxForkMaterial = new THREE.MeshPhongMaterial({color: 0xff111111}); + const clxForkMaterial = new THREE.MeshPhongMaterial({color: 0xff444444}); 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 clxGemelGeometryL =this.createClxGemel(true) + const clxGemelGeometryR =this.createClxGemel(false) + const clxGemelMaterial = new THREE.MeshPhongMaterial({color: 0xff555555}); + const clxGemelMeshL1 = new THREE.Mesh(clxGemelGeometryL, clxGemelMaterial); + const clxGemelMeshL2 = new THREE.Mesh(clxGemelGeometryL, clxGemelMaterial); + const clxGemelMeshR1 = new THREE.Mesh(clxGemelGeometryR, clxGemelMaterial); + const clxGemelMeshR2 = new THREE.Mesh(clxGemelGeometryR, clxGemelMaterial); - const d = 0.5 + const d = 1.5 group.add(clxPedestalMesh) const groupPillar = new THREE.Group() @@ -109,7 +110,7 @@ export default class ClxRenderer extends BaseRenderer { - const ac = Math.asin(d/2) + const ac = Math.asin(d/(2 * 0.8)) clxGemelMeshL1.position.z = 0.5 - d/4 @@ -392,28 +393,88 @@ export default class ClxRenderer extends BaseRenderer { } // 创建clx的铰链 - createClxGemel(item: ItemJson, option?: RendererCudOption) { + createClxGemel(isLeft: boolean = false) { const width = 0.08 - const depth = 1.1 + const depth = 0.9 + const dd = 0.02 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.moveTo(-width/2, -depth/2 + dd); + shape.lineTo(-width/2 + dd, -depth/2); + shape.lineTo(width/2 - dd, -depth/2); + shape.lineTo(width/2, -depth/2 + dd); + shape.lineTo(width/2, depth/2 - dd); + shape.lineTo(width/2 - dd, depth/2); + shape.lineTo(-width/2 + dd, depth/2); + shape.lineTo(-width/2, depth/2 - dd); shape.closePath() + const shapeBar = new THREE.Shape(); + shapeBar.moveTo(0, 0); // 起点在圆心 + shapeBar.absarc(0, 0, 0.02, 0, Math.PI * 2, false); // 从0到π绘制半圆 + shapeBar.closePath() + + const geometries: THREE.BufferGeometry[] = [] + const curveL1 = new THREE.CatmullRomCurve3( - [new THREE.Vector3(-0.35, 0, 0), new THREE.Vector3(-0.30, 0, 0)], + [new THREE.Vector3(-0.35 + (isLeft ? 0.05 : 0), 0, 0), new THREE.Vector3(-0.30 + (isLeft ? 0.05 : 0), 0, 0)], false, // 闭合曲线 'catmullrom', 0 ) const curveL2 = new THREE.CatmullRomCurve3( - [new THREE.Vector3(0.30, 0, 0), new THREE.Vector3(0.35, 0, 0)], + [new THREE.Vector3(-0.15 + (isLeft ? 0.05 : 0), 0, 0), new THREE.Vector3(-0.1 + (isLeft ? 0.05 : 0), 0, 0)], + false, // 闭合曲线 + 'catmullrom', + 0 + ) + const curveL3 = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0.15 - (isLeft ? 0.05 : 0), 0, 0), new THREE.Vector3(0.1 - (isLeft ? 0.05 : 0), 0, 0)], false, // 闭合曲线 'catmullrom', 0 ) + const curveL4 = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0.30 - (isLeft ? 0.05 : 0), 0, 0), new THREE.Vector3(0.35 - (isLeft ? 0.05 : 0), 0, 0)], + false, // 闭合曲线 + 'catmullrom', + 0 + ) + + if (!isLeft) { + const curveBar1 = new THREE.CatmullRomCurve3( + [new THREE.Vector3(-0.36, -0.4, 0), new THREE.Vector3(0.36, -0.4, 0)], + false, // 闭合曲线 + 'catmullrom', + 0 + ) + const curveBar2 = new THREE.CatmullRomCurve3( + [new THREE.Vector3(-0.36, 0, 0), new THREE.Vector3(0.36, 0, 0)], + false, // 闭合曲线 + 'catmullrom', + 0 + ) + const curveBar3 = new THREE.CatmullRomCurve3( + [new THREE.Vector3(-0.36, 0.4, 0), new THREE.Vector3(0.36, 0.4, 0)], + false, // 闭合曲线 + 'catmullrom', + 0 + ) + geometries.push(new THREE.ExtrudeGeometry(shapeBar, { + steps: 1, + bevelEnabled: false, + extrudePath: curveBar1 + })) + geometries.push(new THREE.ExtrudeGeometry(shapeBar, { + steps: 1, + bevelEnabled: false, + extrudePath: curveBar2 + })) + geometries.push(new THREE.ExtrudeGeometry(shapeBar, { + steps: 1, + bevelEnabled: false, + extrudePath: curveBar3 + })) + } const geometryL1 = new THREE.ExtrudeGeometry(shape, { steps: 1, @@ -427,7 +488,21 @@ export default class ClxRenderer extends BaseRenderer { extrudePath: curveL2 }); - return mergeGeometries([geometryL1, geometryL2]) + const geometryL3 = new THREE.ExtrudeGeometry(shape, { + steps: 1, + bevelEnabled: false, + extrudePath: curveL3 + }); + + const geometryL4 = new THREE.ExtrudeGeometry(shape, { + steps: 1, + bevelEnabled: false, + extrudePath: curveL4 + }); + + geometries.push(geometryL1, geometryL2, geometryL3, geometryL4) + + return mergeGeometries(geometries) } }