diff --git a/src/modules/cl2/Cl23dObject.ts b/src/modules/cl2/Cl23dObject.ts new file mode 100644 index 0000000..5658d4c --- /dev/null +++ b/src/modules/cl2/Cl23dObject.ts @@ -0,0 +1,300 @@ +import * as THREE from "three"; +import {CSG} from "three-csg-ts"; +//@ts-ignore +import {mergeGeometries} from 'three/addons/utils/BufferGeometryUtils.js' + +export default class Cl23dObject extends THREE.Object3D { + + // 创建ptr的底座 + private static createPtrPedestal(): THREE.BufferGeometry { + // 参数配置 + const radius = 0.8; // 圆半径 + const lineDist = 0.75; // 切割线距离圆心距离 + const segments = 64; // 圆的分段精度 + + // 计算切割线与圆的交点 + const intersectY = Math.sqrt(radius*radius - lineDist*lineDist); + const startAngle = Math.asin(intersectY/radius); + const endAngle = Math.acos(intersectY/radius); + + + const shape = new THREE.Shape(); + shape.moveTo(0, 0); // 起点在圆心 + shape.absarc(0, 0, 0.8, startAngle, endAngle, false); // 从0到π绘制半圆 + shape.absarc(0, 0, 0.8, startAngle + Math.PI/2, endAngle + Math.PI/2, false); + shape.absarc(0, 0, 0.8, startAngle + Math.PI, endAngle + Math.PI, false); + shape.absarc(0, 0, 0.8, startAngle + Math.PI/2 * 3, endAngle + Math.PI/2 * 3, false); + + shape.lineTo(-0.5, -intersectY) + shape.lineTo(-0.5, -intersectY + 0.17) + shape.lineTo(0.75, -intersectY + 0.17) + shape.lineTo(0.75, intersectY - 0.17) + shape.lineTo(-0.5, intersectY - 0.17) + shape.lineTo(-0.5, intersectY) + 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 curveD = new THREE.EllipseCurve( + 0, 0, radius, radius, 0, Math.PI * 2, false, 0 + ); + // 生成拉伸路径点 + const pointsD = curveD.getPoints(segments).map(p => + new THREE.Vector3(p.x, 0.20, p.y) + ); + // 3. 挤出成型 + const optionsD = { + steps: segments, + bevelEnabled: false, + // bevelSegments: 0.01, + extrudePath: new THREE.CatmullRomCurve3(pointsD) + }; + + 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 + } + + // 创建ptr的立柱 + private static createPtrPillar(): THREE.BufferGeometry { + // 606.5 + const width = 0.245 + const depth = 0.716 + const dd = 0.05 + const shape = new THREE.Shape(); + shape.moveTo(-0.728, -0.358 + dd); + shape.lineTo(-0.728 + dd, -0.358); + shape.lineTo(-0.728 + width - dd, -0.358); + shape.lineTo(-0.728 + width, -0.358 + dd); + + shape.lineTo(-0.728 + width, -0.28); + shape.lineTo(-0.728 + width - 0.08, -0.28); + shape.lineTo(-0.728 + width - 0.08, 0.28); + shape.lineTo(-0.728 + width, 0.28); + + shape.lineTo(-0.728 + width, -0.358 + depth - dd); + shape.lineTo(-0.728 + width - dd, -0.358 + depth); + shape.lineTo(-0.728 + dd, -0.358 + depth); + shape.lineTo(-0.728, -0.358 + depth - dd); + // shape.lineTo(-0.728, -0.358 + dd); + // shape.closePath() + + // 拉伸轨迹线 + const curve = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0, 0.22, 0), new THREE.Vector3(0, 1.872, 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); + + + 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]) + + } + + // 创建ptr的立柱 + private static createPtrFork(): THREE.BufferGeometry { + // 606.5 + const width = 0.245 + const depth = 0.716 + const dd = 0.05 + const fd = 0.03 + const shape = new THREE.Shape(); + + shape.moveTo(-0.728 + width - 0.08, -0.28); + shape.lineTo(-0.728 + width + 0.02, -0.28); + shape.lineTo(-0.728 + width + 0.02, -0.27); + shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.27); + shape.lineTo(-0.728 + width + 0.02 + 1.130, -0.27 + fd); + shape.lineTo(-0.728 + width + 0.02 + 1.130, -0.12 - fd); + shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.12); + shape.lineTo(-0.728 + width + 0.02, -0.12); + shape.lineTo(-0.728 + width + 0.02, 0.12); + shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.12); + shape.lineTo(-0.728 + width + 0.02 + 1.130, 0.12 + fd); + shape.lineTo(-0.728 + width + 0.02 + 1.130, 0.27 - fd); + shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.27); + shape.lineTo(-0.728 + width + 0.02, 0.27); + shape.lineTo(-0.728 + width + 0.02, 0.28); + shape.lineTo(-0.728 + width - 0.08, 0.28); + + shape.closePath() + + // 拉伸轨迹线 + const curve = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0, 0.02, 0), new THREE.Vector3(0, 0.482, 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.728 + width + 0.02, -0.3); + shapeD.lineTo(-0.728 + width + 0.02 + 1.2, -0.3); + shapeD.lineTo(-0.728 + width + 0.02 + 1.2, 0.3); + shapeD.lineTo(-0.728 + width + 0.02, 0.3); + shape.closePath() + + // 拉伸轨迹线 + const curveD = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0, 0.07, 0), new THREE.Vector3(0, 0.482, 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 + } + + private static ptrPedestalGeometry: THREE.BufferGeometry = null; + private static ptrPillarGeometry: THREE.BufferGeometry = null; + private static ptrForkGeometry: THREE.BufferGeometry = null; + + constructor(item: ItemJson, option?: RendererCudOption) { + super(); + if (!Cl23dObject.ptrPedestalGeometry) { + Cl23dObject.ptrPedestalGeometry = Cl23dObject.createPtrPedestal() + } + const ptrPedestalGeometry = Cl23dObject.ptrPedestalGeometry + const ptrPedestalMaterial = new THREE.MeshPhongMaterial({color: 0xffdddbca}); + const ptrPedestalMesh = new THREE.Mesh(ptrPedestalGeometry, ptrPedestalMaterial); + ptrPedestalMesh.name = 'ptrPedestalMesh' + + if (!Cl23dObject.ptrPillarGeometry) { + Cl23dObject.ptrPillarGeometry = Cl23dObject.createPtrPillar() + } + const ptrPillarGeometry = Cl23dObject.ptrPillarGeometry; + const ptrPillarMaterial = new THREE.MeshPhongMaterial({color: 0xff6c6956}); + const ptrPillarMesh = new THREE.Mesh(ptrPillarGeometry, ptrPillarMaterial); + ptrPillarMesh.name = 'ptrPillarMesh' + + if (!Cl23dObject.ptrForkGeometry) { + Cl23dObject.ptrForkGeometry = Cl23dObject.createPtrFork() + } + const ptrForkGeometry = Cl23dObject.ptrForkGeometry; + const ptrForkMaterial = new THREE.MeshPhongMaterial({color: 0xff444444}); + const ptrForkMesh = new THREE.Mesh(ptrForkGeometry, ptrForkMaterial); + ptrForkMesh.name = 'ptrForkMesh' + + this.add(ptrPedestalMesh) + const groupPillar = new THREE.Group() + groupPillar.add(ptrPillarMesh) + groupPillar.add(ptrForkMesh) + this.add(groupPillar) + } + +} diff --git a/src/modules/cl2/Cl2Renderer.ts b/src/modules/cl2/Cl2Renderer.ts index c2128e6..8806a62 100644 --- a/src/modules/cl2/Cl2Renderer.ts +++ b/src/modules/cl2/Cl2Renderer.ts @@ -1,9 +1,7 @@ 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' +import Cl23dObject from "@/modules/cl2/Cl23dObject"; /** * ptr侧叉渲染器 @@ -58,30 +56,9 @@ export default class PtrRenderer extends BaseRenderer { return null } - const group = new THREE.Group() + const group = new Cl23dObject(item, option) group.name = PtrRenderer.POINT_NAME - const ptrPedestalGeometry = this.createPtrPedestal(item, option) - const ptrPedestalMaterial = new THREE.MeshPhongMaterial({color: 0xffdddbca}); - const ptrPedestalMesh = new THREE.Mesh(ptrPedestalGeometry, ptrPedestalMaterial); - ptrPedestalMesh.name = 'ptrPedestalMesh' - - const ptrPillarGeometry = this.createPtrPillar(item, option); - const ptrPillarMaterial = new THREE.MeshPhongMaterial({color: 0xff6c6956}); - const ptrPillarMesh = new THREE.Mesh(ptrPillarGeometry, ptrPillarMaterial); - ptrPillarMesh.name = 'ptrPillarMesh' - - const ptrForkGeometry = this.createPtrFork(item, option); - const ptrForkMaterial = new THREE.MeshPhongMaterial({color: 0xff444444}); - const ptrForkMesh = new THREE.Mesh(ptrForkGeometry, ptrForkMaterial); - ptrForkMesh.name = 'ptrForkMesh' - - group.add(ptrPedestalMesh) - const groupPillar = new THREE.Group() - groupPillar.add(ptrPillarMesh) - groupPillar.add(ptrForkMesh) - group.add(groupPillar) - // 设置位置 group.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2]) return group @@ -98,259 +75,4 @@ export default class PtrRenderer extends BaseRenderer { throw new Error('Ptr createPointBasic not allow!') } - // 创建ptr的底座 - createPtrPedestal(item: ItemJson, option?: RendererCudOption): THREE.BufferGeometry { - // 参数配置 - const radius = 0.8; // 圆半径 - const lineDist = 0.75; // 切割线距离圆心距离 - const segments = 64; // 圆的分段精度 - - // 计算切割线与圆的交点 - const intersectY = Math.sqrt(radius*radius - lineDist*lineDist); - const startAngle = Math.asin(intersectY/radius); - const endAngle = Math.acos(intersectY/radius); - - - const shape = new THREE.Shape(); - shape.moveTo(0, 0); // 起点在圆心 - shape.absarc(0, 0, 0.8, startAngle, endAngle, false); // 从0到π绘制半圆 - shape.absarc(0, 0, 0.8, startAngle + Math.PI/2, endAngle + Math.PI/2, false); - shape.absarc(0, 0, 0.8, startAngle + Math.PI, endAngle + Math.PI, false); - shape.absarc(0, 0, 0.8, startAngle + Math.PI/2 * 3, endAngle + Math.PI/2 * 3, false); - - shape.lineTo(-0.5, -intersectY) - shape.lineTo(-0.5, -intersectY + 0.17) - shape.lineTo(0.75, -intersectY + 0.17) - shape.lineTo(0.75, intersectY - 0.17) - shape.lineTo(-0.5, intersectY - 0.17) - shape.lineTo(-0.5, intersectY) - 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 curveD = new THREE.EllipseCurve( - 0, 0, radius, radius, 0, Math.PI * 2, false, 0 - ); - // 生成拉伸路径点 - const pointsD = curveD.getPoints(segments).map(p => - new THREE.Vector3(p.x, 0.20, p.y) - ); - // 3. 挤出成型 - const optionsD = { - steps: segments, - bevelEnabled: false, - // bevelSegments: 0.01, - extrudePath: new THREE.CatmullRomCurve3(pointsD) - }; - - 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 - } - - // 创建ptr的立柱 - createPtrPillar(item: ItemJson, option?: RendererCudOption): THREE.BufferGeometry { - // 606.5 - const width = 0.245 - const depth = 0.716 - const dd = 0.05 - const shape = new THREE.Shape(); - shape.moveTo(-0.728, -0.358 + dd); - shape.lineTo(-0.728 + dd, -0.358); - shape.lineTo(-0.728 + width - dd, -0.358); - shape.lineTo(-0.728 + width, -0.358 + dd); - - shape.lineTo(-0.728 + width, -0.28); - shape.lineTo(-0.728 + width - 0.08, -0.28); - shape.lineTo(-0.728 + width - 0.08, 0.28); - shape.lineTo(-0.728 + width, 0.28); - - shape.lineTo(-0.728 + width, -0.358 + depth - dd); - shape.lineTo(-0.728 + width - dd, -0.358 + depth); - shape.lineTo(-0.728 + dd, -0.358 + depth); - shape.lineTo(-0.728, -0.358 + depth - dd); - // shape.lineTo(-0.728, -0.358 + dd); - // shape.closePath() - - // 拉伸轨迹线 - const curve = new THREE.CatmullRomCurve3( - [new THREE.Vector3(0, 0.22, 0), new THREE.Vector3(0, 1.872, 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); - - - 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]) - - } - - // 创建ptr的立柱 - createPtrFork(item: ItemJson, option?: RendererCudOption): THREE.BufferGeometry { - // 606.5 - const width = 0.245 - const depth = 0.716 - const dd = 0.05 - const fd = 0.03 - const shape = new THREE.Shape(); - - shape.moveTo(-0.728 + width - 0.08, -0.28); - shape.lineTo(-0.728 + width + 0.02, -0.28); - shape.lineTo(-0.728 + width + 0.02, -0.27); - shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.27); - shape.lineTo(-0.728 + width + 0.02 + 1.130, -0.27 + fd); - shape.lineTo(-0.728 + width + 0.02 + 1.130, -0.12 - fd); - shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.12); - shape.lineTo(-0.728 + width + 0.02, -0.12); - shape.lineTo(-0.728 + width + 0.02, 0.12); - shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.12); - shape.lineTo(-0.728 + width + 0.02 + 1.130, 0.12 + fd); - shape.lineTo(-0.728 + width + 0.02 + 1.130, 0.27 - fd); - shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.27); - shape.lineTo(-0.728 + width + 0.02, 0.27); - shape.lineTo(-0.728 + width + 0.02, 0.28); - shape.lineTo(-0.728 + width - 0.08, 0.28); - - shape.closePath() - - // 拉伸轨迹线 - const curve = new THREE.CatmullRomCurve3( - [new THREE.Vector3(0, 0.02, 0), new THREE.Vector3(0, 0.482, 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.728 + width + 0.02, -0.3); - shapeD.lineTo(-0.728 + width + 0.02 + 1.2, -0.3); - shapeD.lineTo(-0.728 + width + 0.02 + 1.2, 0.3); - shapeD.lineTo(-0.728 + width + 0.02, 0.3); - shape.closePath() - - // 拉伸轨迹线 - const curveD = new THREE.CatmullRomCurve3( - [new THREE.Vector3(0, 0.07, 0), new THREE.Vector3(0, 0.482, 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 - } - } diff --git a/src/modules/clx/Clx3dObject.ts b/src/modules/clx/Clx3dObject.ts new file mode 100644 index 0000000..66a3839 --- /dev/null +++ b/src/modules/clx/Clx3dObject.ts @@ -0,0 +1,447 @@ +import * as THREE from "three"; +import {CSG} from "three-csg-ts"; +//@ts-ignore +import {mergeGeometries} from 'three/addons/utils/BufferGeometryUtils.js' + + +export default class Clx3dObject extends THREE.Object3D { + + // 创建clx的底座 + private static createClxPedestal(): 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的立柱 + private static createClxPillar(): 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 material = new THREE.MeshBasicMaterial({color: 0xffdddbca}); + // const mesh = new THREE.Mesh(geometry, material); + return new THREE.ExtrudeGeometry(shape, options) + + } + + // 创建clx的叉 + private static createClxFork(): 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的铰链 + private static createClxGemel(isLeft: boolean = false) { + const width = 0.08 + const depth = 0.9 + const dd = 0.02 + const shape = new THREE.Shape(); + 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 + (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.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, + bevelEnabled: false, + extrudePath: curveL1 + }); + + const geometryL2 = new THREE.ExtrudeGeometry(shape, { + steps: 1, + bevelEnabled: false, + extrudePath: curveL2 + }); + + 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) + } + + private static clxPedestalGeometry: THREE.BufferGeometry = null + private static clxPillarGeometry: THREE.BufferGeometry = null + private static clxForkGeometry: THREE.BufferGeometry = null + private static clxGemelGeometryL: THREE.BufferGeometry = null; + private static clxGemelGeometryR: THREE.BufferGeometry = null; + + constructor(item: ItemJson, option?: RendererCudOption) { + super() + + if (!Clx3dObject.clxPedestalGeometry) { + Clx3dObject.clxPedestalGeometry = Clx3dObject.createClxPedestal() + } + const clxPedestalGeometry = Clx3dObject.clxPedestalGeometry + const clxPedestalMaterial = new THREE.MeshPhongMaterial({color: 0xffdddbca}); + const clxPedestalMesh = new THREE.Mesh(clxPedestalGeometry, clxPedestalMaterial); + + if (!Clx3dObject.clxPillarGeometry) { + Clx3dObject.clxPillarGeometry = Clx3dObject.createClxPillar() + } + const clxPillarGeometry = Clx3dObject.clxPillarGeometry + const clxPillarMaterial = new THREE.MeshPhongMaterial({color: 0xff6c6956}); + const clxPillarMesh = new THREE.Mesh(clxPillarGeometry, clxPillarMaterial); + + if (!Clx3dObject.clxForkGeometry) { + Clx3dObject.clxForkGeometry = Clx3dObject.createClxFork() + } + const clxForkGeometry = Clx3dObject.clxForkGeometry; + const clxForkMaterial = new THREE.MeshPhongMaterial({color: 0xff444444}); + const clxForkMesh = new THREE.Mesh(clxForkGeometry, clxForkMaterial); + clxForkMesh.name = 'clxFork' + + if (!Clx3dObject.clxGemelGeometryL) { + Clx3dObject.clxGemelGeometryL = Clx3dObject.createClxGemel(true) + } + const clxGemelGeometryL = Clx3dObject.clxGemelGeometryL + + if (!Clx3dObject.clxGemelGeometryR) { + Clx3dObject.clxGemelGeometryR = Clx3dObject.createClxGemel(false) + } + const clxGemelGeometryR = Clx3dObject.clxGemelGeometryR + + const clxGemelMaterial = new THREE.MeshPhongMaterial({color: 0xff555555}); + const clxGemelMeshL1 = new THREE.Mesh(clxGemelGeometryL, clxGemelMaterial); + clxGemelMeshL1.name = 'clxGemelMeshL1' + const clxGemelMeshL2 = new THREE.Mesh(clxGemelGeometryL, clxGemelMaterial); + clxGemelMeshL2.name = 'clxGemelMeshL2' + const clxGemelMeshR1 = new THREE.Mesh(clxGemelGeometryR, clxGemelMaterial); + clxGemelMeshR1.name = 'clxGemelMeshR1' + const clxGemelMeshR2 = new THREE.Mesh(clxGemelGeometryR, clxGemelMaterial); + clxGemelMeshR2.name = 'clxGemelMeshR2' + + const d = 0 + + this.add(clxPedestalMesh) + this.add(clxPillarMesh) + this.add(clxForkMesh) + + + const ac = Math.asin(d/(2 * 0.8)) + + + 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 + + this.add(clxGemelMeshL1) + this.add(clxGemelMeshL2) + this.add(clxGemelMeshR1) + this.add(clxGemelMeshR2) + } + +} diff --git a/src/modules/clx/ClxRenderer.ts b/src/modules/clx/ClxRenderer.ts index 3c1b0f5..46ec3cd 100644 --- a/src/modules/clx/ClxRenderer.ts +++ b/src/modules/clx/ClxRenderer.ts @@ -1,14 +1,7 @@ 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' +import Clx3dObject from "@/modules/clx/Clx3dObject"; /** * clx渲染器 @@ -63,78 +56,9 @@ export default class ClxRenderer extends BaseRenderer { return } - const textureLoader = new THREE.TextureLoader() - const texture = textureLoader.load(clxUrl) - - const group = new THREE.Group() + const group = new Clx3dObject(item, option) 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: 0xff444444}); - const clxForkMesh = new THREE.Mesh(clxForkGeometry, clxForkMaterial); - - 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 = 1.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 * 0.8)) - - - 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 @@ -149,360 +73,4 @@ export default class ClxRenderer extends BaseRenderer { 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(isLeft: boolean = false) { - const width = 0.08 - const depth = 0.9 - const dd = 0.02 - const shape = new THREE.Shape(); - 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 + (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.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, - bevelEnabled: false, - extrudePath: curveL1 - }); - - const geometryL2 = new THREE.ExtrudeGeometry(shape, { - steps: 1, - bevelEnabled: false, - extrudePath: curveL2 - }); - - 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) - } - }