1
This commit is contained in:
@ -1,540 +1,84 @@
|
||||
import { Scene, Mesh, MeshBuilder, StandardMaterial, Color3, Vector3, AbstractMesh, BoundingBoxGizmo } from '@babylonjs/core';
|
||||
import { Scene, Vector3 } from '@babylonjs/core';
|
||||
import { AppPlacementWall, WallConfig, PlacementZoneInfo } from './AppPlacementWall';
|
||||
|
||||
/**
|
||||
* 放置区域配置
|
||||
*/
|
||||
export interface DropZoneConfig {
|
||||
modelName: string; // 目标模型名称
|
||||
divisions: number; // 分割块数（每条边分成几块）
|
||||
walls: WallConfig[]; // 墙面配置数组
|
||||
color?: string; // 颜色（十六进制）
|
||||
alpha?: number; // 透明度
|
||||
thickness?: number; // 厚度
|
||||
offset?: number; // 距离模型的偏移量
|
||||
scale?: number; // 整体缩放比例（0-1），用于生成内部放置区域
|
||||
showBorder?: boolean; // 是否显示边框
|
||||
borderColor?: string; // 边框颜色
|
||||
}
|
||||
|
||||
/**
|
||||
* 放置区域管理类（使用新的墙面参数化方案）
|
||||
*/
|
||||
export class AppDropZone {
|
||||
private scene: Scene;
|
||||
private dropZones: Mesh[] = [];
|
||||
private dropZoneConfigs: Map<string, any[]> = new Map(); // 存储每个模型的放置区域配置
|
||||
private boundingBoxLines: Mesh[] = []; // 存储包围盒线框
|
||||
private placementWall: AppPlacementWall;
|
||||
|
||||
constructor(scene: Scene) {
|
||||
this.scene = scene;
|
||||
this.placementWall = new AppPlacementWall(scene);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据模型包围盒生成四周的放置区域
|
||||
* 生成放置区域
|
||||
* @param config 配置参数
|
||||
*/
|
||||
generateDropZones(config: DropZoneConfig): Mesh[] {
|
||||
const {
|
||||
modelName,
|
||||
divisions,
|
||||
color = '#21c7ff',
|
||||
alpha = 0.3,
|
||||
thickness = 2,
|
||||
offset = 5,
|
||||
scale = 1.0
|
||||
} = config;
|
||||
|
||||
// 查找目标模型（支持 modelId 或 mesh name）
|
||||
let targetMeshes: AbstractMesh[] | undefined;
|
||||
|
||||
// 先尝试通过 modelId 查找（从 AppModel 的 modelDic）
|
||||
const mainApp = (this.scene as any).mainApp;
|
||||
if (mainApp?.appModel) {
|
||||
targetMeshes = mainApp.appModel.getCachedMeshes(modelName);
|
||||
}
|
||||
|
||||
// 如果没找到，尝试通过 mesh name 查找
|
||||
if (!targetMeshes || targetMeshes.length === 0) {
|
||||
const mesh = this.scene.getMeshByName(modelName);
|
||||
if (mesh) {
|
||||
targetMeshes = [mesh];
|
||||
}
|
||||
}
|
||||
|
||||
if (!targetMeshes || targetMeshes.length === 0) {
|
||||
console.warn(`模型 ${modelName} 不存在`);
|
||||
return [];
|
||||
}
|
||||
|
||||
// 计算所有网格的总包围盒（使用世界坐标）
|
||||
let minX = Infinity, minY = Infinity, minZ = Infinity;
|
||||
let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
|
||||
|
||||
targetMeshes.forEach(mesh => {
|
||||
// 强制更新世界矩阵
|
||||
mesh.computeWorldMatrix(true);
|
||||
const boundingInfo = mesh.getBoundingInfo();
|
||||
|
||||
// 获取世界空间的包围盒
|
||||
const worldMin = boundingInfo.boundingBox.minimumWorld;
|
||||
const worldMax = boundingInfo.boundingBox.maximumWorld;
|
||||
|
||||
minX = Math.min(minX, worldMin.x);
|
||||
minY = Math.min(minY, worldMin.y);
|
||||
minZ = Math.min(minZ, worldMin.z);
|
||||
maxX = Math.max(maxX, worldMax.x);
|
||||
maxY = Math.max(maxY, worldMax.y);
|
||||
maxZ = Math.max(maxZ, worldMax.z);
|
||||
});
|
||||
|
||||
console.log('包围盒坐标:', { minX, minY, minZ, maxX, maxY, maxZ });
|
||||
console.log('包围盒尺寸:', {
|
||||
width: maxX - minX,
|
||||
height: maxY - minY,
|
||||
depth: maxZ - minZ
|
||||
});
|
||||
|
||||
const width = maxX - minX;
|
||||
const height = maxY - minY;
|
||||
const depth = maxZ - minZ;
|
||||
|
||||
// 应用缩放比例
|
||||
const centerX = (minX + maxX) / 2;
|
||||
const centerY = (minY + maxY) / 2;
|
||||
const centerZ = (minZ + maxZ) / 2;
|
||||
|
||||
const scaledWidth = width * scale;
|
||||
const scaledHeight = height * scale;
|
||||
const scaledDepth = depth * scale;
|
||||
|
||||
const scaledMinX = centerX - scaledWidth / 2;
|
||||
const scaledMaxX = centerX + scaledWidth / 2;
|
||||
const scaledMinY = centerY - scaledHeight / 2;
|
||||
const scaledMaxY = centerY + scaledHeight / 2;
|
||||
const scaledMinZ = centerZ - scaledDepth / 2;
|
||||
const scaledMaxZ = centerZ + scaledDepth / 2;
|
||||
|
||||
// 计算每块的尺寸
|
||||
const blockWidth = scaledWidth / divisions;
|
||||
const blockDepth = scaledDepth / divisions;
|
||||
|
||||
const zones: Mesh[] = [];
|
||||
const zoneConfigs: any[] = [];
|
||||
|
||||
// 创建材质
|
||||
const material = this.createDropZoneMaterial(color, alpha);
|
||||
|
||||
// 前面（Z轴负方向）
|
||||
for (let i = 0; i < divisions; i++) {
|
||||
const x = scaledMinX + blockWidth * i + blockWidth / 2;
|
||||
const z = scaledMinZ - offset;
|
||||
const position = new Vector3(x, scaledMinY, z);
|
||||
const zone = this.createDropZonePlane(
|
||||
`dropZone_${modelName}_front_${i}`,
|
||||
blockWidth,
|
||||
scaledHeight,
|
||||
position,
|
||||
0,
|
||||
material,
|
||||
thickness
|
||||
);
|
||||
zones.push(zone);
|
||||
zoneConfigs.push({
|
||||
position: position.clone(),
|
||||
width: blockWidth,
|
||||
height: scaledHeight,
|
||||
rotation: 0,
|
||||
side: 'front',
|
||||
index: i
|
||||
});
|
||||
}
|
||||
|
||||
// 后面（Z轴正方向）
|
||||
for (let i = 0; i < divisions; i++) {
|
||||
const x = scaledMinX + blockWidth * i + blockWidth / 2;
|
||||
const z = scaledMaxZ + offset;
|
||||
const position = new Vector3(x, scaledMinY, z);
|
||||
const zone = this.createDropZonePlane(
|
||||
`dropZone_${modelName}_back_${i}`,
|
||||
blockWidth,
|
||||
scaledHeight,
|
||||
position,
|
||||
0,
|
||||
material,
|
||||
thickness
|
||||
);
|
||||
zones.push(zone);
|
||||
zoneConfigs.push({
|
||||
position: position.clone(),
|
||||
width: blockWidth,
|
||||
height: scaledHeight,
|
||||
rotation: 0,
|
||||
side: 'back',
|
||||
index: i
|
||||
});
|
||||
}
|
||||
|
||||
// 左侧（X轴负方向）
|
||||
for (let i = 0; i < divisions; i++) {
|
||||
const x = scaledMinX - offset;
|
||||
const z = scaledMinZ + blockDepth * i + blockDepth / 2;
|
||||
const position = new Vector3(x, scaledMinY, z);
|
||||
const zone = this.createDropZonePlane(
|
||||
`dropZone_${modelName}_left_${i}`,
|
||||
blockDepth,
|
||||
scaledHeight,
|
||||
position,
|
||||
Math.PI / 2,
|
||||
material,
|
||||
thickness
|
||||
);
|
||||
zones.push(zone);
|
||||
zoneConfigs.push({
|
||||
position: position.clone(),
|
||||
width: blockDepth,
|
||||
height: scaledHeight,
|
||||
rotation: Math.PI / 2,
|
||||
side: 'left',
|
||||
index: i
|
||||
});
|
||||
}
|
||||
|
||||
// 右侧（X轴正方向）
|
||||
for (let i = 0; i < divisions; i++) {
|
||||
const x = scaledMaxX + offset;
|
||||
const z = scaledMinZ + blockDepth * i + blockDepth / 2;
|
||||
const position = new Vector3(x, scaledMinY, z);
|
||||
const zone = this.createDropZonePlane(
|
||||
`dropZone_${modelName}_right_${i}`,
|
||||
blockDepth,
|
||||
scaledHeight,
|
||||
position,
|
||||
Math.PI / 2,
|
||||
material,
|
||||
thickness
|
||||
);
|
||||
zones.push(zone);
|
||||
zoneConfigs.push({
|
||||
position: position.clone(),
|
||||
width: blockDepth,
|
||||
height: scaledHeight,
|
||||
rotation: Math.PI / 2,
|
||||
side: 'right',
|
||||
index: i
|
||||
});
|
||||
}
|
||||
|
||||
// 保存配置
|
||||
this.dropZoneConfigs.set(modelName, zoneConfigs);
|
||||
this.dropZones.push(...zones);
|
||||
|
||||
// 显示包围盒
|
||||
this.showBoundingBox(modelName, '#ff0000');
|
||||
|
||||
// 默认隐藏
|
||||
zones.forEach(zone => zone.setEnabled(false));
|
||||
|
||||
return zones;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建单个放置区域平面
|
||||
*/
|
||||
private createDropZonePlane(
|
||||
name: string,
|
||||
width: number,
|
||||
height: number,
|
||||
position: Vector3,
|
||||
rotationY: number,
|
||||
material: StandardMaterial,
|
||||
thickness: number
|
||||
): Mesh {
|
||||
// 创建主平面
|
||||
const plane = MeshBuilder.CreatePlane(name, {
|
||||
width: width,
|
||||
height: height
|
||||
}, this.scene);
|
||||
|
||||
plane.position = position;
|
||||
plane.rotation.y = rotationY;
|
||||
plane.material = material;
|
||||
plane.isPickable = true; // 可以被拾取，用于检测拖拽
|
||||
plane.metadata = { isDropZone: true }; // 标记为放置区域
|
||||
|
||||
// 创建边框线
|
||||
this.createBorder(plane, width, height, thickness);
|
||||
|
||||
return plane;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建边框线
|
||||
*/
|
||||
private createBorder(parent: Mesh, width: number, height: number, thickness: number): void {
|
||||
const halfWidth = width / 2;
|
||||
const halfHeight = height / 2;
|
||||
|
||||
const points = [
|
||||
new Vector3(-halfWidth, -halfHeight, -0.01),
|
||||
new Vector3(halfWidth, -halfHeight, -0.01),
|
||||
new Vector3(halfWidth, halfHeight, -0.01),
|
||||
new Vector3(-halfWidth, halfHeight, -0.01),
|
||||
new Vector3(-halfWidth, -halfHeight, -0.01)
|
||||
];
|
||||
|
||||
const border = MeshBuilder.CreateLines(`${parent.name}_border`, {
|
||||
points: points
|
||||
}, this.scene);
|
||||
|
||||
border.color = new Color3(1, 1, 1); // 白色边框
|
||||
border.parent = parent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建放置区域材质
|
||||
*/
|
||||
private createDropZoneMaterial(hexColor: string, alpha: number): StandardMaterial {
|
||||
const material = new StandardMaterial('dropZoneMat_' + Date.now(), this.scene);
|
||||
const rgb = this.hexToRgb(hexColor);
|
||||
material.diffuseColor = new Color3(rgb.r, rgb.g, rgb.b);
|
||||
material.alpha = alpha;
|
||||
material.backFaceCulling = false; // 双面显示
|
||||
return material;
|
||||
}
|
||||
|
||||
/**
|
||||
* 十六进制颜色转 RGB
|
||||
*/
|
||||
private hexToRgb(hex: string): { r: number; g: number; b: number } {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16) / 255,
|
||||
g: parseInt(result[2], 16) / 255,
|
||||
b: parseInt(result[3], 16) / 255
|
||||
} : { r: 0.13, g: 0.78, b: 1 };
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示所有放置区域
|
||||
*/
|
||||
showAllDropZones(): void {
|
||||
this.dropZones.forEach(zone => zone.setEnabled(true));
|
||||
// 显示包围盒
|
||||
this.boundingBoxLines.forEach(line => line.setEnabled(true));
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏所有放置区域
|
||||
*/
|
||||
hideAllDropZones(): void {
|
||||
this.dropZones.forEach(zone => zone.setEnabled(false));
|
||||
// 隐藏包围盒
|
||||
this.boundingBoxLines.forEach(line => line.setEnabled(false));
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示指定模型的放置区域
|
||||
*/
|
||||
showDropZonesForModel(modelName: string): void {
|
||||
this.dropZones
|
||||
.filter(zone => zone.name.includes(`dropZone_${modelName}_`))
|
||||
.forEach(zone => zone.setEnabled(true));
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏指定模型的放置区域
|
||||
*/
|
||||
hideDropZonesForModel(modelName: string): void {
|
||||
this.dropZones
|
||||
.filter(zone => zone.name.includes(`dropZone_${modelName}_`))
|
||||
.forEach(zone => zone.setEnabled(false));
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查某个位置是否在放置区域内
|
||||
* @param position 要检查的位置
|
||||
* @returns 如果在放置区域内，返回该区域的配置信息，否则返回 null
|
||||
*/
|
||||
checkInDropZone(position: Vector3): { zone: Mesh; config: any } | null {
|
||||
for (const zone of this.dropZones) {
|
||||
if (!zone.isEnabled()) continue;
|
||||
|
||||
// 简单的距离检测
|
||||
const distance = Vector3.Distance(
|
||||
new Vector3(position.x, 0, position.z),
|
||||
new Vector3(zone.position.x, 0, zone.position.z)
|
||||
);
|
||||
|
||||
// 获取区域的宽度（从 scaling 或原始尺寸计算）
|
||||
const zoneBounds = zone.getBoundingInfo();
|
||||
const zoneSize = zoneBounds.boundingBox.extendSize;
|
||||
const maxDistance = Math.max(zoneSize.x, zoneSize.z);
|
||||
|
||||
if (distance < maxDistance) {
|
||||
// 找到对应的配置
|
||||
const modelName = zone.name.split('_')[1];
|
||||
const configs = this.dropZoneConfigs.get(modelName);
|
||||
const configIndex = parseInt(zone.name.split('_').pop() || '0');
|
||||
const config = configs ? configs.find(c => c.index === configIndex) : null;
|
||||
|
||||
return { zone, config };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 高亮某个放置区域（鼠标悬停效果）
|
||||
*/
|
||||
highlightDropZone(zone: Mesh): void {
|
||||
const material = zone.material as StandardMaterial;
|
||||
if (material) {
|
||||
material.alpha = 0.6; // 增加透明度
|
||||
material.emissiveColor = new Color3(0.2, 0.2, 0.2); // 添加发光效果
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消高亮
|
||||
*/
|
||||
unhighlightDropZone(zone: Mesh): void {
|
||||
const material = zone.material as StandardMaterial;
|
||||
if (material) {
|
||||
material.alpha = 0.3; // 恢复透明度
|
||||
material.emissiveColor = new Color3(0, 0, 0); // 移除发光效果
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有放置区域
|
||||
*/
|
||||
clearAllDropZones(): void {
|
||||
this.dropZones.forEach(zone => {
|
||||
zone.dispose();
|
||||
});
|
||||
this.dropZones = [];
|
||||
this.dropZoneConfigs.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除指定模型的放置区域
|
||||
*/
|
||||
clearDropZonesForModel(modelName: string): void {
|
||||
const zonesToRemove = this.dropZones.filter(zone =>
|
||||
zone.name.includes(`dropZone_${modelName}_`)
|
||||
);
|
||||
|
||||
zonesToRemove.forEach(zone => {
|
||||
zone.dispose();
|
||||
const index = this.dropZones.indexOf(zone);
|
||||
if (index > -1) {
|
||||
this.dropZones.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
this.dropZoneConfigs.delete(modelName);
|
||||
generateDropZones(config: DropZoneConfig): PlacementZoneInfo[] {
|
||||
return this.placementWall.generatePlacementAreas(config);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有放置区域
|
||||
*/
|
||||
getAllDropZones(): Mesh[] {
|
||||
return this.dropZones;
|
||||
getPlacementZones(): PlacementZoneInfo[] {
|
||||
return this.placementWall.getPlacementZones();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定模型的放置区域配置
|
||||
* 根据墙面名称获取放置区域
|
||||
*/
|
||||
getDropZoneConfigsForModel(modelName: string): any[] {
|
||||
return this.dropZoneConfigs.get(modelName) || [];
|
||||
getZonesByWall(wallName: string): PlacementZoneInfo[] {
|
||||
return this.placementWall.getZonesByWall(wallName);
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示模型的包围盒
|
||||
* @param modelName 模型名称
|
||||
* @param color 包围盒颜色
|
||||
* 根据索引获取特定放置区域
|
||||
*/
|
||||
private showBoundingBox(modelName: string, color: string = '#ff0000'): void {
|
||||
// 查找目标模型
|
||||
let targetMeshes: AbstractMesh[] | undefined;
|
||||
|
||||
const mainApp = (this.scene as any).mainApp;
|
||||
if (mainApp?.appModel) {
|
||||
targetMeshes = mainApp.appModel.getCachedMeshes(modelName);
|
||||
}
|
||||
|
||||
if (!targetMeshes || targetMeshes.length === 0) {
|
||||
const mesh = this.scene.getMeshByName(modelName);
|
||||
if (mesh) {
|
||||
targetMeshes = [mesh];
|
||||
}
|
||||
}
|
||||
|
||||
if (!targetMeshes || targetMeshes.length === 0) {
|
||||
console.warn(`模型 ${modelName} 不存在`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 计算总包围盒（使用世界坐标）
|
||||
let minX = Infinity, minY = Infinity, minZ = Infinity;
|
||||
let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
|
||||
|
||||
targetMeshes.forEach(mesh => {
|
||||
// 强制更新世界矩阵
|
||||
mesh.computeWorldMatrix(true);
|
||||
const boundingInfo = mesh.getBoundingInfo();
|
||||
|
||||
// 获取世界空间的包围盒
|
||||
const worldMin = boundingInfo.boundingBox.minimumWorld;
|
||||
const worldMax = boundingInfo.boundingBox.maximumWorld;
|
||||
|
||||
minX = Math.min(minX, worldMin.x);
|
||||
minY = Math.min(minY, worldMin.y);
|
||||
minZ = Math.min(minZ, worldMin.z);
|
||||
maxX = Math.max(maxX, worldMax.x);
|
||||
maxY = Math.max(maxY, worldMax.y);
|
||||
maxZ = Math.max(maxZ, worldMax.z);
|
||||
});
|
||||
|
||||
// 创建包围盒的8个顶点
|
||||
const corners = [
|
||||
new Vector3(minX, minY, minZ),
|
||||
new Vector3(maxX, minY, minZ),
|
||||
new Vector3(maxX, minY, maxZ),
|
||||
new Vector3(minX, minY, maxZ),
|
||||
new Vector3(minX, maxY, minZ),
|
||||
new Vector3(maxX, maxY, minZ),
|
||||
new Vector3(maxX, maxY, maxZ),
|
||||
new Vector3(minX, maxY, maxZ)
|
||||
];
|
||||
|
||||
// 创建12条边
|
||||
const edges = [
|
||||
// 底面4条边
|
||||
[corners[0], corners[1]],
|
||||
[corners[1], corners[2]],
|
||||
[corners[2], corners[3]],
|
||||
[corners[3], corners[0]],
|
||||
// 顶面4条边
|
||||
[corners[4], corners[5]],
|
||||
[corners[5], corners[6]],
|
||||
[corners[6], corners[7]],
|
||||
[corners[7], corners[4]],
|
||||
// 4条竖边
|
||||
[corners[0], corners[4]],
|
||||
[corners[1], corners[5]],
|
||||
[corners[2], corners[6]],
|
||||
[corners[3], corners[7]]
|
||||
];
|
||||
|
||||
const rgb = this.hexToRgb(color);
|
||||
const lineColor = new Color3(rgb.r, rgb.g, rgb.b);
|
||||
|
||||
edges.forEach((edge, index) => {
|
||||
const line = MeshBuilder.CreateLines(`boundingBox_${modelName}_${index}`, {
|
||||
points: edge
|
||||
}, this.scene);
|
||||
line.color = lineColor;
|
||||
this.boundingBoxLines.push(line);
|
||||
});
|
||||
getZone(wallName: string, index: number): PlacementZoneInfo | undefined {
|
||||
return this.placementWall.getZone(wallName, index);
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏所有包围盒
|
||||
* 显示所有放置区域
|
||||
*/
|
||||
private hideBoundingBox(): void {
|
||||
this.boundingBoxLines.forEach(line => line.dispose());
|
||||
this.boundingBoxLines = [];
|
||||
show(): void {
|
||||
this.placementWall.show();
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏所有放置区域
|
||||
*/
|
||||
hide(): void {
|
||||
this.placementWall.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有放置区域
|
||||
*/
|
||||
clearAll(): void {
|
||||
this.placementWall.clearAll();
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
dispose(): void {
|
||||
this.placementWall.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
331
src/babylonjs/AppPlacementWall.ts
Normal file
331
src/babylonjs/AppPlacementWall.ts
Normal file
@ -0,0 +1,331 @@
|
||||
import { Scene, Mesh, MeshBuilder, StandardMaterial, Color3, Vector3 } from '@babylonjs/core';
|
||||
|
||||
/**
|
||||
* 墙面配置 - 定义一个垂直面的起始和结束坐标
|
||||
*/
|
||||
export interface WallConfig {
|
||||
name: string; // 墙面名称（如 "front", "back", "left", "right"）
|
||||
startPoint: Vector3; // 起始点坐标（左下角）
|
||||
endPoint: Vector3; // 结束点坐标（右下角）
|
||||
height: number; // 墙面高度
|
||||
divisions: number; // 分割数（将这个面分成几块）
|
||||
}
|
||||
|
||||
/**
|
||||
* 放置区域配置
|
||||
*/
|
||||
export interface PlacementAreaConfig {
|
||||
walls: WallConfig[]; // 墙面数组（可以定义1-N个面）
|
||||
color?: string; // 颜色（十六进制）
|
||||
alpha?: number; // 透明度
|
||||
thickness?: number; // 厚度
|
||||
showBorder?: boolean; // 是否显示边框
|
||||
borderColor?: string; // 边框颜色
|
||||
}
|
||||
|
||||
/**
|
||||
* 单个放置区域的信息
|
||||
*/
|
||||
export interface PlacementZoneInfo {
|
||||
mesh: Mesh; // 放置区域的网格
|
||||
wallName: string; // 所属墙面名称
|
||||
index: number; // 在该墙面上的索引
|
||||
center: Vector3; // 中心点坐标
|
||||
width: number; // 宽度
|
||||
height: number; // 高度
|
||||
normal: Vector3; // 法线方向
|
||||
}
|
||||
|
||||
export class AppPlacementWall {
|
||||
private scene: Scene;
|
||||
private placementZones: PlacementZoneInfo[] = [];
|
||||
private borderLines: Mesh[] = [];
|
||||
|
||||
constructor(scene: Scene) {
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据墙面配置生成放置区域
|
||||
*/
|
||||
generatePlacementAreas(config: PlacementAreaConfig): PlacementZoneInfo[] {
|
||||
const {
|
||||
walls,
|
||||
color = '#21c7ff',
|
||||
alpha = 0.3,
|
||||
thickness = 2,
|
||||
showBorder = true,
|
||||
borderColor = '#ffffff'
|
||||
} = config;
|
||||
|
||||
// 清除之前的放置区域
|
||||
this.clearAll();
|
||||
|
||||
const material = this.createMaterial(color, alpha);
|
||||
|
||||
walls.forEach(wall => {
|
||||
const zones = this.generateWallZones(wall, material, thickness);
|
||||
this.placementZones.push(...zones);
|
||||
|
||||
if (showBorder) {
|
||||
this.createWallBorder(wall, borderColor);
|
||||
}
|
||||
});
|
||||
|
||||
return this.placementZones;
|
||||
}
|
||||
|
||||
/**
|
||||
* 为单个墙面生成放置区域
|
||||
*/
|
||||
private generateWallZones(
|
||||
wall: WallConfig,
|
||||
material: StandardMaterial,
|
||||
thickness: number
|
||||
): PlacementZoneInfo[] {
|
||||
const { name, startPoint, endPoint, height, divisions } = wall;
|
||||
|
||||
// 计算墙面的方向向量和长度
|
||||
const direction = endPoint.subtract(startPoint);
|
||||
const wallLength = direction.length();
|
||||
const normalizedDir = direction.normalize();
|
||||
|
||||
// 计算每块的宽度
|
||||
const blockWidth = wallLength / divisions;
|
||||
|
||||
// 计算墙面的法线方向（垂直于墙面，指向外侧）
|
||||
const normal = new Vector3(-normalizedDir.z, 0, normalizedDir.x);
|
||||
|
||||
const zones: PlacementZoneInfo[] = [];
|
||||
|
||||
for (let i = 0; i < divisions; i++) {
|
||||
// 计算当前块的中心位置
|
||||
const offset = blockWidth * (i + 0.5);
|
||||
const centerX = startPoint.x + normalizedDir.x * offset;
|
||||
const centerY = startPoint.y + height / 2;
|
||||
const centerZ = startPoint.z + normalizedDir.z * offset;
|
||||
const center = new Vector3(centerX, centerY, centerZ);
|
||||
|
||||
// 创建放置区域平面
|
||||
const plane = MeshBuilder.CreatePlane(
|
||||
`placement_${name}_${i}`,
|
||||
{ width: blockWidth, height: height },
|
||||
this.scene
|
||||
);
|
||||
|
||||
plane.position = center;
|
||||
plane.material = material;
|
||||
|
||||
// 让平面面向法线方向（垂直站立并朝外）
|
||||
// 使用 lookAt 让平面面向外侧
|
||||
const targetPoint = center.add(normal);
|
||||
plane.lookAt(targetPoint);
|
||||
|
||||
// 设置厚度（通过缩放Z轴）
|
||||
plane.scaling.z = thickness;
|
||||
|
||||
// 启用拾取
|
||||
plane.isPickable = true;
|
||||
|
||||
// 为每个块创建边框
|
||||
this.createBlockBorder(name, i, center, blockWidth, height, normalizedDir, normal);
|
||||
|
||||
zones.push({
|
||||
mesh: plane,
|
||||
wallName: name,
|
||||
index: i,
|
||||
center: center.clone(),
|
||||
width: blockWidth,
|
||||
height: height,
|
||||
normal: normal.clone()
|
||||
});
|
||||
}
|
||||
|
||||
return zones;
|
||||
}
|
||||
|
||||
/**
|
||||
* 为单个块创建边框
|
||||
*/
|
||||
private createBlockBorder(
|
||||
wallName: string,
|
||||
index: number,
|
||||
center: Vector3,
|
||||
width: number,
|
||||
height: number,
|
||||
direction: Vector3,
|
||||
normal: Vector3
|
||||
): void {
|
||||
const halfWidth = width / 2;
|
||||
const halfHeight = height / 2;
|
||||
|
||||
// 计算四个角点
|
||||
const bottomLeft = new Vector3(
|
||||
center.x - direction.x * halfWidth,
|
||||
center.y - halfHeight,
|
||||
center.z - direction.z * halfWidth
|
||||
);
|
||||
const bottomRight = new Vector3(
|
||||
center.x + direction.x * halfWidth,
|
||||
center.y - halfHeight,
|
||||
center.z + direction.z * halfWidth
|
||||
);
|
||||
const topLeft = new Vector3(
|
||||
center.x - direction.x * halfWidth,
|
||||
center.y + halfHeight,
|
||||
center.z - direction.z * halfWidth
|
||||
);
|
||||
const topRight = new Vector3(
|
||||
center.x + direction.x * halfWidth,
|
||||
center.y + halfHeight,
|
||||
center.z + direction.z * halfWidth
|
||||
);
|
||||
|
||||
// 创建四条边
|
||||
const edges = [
|
||||
[bottomLeft, bottomRight], // 底边
|
||||
[bottomRight, topRight], // 右边
|
||||
[topRight, topLeft], // 顶边
|
||||
[topLeft, bottomLeft] // 左边
|
||||
];
|
||||
|
||||
edges.forEach((edge, edgeIndex) => {
|
||||
const line = MeshBuilder.CreateLines(
|
||||
`block_border_${wallName}_${index}_${edgeIndex}`,
|
||||
{ points: edge },
|
||||
this.scene
|
||||
);
|
||||
line.color = new Color3(1, 1, 1); // 白色
|
||||
this.borderLines.push(line);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建墙面边框
|
||||
*/
|
||||
private createWallBorder(wall: WallConfig, color: string): void {
|
||||
const { name, startPoint, endPoint, height } = wall;
|
||||
|
||||
// 计算四个角点
|
||||
const bottomLeft = startPoint.clone();
|
||||
const bottomRight = endPoint.clone();
|
||||
const topLeft = new Vector3(startPoint.x, startPoint.y + height, startPoint.z);
|
||||
const topRight = new Vector3(endPoint.x, endPoint.y + height, endPoint.z);
|
||||
|
||||
// 创建四条边
|
||||
const edges = [
|
||||
[bottomLeft, bottomRight], // 底边
|
||||
[bottomRight, topRight], // 右边
|
||||
[topRight, topLeft], // 顶边
|
||||
[topLeft, bottomLeft] // 左边
|
||||
];
|
||||
|
||||
const rgb = this.hexToRgb(color);
|
||||
const lineColor = new Color3(rgb.r, rgb.g, rgb.b);
|
||||
|
||||
edges.forEach((edge, index) => {
|
||||
const line = MeshBuilder.CreateLines(
|
||||
`border_${name}_${index}`,
|
||||
{ points: edge },
|
||||
this.scene
|
||||
);
|
||||
line.color = lineColor;
|
||||
this.borderLines.push(line);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建材质
|
||||
*/
|
||||
private createMaterial(color: string, alpha: number): StandardMaterial {
|
||||
const material = new StandardMaterial('placementMaterial', this.scene);
|
||||
const rgb = this.hexToRgb(color);
|
||||
material.diffuseColor = new Color3(rgb.r, rgb.g, rgb.b);
|
||||
material.alpha = alpha;
|
||||
material.backFaceCulling = false;
|
||||
return material;
|
||||
}
|
||||
|
||||
/**
|
||||
* 十六进制颜色转RGB
|
||||
*/
|
||||
private hexToRgb(hex: string): { r: number; g: number; b: number } {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16) / 255,
|
||||
g: parseInt(result[2], 16) / 255,
|
||||
b: parseInt(result[3], 16) / 255
|
||||
}
|
||||
: { r: 0, g: 0, b: 0 };
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有放置区域
|
||||
*/
|
||||
getPlacementZones(): PlacementZoneInfo[] {
|
||||
return this.placementZones;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据墙面名称获取放置区域
|
||||
*/
|
||||
getZonesByWall(wallName: string): PlacementZoneInfo[] {
|
||||
return this.placementZones.filter(zone => zone.wallName === wallName);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据索引获取特定放置区域
|
||||
*/
|
||||
getZone(wallName: string, index: number): PlacementZoneInfo | undefined {
|
||||
return this.placementZones.find(
|
||||
zone => zone.wallName === wallName && zone.index === index
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示所有放置区域
|
||||
*/
|
||||
show(): void {
|
||||
this.placementZones.forEach(zone => {
|
||||
zone.mesh.isVisible = true;
|
||||
});
|
||||
this.borderLines.forEach(line => {
|
||||
line.isVisible = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏所有放置区域
|
||||
*/
|
||||
hide(): void {
|
||||
this.placementZones.forEach(zone => {
|
||||
zone.mesh.isVisible = false;
|
||||
});
|
||||
this.borderLines.forEach(line => {
|
||||
line.isVisible = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有放置区域
|
||||
*/
|
||||
clearAll(): void {
|
||||
this.placementZones.forEach(zone => {
|
||||
zone.mesh.dispose();
|
||||
});
|
||||
this.placementZones = [];
|
||||
|
||||
this.borderLines.forEach(line => {
|
||||
line.dispose();
|
||||
});
|
||||
this.borderLines = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
dispose(): void {
|
||||
this.clearAll();
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
import { Vector3 } from '@babylonjs/core';
|
||||
import { MainApp } from '../babylonjs/MainApp';
|
||||
import type { HotspotInput } from '../types/hotspot';
|
||||
|
||||
@ -218,71 +219,145 @@ export class KernelAdapter {
|
||||
/** 放置区域管理 */
|
||||
dropZone = {
|
||||
/**
|
||||
* 根据模型包围盒生成四周的放置区域
|
||||
* 生成放置区域
|
||||
* @param options 配置选项
|
||||
* @example
|
||||
* kernel.dropZone.generate({
|
||||
* modelName: "框架",
|
||||
* divisions: 4,
|
||||
* walls: [
|
||||
* {
|
||||
* name: 'front',
|
||||
* startPoint: new Vector3(-50, 0, -50),
|
||||
* endPoint: new Vector3(50, 0, -50),
|
||||
* height: 30,
|
||||
* divisions: 5
|
||||
* }
|
||||
* ],
|
||||
* color: "#21c7ff",
|
||||
* alpha: 0.3,
|
||||
* scale: 0.8 // 缩小到80%，用于内部放置区域
|
||||
* alpha: 0.3
|
||||
* });
|
||||
*/
|
||||
generate: (options: {
|
||||
modelName: string;
|
||||
divisions: number;
|
||||
walls: Array<{
|
||||
name: string;
|
||||
startPoint: [number, number, number];
|
||||
endPoint: [number, number, number];
|
||||
height: number;
|
||||
divisions: number;
|
||||
}>;
|
||||
color?: string;
|
||||
alpha?: number;
|
||||
thickness?: number;
|
||||
offset?: number;
|
||||
scale?: number;
|
||||
showBorder?: boolean;
|
||||
borderColor?: string;
|
||||
}): any[] => {
|
||||
return this.mainApp.appDropZone.generateDropZones(options);
|
||||
|
||||
// 转换数组坐标为 Vector3
|
||||
const config = {
|
||||
...options,
|
||||
walls: options.walls.map(wall => ({
|
||||
...wall,
|
||||
startPoint: new Vector3(wall.startPoint[0], wall.startPoint[1], wall.startPoint[2]),
|
||||
endPoint: new Vector3(wall.endPoint[0], wall.endPoint[1], wall.endPoint[2])
|
||||
}))
|
||||
};
|
||||
|
||||
return this.mainApp.appDropZone.generateDropZones(config);
|
||||
},
|
||||
/**
|
||||
* 显示所有放置区域
|
||||
*/
|
||||
showAll: (): void => {
|
||||
this.mainApp.appDropZone.showAllDropZones();
|
||||
this.mainApp.appDropZone.show();
|
||||
},
|
||||
/**
|
||||
* 隐藏所有放置区域
|
||||
*/
|
||||
hideAll: (): void => {
|
||||
this.mainApp.appDropZone.hideAllDropZones();
|
||||
this.mainApp.appDropZone.hide();
|
||||
},
|
||||
/**
|
||||
* 显示指定模型的放置区域
|
||||
* 根据墙面名称显示放置区域
|
||||
*/
|
||||
show: (modelName: string): void => {
|
||||
this.mainApp.appDropZone.showDropZonesForModel(modelName);
|
||||
show: (wallName: string): void => {
|
||||
const zones = this.mainApp.appDropZone.getZonesByWall(wallName);
|
||||
zones.forEach(zone => {
|
||||
zone.mesh.isVisible = true;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 隐藏指定模型的放置区域
|
||||
* 根据墙面名称隐藏放置区域
|
||||
*/
|
||||
hide: (modelName: string): void => {
|
||||
this.mainApp.appDropZone.hideDropZonesForModel(modelName);
|
||||
hide: (wallName: string): void => {
|
||||
const zones = this.mainApp.appDropZone.getZonesByWall(wallName);
|
||||
zones.forEach(zone => {
|
||||
zone.mesh.isVisible = false;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 清除所有放置区域
|
||||
*/
|
||||
clearAll: (): void => {
|
||||
this.mainApp.appDropZone.clearAllDropZones();
|
||||
this.mainApp.appDropZone.clearAll();
|
||||
},
|
||||
/**
|
||||
* 清除指定模型的放置区域
|
||||
* 获取所有放置区域
|
||||
*/
|
||||
clear: (modelName: string): void => {
|
||||
this.mainApp.appDropZone.clearDropZonesForModel(modelName);
|
||||
getAll: (): any[] => {
|
||||
return this.mainApp.appDropZone.getPlacementZones();
|
||||
},
|
||||
/**
|
||||
* 根据墙面名称获取放置区域
|
||||
*/
|
||||
getByWall: (wallName: string): any[] => {
|
||||
return this.mainApp.appDropZone.getZonesByWall(wallName);
|
||||
},
|
||||
/**
|
||||
* 获取特定的放置区域
|
||||
*/
|
||||
getZone: (wallName: string, index: number): any => {
|
||||
return this.mainApp.appDropZone.getZone(wallName, index);
|
||||
},
|
||||
/**
|
||||
* 检查某个位置是否在放置区域内
|
||||
*/
|
||||
checkPosition: (position: [number, number, number]): any => {
|
||||
const { Vector3 } = require('@babylonjs/core');
|
||||
|
||||
const pos = new Vector3(position[0], position[1], position[2]);
|
||||
return this.mainApp.appDropZone.checkInDropZone(pos);
|
||||
|
||||
const zones = this.mainApp.appDropZone.getPlacementZones();
|
||||
|
||||
for (const zone of zones) {
|
||||
const halfWidth = zone.width / 2;
|
||||
const halfHeight = zone.height / 2;
|
||||
|
||||
const localPos = pos.subtract(zone.center);
|
||||
const distance = Math.abs(
|
||||
localPos.x * zone.normal.x +
|
||||
localPos.z * zone.normal.z
|
||||
);
|
||||
|
||||
// 检查是否在平面附近
|
||||
if (distance < 5) {
|
||||
const alongWidth = Math.abs(localPos.x * (1 - Math.abs(zone.normal.x)) +
|
||||
localPos.z * (1 - Math.abs(zone.normal.z)));
|
||||
const alongHeight = Math.abs(localPos.y);
|
||||
|
||||
if (alongWidth <= halfWidth && alongHeight <= halfHeight) {
|
||||
return {
|
||||
inZone: true,
|
||||
zone: zone,
|
||||
wallName: zone.wallName,
|
||||
index: zone.index,
|
||||
center: zone.center
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
inZone: false,
|
||||
zone: null
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user