From a7b0b0b0582d62ea1211fbb26e0cca7898aa7360 Mon Sep 17 00:00:00 2001
From: liupeng <511646242@qq.com>
Date: Fri, 30 May 2025 10:05:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B4=A7=E6=9E=B6-=E5=8D=8A?=
=?UTF-8?q?=E6=88=90=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/designer/model3DView/Model3DView.vue | 123 ++++++++++++++++++++++-
src/designer/viewWidgets/toolbox/ToolboxView.vue | 4 +-
2 files changed, 123 insertions(+), 4 deletions(-)
diff --git a/src/designer/model3DView/Model3DView.vue b/src/designer/model3DView/Model3DView.vue
index a9fa332..e5b7ecf 100644
--- a/src/designer/model3DView/Model3DView.vue
+++ b/src/designer/model3DView/Model3DView.vue
@@ -16,6 +16,7 @@
打开材质
添加输送线
+ 添加货架
材质颜色
@@ -85,10 +86,9 @@ import Split from '@/components/split/split.vue'
import SplitArea from '@/components/split/split-area.vue'
import { renderIcon } from '@/utils/webutils.js'
import textureUrl from '@/assets/images/conveyor/shapes/RibSideSkirtThumbnail.jpg'
-import textureUrl2 from '@/assets/images/conveyor/shapes/logo.png'
import moveUrl from '@/assets/images/conveyor/shapes/move.svg'
import arrowRightUrl from '@/assets/images/conveyor/shapes/arrow-right.svg'
-// import pointImg from '@/assets/images/logo.png' arrow-right.svg
+import rackUrl from '@/assets/images/conveyor/shapes/Rack.png'
// DOM refs
const canvasContainer = ref(null)
@@ -260,6 +260,125 @@ function addMarkerAt(x, y,z,textUrl, scale = 1) {
});
}
+function createShelf(){//创建货架
+ const textureLoader = new THREE.TextureLoader();
+ const metalTexture = textureLoader.load('path/to/your/metal/texture.jpg'); // 替换为实际路径
+
+ // 材质设置
+ const material = new THREE.MeshStandardMaterial({
+ map: metalTexture,
+ metalness: 1.0,
+ roughness: 0.5
+ });
+
+ // 货架参数
+ const shelfLength = 10; // 总长
+ const shelfWidth = 0.8; // 宽度（深度）
+ const shelfThickness = 0.1; // 层板厚度
+ const rows = 3; // 层数
+ const columns = 4; // 列数
+ const spacingY = 1; // 层间距
+
+ const unitLength = shelfLength / columns; // 每个格子长度：2.5m
+
+ // ✅ 整体上浮高度：让模型位于水平面之上
+ const baseHeight = 2; // 单位：米
+
+ // ---------------------
+ // 创建层板（3层 × 4列）
+ // ---------------------
+ for (let row = 0; row < rows; row++) {
+ for (let col = 0; col < columns; col++) {
+ const geometry = new THREE.BoxGeometry(unitLength, shelfThickness, shelfWidth);
+ const mesh = new THREE.Mesh(geometry, material);
+
+ const x = -shelfLength / 2 + unitLength * col + unitLength / 2;
+ const y = -(shelfThickness + spacingY) * row - shelfThickness / 2 + baseHeight; // 加上偏移
+ const z = 0;
+
+ mesh.position.set(x, y, z);
+ scene.add(mesh);
+ }
+ }
+
+ // ---------------------
+ // 计算第三层层板底部位置（用于支撑柱对齐）
+ // ---------------------
+ const thirdShelfCenterY = -(shelfThickness + spacingY) * 2 - shelfThickness / 2 + baseHeight;
+ const thirdShelfBottomY = thirdShelfCenterY - shelfThickness / 2;
+
+ // ---------------------
+// 创建支撑柱 + 添加贴纸
+// ---------------------
+
+ const postWidth = 0.1;
+ const postDepth = 0.1;
+ const postHeight = 3.3;
+
+
+
+
+ const postPositionsX = [0, 2.5, 5, 7.5, 10];
+ const postPositionsZ = [-shelfWidth / 2, shelfWidth / 2];
+
+// 加载贴纸纹理（可以是透明PNG）
+ const loader = new THREE.TextureLoader();
+ loader.load(rackUrl, (texture) => {
+ // 创建贴纸材质（支持透明）
+ const stickerMaterial = new THREE.MeshBasicMaterial({
+ map: texture,
+ transparent: true,
+ side: THREE.DoubleSide // 双面可见
+ });
+
+ postPositionsX.forEach(x => {
+ postPositionsZ.forEach(z => {
+ // 创建柱子
+ const postGeometry = new THREE.BoxGeometry(postWidth, postHeight, postDepth);
+ const post = new THREE.Mesh(postGeometry, material);
+
+ // 设置柱子中心 Y 坐标，使其底部对齐第三层层板底部
+ const postCenterY = thirdShelfBottomY + postHeight / 2;
+
+ post.position.set(
+ x - shelfLength / 2,
+ postCenterY,
+ z
+ );
+
+ scene.add(post);
+
+ // ---------------------
+ // 创建贴纸（附加在外侧面上）
+ // ---------------------
+ const stickerWidth = 0.08; // 贴纸宽度
+ const stickerHeight = 0.2; // 贴纸高度
+
+ const stickerGeometry = new THREE.PlaneGeometry(stickerWidth, stickerHeight);
+ const sticker = new THREE.Mesh(stickerGeometry, stickerMaterial);
+
+ // 将贴纸放在柱子外侧表面中间位置
+ sticker.position.set(
+ post.position.x + postWidth / 2, // 柱子外侧
+ post.position.y, // Y 中心
+ post.position.z // Z 对齐
+ );
+
+ // 让贴纸始终面向相机（可选）
+ // 使用 dcm.orientation.lookAt(camera.position) 或手动设置朝向
+ // 这里简单设置固定朝向正面（可根据需求扩展为自动朝向相机）
+ sticker.lookAt(new THREE.Vector3(1, 0, 0)); // 面向 X 正方向
+
+ // 微调：让贴纸略微浮出柱子表面，避免深度冲突
+ sticker.position.x += 0.01;
+
+ scene.add(sticker);
+ });
+ });
+ })
+}
+
+
function initThree() {
const viewerDom = canvasContainer.value
diff --git a/src/designer/viewWidgets/toolbox/ToolboxView.vue b/src/designer/viewWidgets/toolbox/ToolboxView.vue
index 275c701..10c372d 100644
--- a/src/designer/viewWidgets/toolbox/ToolboxView.vue
+++ b/src/designer/viewWidgets/toolbox/ToolboxView.vue
@@ -102,8 +102,8 @@ export default {
{
name: 'other', icon: 'antd CiOutlined', label: '辅助',
children: [
- { name: 'source', label: '发生器' },
- { name: 'sink', label: '消失器' },
+ { name: 'source', icon:'antd SoundOutlined',label: '发生器' },
+ { name: 'sink',icon:'fa Eraser', label: '消失器' },
{ name: 'dispatcher', label: '任务分配器' },
{ name: 'text', label: '文本' },
{ name: 'image', label: '图片' },