diff --git a/src/assets/Models/storageBar.png b/src/assets/Models/storageBar.png new file mode 100644 index 0000000..535a2d6 Binary files /dev/null and b/src/assets/Models/storageBar.png differ diff --git a/src/assets/Models/storageBar2.png b/src/assets/Models/storageBar2.png new file mode 100644 index 0000000..be3754d Binary files /dev/null and b/src/assets/Models/storageBar2.png differ diff --git a/src/components/Model3DView.vue b/src/components/Model3DView.vue index 9b75bac..653de6d 100644 --- a/src/components/Model3DView.vue +++ b/src/components/Model3DView.vue @@ -90,6 +90,12 @@ import { renderIcon } from '@/utils/webutils.js' import rackPlatUrl from '@/assets/images/conveyor/shapes/RackPlatform.png' import rackBlue from '@/assets/images/conveyor/shapes/Rack-blue.png' import triangleUrl from '@/assets/images/conveyor/shapes/triangle.png' +import textureUrl from '@/assets/images/conveyor/shapes/RibSideSkirtThumbnail.jpg' +import moveUrl from '@/assets/images/conveyor/shapes/move.svg' +import arrowRightUrl from '@/assets/images/conveyor/shapes/arrow-right.svg' +import rackUrl from '@/assets/images/conveyor/shapes/Rack.png' +import Plastic_Rough_JPG from "@/assets/Models/Plastic_Rough.jpg"; +import storageBar_PNG from "@/assets/Models/storageBar.png"; // DOM refs const canvasContainer = ref(null) @@ -478,6 +484,159 @@ function createGroundStore() { const planeMesh = new THREE.Mesh(planeGeometry, material) planeMesh.rotateX(Math.PI / 2) scene.add(planeMesh) + + let textureLoader = new THREE.TextureLoader() + + const texture1 = textureLoader.load(storageBar_PNG); + const texture2 = textureLoader.load(Plastic_Rough_JPG); + + + const curve = new THREE.CatmullRomCurve3( + [new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 2, 0)], + false, // 闭合曲线 + 'catmullrom', + 0 + ); + // const points = curve.getPoints(10); + // const geometry = new THREE.BufferGeometry().setFromPoints(points); + // const material = new THREE.LineBasicMaterial({ color: 0x00ff00 }); + // const lineS = new THREE.Line(geometry, material); + // group.add(lineS as THREE.Object3D) + + + const splits = [ + [0, 0], + [0.025, 0], + [0.04, 0.005], + [0.06, 0.005], + [0.075, 0], + [0.1, 0], + [0.1, 0.092], + [0.092, 0.1], + [0.075, 0.1], + [0.075, 0.092], + [0.092, 0.092], + [0.092, 0.008], + [0.008, 0.008], + [0.008, 0.092], + [0.025, 0.092], + [0.025, 0.1], + [0.008, 0.1], + [0, 0.092], + [0, 0] + ] + + + + let pointsShape = []; + for (let i = 0; i < splits.length ; i ++) { + let _x = splits[i][0] //* 10; + let _y = splits[i][1] //* 10; + pointsShape.push({ + x: _x, + y: _y, + }); + } + + const shape = new THREE.Shape(); + shape.moveTo(pointsShape[0].x, pointsShape[0].y); + for (let i = 1; i < pointsShape.length; i++) { + shape.lineTo(pointsShape[i].x , pointsShape[i].y); + } + + const options = { + steps: 1, + bevelEnabled: false, + extrudePath: curve, + }; + + const geometry1 = new THREE.ExtrudeGeometry(shape, options); + + resetUVs(geometry1); + + + // 设置贴图在 U 和 V 方向上的重复次数 + texture1.repeat.set(10, 18); // X轴重复2次,Y轴重复3次(相当于缩小纹理) + texture2.repeat.set(2, 2); // X轴重复2次,Y轴重复3次(相当于缩小纹理) + // texture1.offset.set(0.5, 0) + texture1.center.set(0.5, 0) +// 必须设置包裹模式为重复 + texture1.wrapS = THREE.RepeatWrapping; + texture1.wrapT = THREE.RepeatWrapping; + + texture2.wrapS = THREE.RepeatWrapping; + texture2.wrapT = THREE.RepeatWrapping; + + const material1 = new THREE.MeshPhongMaterial({ + // color: '#FF3549', + alphaMap: texture1, // 应用纹理 + normalMap: texture2, // 应用纹理 + // side: THREE.DoubleSide // 如果你的几何体有双面,确保这一面也被贴图 + metalness: 0.6, + roughness: 0.8, + specular: 0x6d6d6d, + transparent: true, + needsUpdate: true, + }); + material1.color.setHex(0xFF35499C, "srgb"); + + geometry1.scale(0.8, 1, 1) + // const material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); + // const mesh1 = new THREE.Mesh(geometry1, material1); + + let mesh = new THREE.InstancedMesh(geometry1, material1, 160000); + mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); + mesh.castShadow = true; + mesh.receiveShadow = true; + + let dummy = new THREE.Object3D(); + + + for (let i = 0; i < 400; i++) { + for (let j = 0; j < 400; j++) { + dummy.position.set(i * 0.1, 0, j * 0.2); + dummy.updateMatrix(); + mesh.setMatrixAt(i*400 + j, dummy.matrix); + } + } + + scene.add(mesh); +} + +function resetUVs(geometry) { + if (geometry == undefined) return; + var pos = geometry.getAttribute("position"), + nor = geometry.getAttribute("normal"), + uvs = geometry.getAttribute("uv"); + + for (var i = 0; i < pos.count; i++) { + var x = 0, + y = 0; + + var nx = Math.abs(nor.getX(i)), + ny = Math.abs(nor.getY(i)), + nz = Math.abs(nor.getZ(i)); + + // if facing X + if (nx >= ny && nx >= nz) { + x = pos.getZ(i); + y = pos.getY(i); + } + + // if facing Y + if (ny >= nx && ny >= nz) { + x = pos.getX(i); + y = pos.getZ(i); + } + + // if facing Z + if (nz >= nx && nz >= ny) { + x = pos.getX(i); + y = pos.getY(i); + } + + uvs.setXY(i, x, y); + } } function initThree() { diff --git a/src/editor/menus/Model3DView.ts b/src/editor/menus/Model3DView.ts index 7896b5a..e943900 100644 --- a/src/editor/menus/Model3DView.ts +++ b/src/editor/menus/Model3DView.ts @@ -15,7 +15,7 @@ export default defineMenu((menus) => { system.showDialog(Model3DView, { title: '模型查看器', width: 950, - height: 400, + height: 950, showClose: true, showMax: true, showCancelButton: false, diff --git a/src/modules/rack/RackRenderer.ts b/src/modules/rack/RackRenderer.ts index 4698559..5c67106 100644 --- a/src/modules/rack/RackRenderer.ts +++ b/src/modules/rack/RackRenderer.ts @@ -5,6 +5,8 @@ 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 Plastic_Rough_JPG from '@/assets/Models/Plastic_Rough.jpg' +import {BufferGeometry} from "three"; /** * 货架货位渲染器 @@ -137,4 +139,14 @@ export default class RackRenderer extends BaseRenderer { createPointBasic(item: ItemJson, option?: RendererCudOption): THREE.Object3D { throw new Error('Rack createPointBasic not allow!') } + + rackVerticalBarWidth = 0.1 + rackVerticalBarDepth = 0.08 + rackVerticalBarColor = 0xFF35499C + rackVerticalBarGeometry: BufferGeometry = null + + createVerticalBar(x, y, z, length) { + + } + }