640 lines
20 KiB
JavaScript
640 lines
20 KiB
JavaScript
class Viewer3D {
|
|
constructor(containerId, onSelectCallback, onSelectRebarCallback) {
|
|
this.container = document.getElementById(containerId);
|
|
this.onSelect = onSelectCallback;
|
|
this.onSelectRebar = onSelectRebarCallback;
|
|
this.meshes = {};
|
|
this.rebarMeshes = [];
|
|
this.rebarGroupRoot = null;
|
|
this.sectionMarkers = [];
|
|
this.labelSprites = [];
|
|
this.rebarLabelSprites = [];
|
|
this.displayMode = 'solid'; // 'solid', 'wireframe', 'transparent'
|
|
this.stepMode = 2; // 2: Exterior only, 3: Exterior (ghosted) + 3D Rebars
|
|
this.selectedObjectId = null;
|
|
this.selectedRebarMark = null;
|
|
this.concreteOpacity = 0.25;
|
|
this.rebarScale = 1.4;
|
|
|
|
this.rebarFilters = {
|
|
wingwall: 'ALL', // 'ALL', 'WW_END_LEFT', 'WW_END_RIGHT'
|
|
zones: new Set([
|
|
'우각부 보강근 (암거접합부)',
|
|
'벽체 전면 철근',
|
|
'벽체 배면 철근',
|
|
'저판 상면 철근',
|
|
'저판 하면 철근',
|
|
'헌치 및 전단보강근'
|
|
]),
|
|
dias: new Set(['H19', 'H16', 'H13']),
|
|
marks: new Set() // populated on load
|
|
};
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
const width = this.container.clientWidth || 800;
|
|
const height = this.container.clientHeight || 600;
|
|
|
|
// Scene
|
|
this.scene = new THREE.Scene();
|
|
this.scene.background = new THREE.Color(0x0e1118);
|
|
|
|
// Camera (Z is up)
|
|
this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
|
|
this.camera.up.set(0, 0, 1);
|
|
this.camera.position.set(35, 20, 50);
|
|
|
|
// Renderer
|
|
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
this.renderer.setSize(width, height);
|
|
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
this.renderer.shadowMap.enabled = true;
|
|
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
this.container.appendChild(this.renderer.domElement);
|
|
|
|
// Controls
|
|
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
|
|
this.controls.enableDamping = true;
|
|
this.controls.dampingFactor = 0.05;
|
|
this.controls.target.set(16, 41, 35);
|
|
|
|
// Lights
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.70);
|
|
this.scene.add(ambientLight);
|
|
|
|
const dirLight1 = new THREE.DirectionalLight(0xffffff, 0.85);
|
|
dirLight1.position.set(30, -20, 60);
|
|
dirLight1.castShadow = true;
|
|
dirLight1.shadow.mapSize.width = 2048;
|
|
dirLight1.shadow.mapSize.height = 2048;
|
|
this.scene.add(dirLight1);
|
|
|
|
const dirLight2 = new THREE.DirectionalLight(0x93c5fd, 0.40);
|
|
dirLight2.position.set(-20, 30, 40);
|
|
this.scene.add(dirLight2);
|
|
|
|
this.rebarGroupRoot = new THREE.Group();
|
|
this.scene.add(this.rebarGroupRoot);
|
|
|
|
// Ground Grid & Axes
|
|
this.setupGridAndAxes();
|
|
|
|
// Raycaster for object & rebar picking
|
|
this.raycaster = new THREE.Raycaster();
|
|
this.mouse = new THREE.Vector2();
|
|
|
|
this.renderer.domElement.addEventListener('pointerdown', (e) => this.onPointerDown(e));
|
|
window.addEventListener('resize', () => this.onWindowResize());
|
|
|
|
this.animate();
|
|
}
|
|
|
|
setupGridAndAxes() {
|
|
this.gridHelper = new THREE.GridHelper(50, 50, 0x3b82f6, 0x1e293b);
|
|
this.gridHelper.rotation.x = Math.PI / 2;
|
|
this.gridHelper.position.set(16, 41, 33.0);
|
|
this.scene.add(this.gridHelper);
|
|
|
|
this.axesGroup = new THREE.Group();
|
|
this.axesGroup.position.set(5, 30, 33.0);
|
|
const axes = new THREE.AxesHelper(5);
|
|
this.axesGroup.add(axes);
|
|
this.scene.add(this.axesGroup);
|
|
}
|
|
|
|
loadModel(modelData) {
|
|
this.modelData = modelData;
|
|
|
|
// Clear previous concrete meshes
|
|
for (const key in this.meshes) {
|
|
this.scene.remove(this.meshes[key].group);
|
|
}
|
|
this.meshes = {};
|
|
this.clearSectionMarkers();
|
|
|
|
const objects = modelData.objects || {};
|
|
const botEl = objects.culvert?.dimensions?.bot_el ?? 33.404;
|
|
if (this.gridHelper) this.gridHelper.position.set(16, 41, botEl - 0.35);
|
|
if (this.axesGroup) this.axesGroup.position.set(5, 30, botEl - 0.35);
|
|
|
|
const colorMap = {
|
|
'CULVERT': { base: 0xa1a1aa, edge: 0x52525b },
|
|
'WW_END_LEFT': { base: 0x38bdf8, edge: 0x0284c7 },
|
|
'WW_END_RIGHT': { base: 0xfbbf24, edge: 0xd97706 },
|
|
'WW_START_LEFT': { base: 0x34d399, edge: 0x059669 },
|
|
'WW_START_RIGHT': { base: 0xa78bfa, edge: 0x7c3aed },
|
|
'culvert': { base: 0xa1a1aa, edge: 0x52525b },
|
|
'ww_left': { base: 0x38bdf8, edge: 0x0284c7 },
|
|
'ww_right': { base: 0xfbbf24, edge: 0xd97706 }
|
|
};
|
|
|
|
const renderedIds = new Set();
|
|
const candidateList = [];
|
|
|
|
if (objects.culvert) candidateList.push(objects.culvert);
|
|
if (Array.isArray(objects.wingwalls)) {
|
|
candidateList.push(...objects.wingwalls);
|
|
} else {
|
|
for (const k in objects) {
|
|
const o = objects[k];
|
|
if (o && o.vertices && o.faces && o.id) {
|
|
candidateList.push(o);
|
|
}
|
|
}
|
|
}
|
|
|
|
for (const obj of candidateList) {
|
|
if (!obj || !obj.vertices || !obj.faces || renderedIds.has(obj.id)) continue;
|
|
renderedIds.add(obj.id);
|
|
|
|
const col = colorMap[obj.id] || colorMap[obj.name] || { base: 0x94a3b8, edge: 0x475569 };
|
|
const meshGroup = this.createMeshGroup(obj, col);
|
|
this.scene.add(meshGroup);
|
|
this.meshes[obj.id] = {
|
|
group: meshGroup,
|
|
data: obj,
|
|
baseColor: col.base,
|
|
edgeColor: col.edge
|
|
};
|
|
}
|
|
|
|
// Add Section Cut Markers & EL Labels
|
|
this.addSectionMarkers(objects);
|
|
this.addAnnotations(objects);
|
|
|
|
// Load 3D Rebars if present
|
|
if (modelData.rebars) {
|
|
this.buildRebarMeshes(modelData.rebars);
|
|
}
|
|
|
|
this.applyStepVisualState();
|
|
this.fitView();
|
|
}
|
|
|
|
createMeshGroup(obj, col) {
|
|
const group = new THREE.Group();
|
|
group.userData = { id: obj.id, name: obj.name };
|
|
|
|
const geom = new THREE.BufferGeometry();
|
|
const vertices = new Float32Array(obj.vertices.flat());
|
|
const indices = [];
|
|
for (const f of obj.faces) {
|
|
indices.push(f[0], f[1], f[2]);
|
|
}
|
|
|
|
geom.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
|
geom.setIndex(indices);
|
|
geom.computeVertexNormals();
|
|
|
|
const isCulvert = (obj.id === 'CULVERT');
|
|
const mat = new THREE.MeshStandardMaterial({
|
|
color: col.base,
|
|
roughness: 0.6,
|
|
metalness: 0.1,
|
|
side: isCulvert ? THREE.DoubleSide : THREE.FrontSide,
|
|
polygonOffset: true,
|
|
polygonOffsetFactor: 1,
|
|
polygonOffsetUnits: 1
|
|
});
|
|
|
|
const mesh = new THREE.Mesh(geom, mat);
|
|
mesh.castShadow = true;
|
|
mesh.receiveShadow = true;
|
|
mesh.userData = { id: obj.id, parentGroup: group };
|
|
group.add(mesh);
|
|
|
|
const edgesGeom = new THREE.EdgesGeometry(geom, 25);
|
|
const edgesMat = new THREE.LineBasicMaterial({ color: col.edge, linewidth: 1.5 });
|
|
const edgeLines = new THREE.LineSegments(edgesGeom, edgesMat);
|
|
group.add(edgeLines);
|
|
|
|
group.userData.mesh = mesh;
|
|
group.userData.edgeLines = edgeLines;
|
|
group.userData.mat = mat;
|
|
group.userData.edgesMat = edgesMat;
|
|
|
|
return group;
|
|
}
|
|
|
|
buildRebarMeshes(rebarData) {
|
|
// Clear existing rebar meshes
|
|
while (this.rebarGroupRoot.children.length > 0) {
|
|
const child = this.rebarGroupRoot.children[0];
|
|
this.rebarGroupRoot.remove(child);
|
|
}
|
|
this.rebarMeshes = [];
|
|
this.clearRebarLabels();
|
|
|
|
const diaColors = {
|
|
'H19': 0xf43f5e, // Rose Red
|
|
'H16': 0x38bdf8, // Sky Blue
|
|
'H13': 0x10b981 // Emerald Green
|
|
};
|
|
|
|
this.rebarFilters.marks.clear();
|
|
const unitCylGeom = new THREE.CylinderGeometry(1, 1, 1, 7, 1, false);
|
|
const sphereGeom = new THREE.SphereGeometry(1.05, 6, 6);
|
|
const yAxis = new THREE.Vector3(0, 1, 0);
|
|
|
|
for (const [wwId, ww] of Object.entries(rebarData.wingwalls || {})) {
|
|
for (const grp of ww.groups || []) {
|
|
this.rebarFilters.marks.add(grp.mark);
|
|
|
|
const baseColor = diaColors[grp.dia] || 0xeab308;
|
|
const mat = new THREE.MeshStandardMaterial({
|
|
color: baseColor,
|
|
roughness: 0.35,
|
|
metalness: 0.45
|
|
});
|
|
|
|
const groupContainer = new THREE.Group();
|
|
groupContainer.userData = {
|
|
isRebarGroup: true,
|
|
wingwallId: wwId,
|
|
mark: grp.mark,
|
|
dia: grp.dia,
|
|
zone: grp.zone,
|
|
baseColor: baseColor,
|
|
mat: mat,
|
|
groupData: grp
|
|
};
|
|
|
|
const radiusMeters = (grp.dia_mm / 2000.0) * this.rebarScale;
|
|
|
|
for (const poly of grp.polylines || []) {
|
|
for (let i = 0; i < poly.length - 1; i++) {
|
|
const p1 = new THREE.Vector3(poly[i][0], poly[i][1], poly[i][2]);
|
|
const p2 = new THREE.Vector3(poly[i + 1][0], poly[i + 1][1], poly[i + 1][2]);
|
|
const dir = new THREE.Vector3().subVectors(p2, p1);
|
|
const len = dir.length();
|
|
if (len < 1e-4) continue;
|
|
|
|
const mid = new THREE.Vector3().addVectors(p1, p2).multiplyScalar(0.5);
|
|
const segMesh = new THREE.Mesh(unitCylGeom, mat);
|
|
segMesh.position.copy(mid);
|
|
segMesh.quaternion.setFromUnitVectors(yAxis, dir.clone().normalize());
|
|
segMesh.scale.set(radiusMeters, len, radiusMeters);
|
|
segMesh.userData = {
|
|
isRebar: true,
|
|
mark: grp.mark,
|
|
wingwallId: wwId,
|
|
parentRebarGroup: groupContainer
|
|
};
|
|
groupContainer.add(segMesh);
|
|
|
|
if (i > 0) {
|
|
const joint = new THREE.Mesh(sphereGeom, mat);
|
|
joint.position.copy(p1);
|
|
joint.scale.setScalar(radiusMeters);
|
|
groupContainer.add(joint);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.rebarGroupRoot.add(groupContainer);
|
|
this.rebarMeshes.push(groupContainer);
|
|
}
|
|
}
|
|
|
|
this.updateRebarVisibility();
|
|
}
|
|
|
|
setRebarThicknessScale(scaleVal) {
|
|
this.rebarScale = scaleVal;
|
|
if (this.modelData && this.modelData.rebars) {
|
|
this.buildRebarMeshes(this.modelData.rebars);
|
|
if (this.selectedRebarMark) {
|
|
this.selectRebarMark(this.selectedRebarMark);
|
|
}
|
|
}
|
|
}
|
|
|
|
setConcreteOpacity(opacityVal) {
|
|
this.concreteOpacity = opacityVal;
|
|
if (this.stepMode === 3) {
|
|
this.applyStepVisualState();
|
|
}
|
|
}
|
|
|
|
setStepMode(stepNumber) {
|
|
this.stepMode = stepNumber;
|
|
this.applyStepVisualState();
|
|
}
|
|
|
|
applyStepVisualState() {
|
|
const isStep3 = (this.stepMode === 3);
|
|
|
|
// Show/hide 3D rebar group root
|
|
if (this.rebarGroupRoot) {
|
|
this.rebarGroupRoot.visible = isStep3;
|
|
}
|
|
|
|
// Section markers only in Step 2
|
|
for (const line of this.sectionMarkers) {
|
|
line.visible = !isStep3;
|
|
}
|
|
for (const sp of this.labelSprites) {
|
|
sp.visible = !isStep3;
|
|
}
|
|
for (const sp of this.rebarLabelSprites) {
|
|
sp.visible = isStep3;
|
|
}
|
|
|
|
// Concrete appearance
|
|
for (const id in this.meshes) {
|
|
const m = this.meshes[id];
|
|
const mat = m.group.userData.mat;
|
|
const edgesMat = m.group.userData.edgesMat;
|
|
|
|
if (isStep3) {
|
|
// In Step 3, wingwalls are semi-transparent ghosted shells so internal rebars shine through
|
|
mat.wireframe = false;
|
|
mat.transparent = true;
|
|
mat.depthWrite = false;
|
|
mat.opacity = (id === 'CULVERT') ? Math.min(0.18, this.concreteOpacity * 0.7) : this.concreteOpacity;
|
|
mat.emissive.setHex(0x000000);
|
|
mat.emissiveIntensity = 0;
|
|
if (edgesMat) {
|
|
edgesMat.transparent = true;
|
|
edgesMat.opacity = 0.35;
|
|
}
|
|
} else {
|
|
mat.depthWrite = true;
|
|
if (edgesMat) {
|
|
edgesMat.transparent = false;
|
|
edgesMat.opacity = 1.0;
|
|
}
|
|
this.setDisplayMode(this.displayMode);
|
|
this.selectObject(this.selectedObjectId);
|
|
}
|
|
}
|
|
|
|
if (isStep3) {
|
|
this.updateRebarVisibility();
|
|
}
|
|
}
|
|
|
|
updateRebarVisibility() {
|
|
for (const grpObj of this.rebarMeshes) {
|
|
const u = grpObj.userData;
|
|
const matchWw = (this.rebarFilters.wingwall === 'ALL' || u.wingwallId === this.rebarFilters.wingwall);
|
|
const matchZone = this.rebarFilters.zones.has(u.zone);
|
|
const matchDia = this.rebarFilters.dias.has(u.dia);
|
|
const matchMark = this.rebarFilters.marks.has(u.mark);
|
|
grpObj.visible = matchWw && matchZone && matchDia && matchMark;
|
|
}
|
|
}
|
|
|
|
selectRebarMark(mark) {
|
|
this.selectedRebarMark = mark;
|
|
this.clearRebarLabels();
|
|
|
|
for (const grpObj of this.rebarMeshes) {
|
|
const u = grpObj.userData;
|
|
const mat = u.mat;
|
|
if (u.mark === mark) {
|
|
mat.color.setHex(0xfacc15); // Bright highlight gold
|
|
mat.emissive.setHex(0xf59e0b);
|
|
mat.emissiveIntensity = 0.65;
|
|
|
|
// Add floating 3D callout sprite at midpoint of first bar in group
|
|
const polys = u.groupData.polylines;
|
|
if (polys && polys.length > 0) {
|
|
const midPoly = polys[Math.floor(polys.length / 2)];
|
|
const pt = midPoly[Math.floor(midPoly.length / 2)];
|
|
if (pt) {
|
|
const labelText = `[${u.mark}] ${u.dia} (${u.groupData.role})`;
|
|
const sp = this.createTextSprite(labelText, 0xfacc15);
|
|
sp.position.set(pt[0], pt[1], pt[2] + 0.55);
|
|
this.scene.add(sp);
|
|
this.rebarLabelSprites.push(sp);
|
|
}
|
|
}
|
|
} else {
|
|
mat.color.setHex(u.baseColor);
|
|
mat.emissive.setHex(0x000000);
|
|
mat.emissiveIntensity = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
clearRebarLabels() {
|
|
for (const sp of this.rebarLabelSprites) {
|
|
this.scene.remove(sp);
|
|
}
|
|
this.rebarLabelSprites = [];
|
|
}
|
|
|
|
addSectionMarkers(objects) {
|
|
this.clearSectionMarkers();
|
|
|
|
const sections = [
|
|
{ name: '단면 A-A', pts: objects.ww_left?.sections_3d?.['A-A'], color: 0xef4444 },
|
|
{ name: '단면 B-B', pts: objects.ww_left?.sections_3d?.['B-B'], color: 0xf97316 },
|
|
{ name: '단면 C-C', pts: objects.ww_right?.sections_3d?.['C-C'], color: 0x10b981 },
|
|
{ name: '단면 D-D', pts: objects.ww_right?.sections_3d?.['D-D'], color: 0x8b5cf6 }
|
|
];
|
|
|
|
for (const s of sections) {
|
|
if (!s.pts) continue;
|
|
const points = s.pts.map(p => new THREE.Vector3(p[0], p[1], p[2]));
|
|
points.push(points[0].clone());
|
|
|
|
const geom = new THREE.BufferGeometry().setFromPoints(points);
|
|
const mat = new THREE.LineBasicMaterial({ color: s.color, linewidth: 3 });
|
|
const line = new THREE.Line(geom, mat);
|
|
this.scene.add(line);
|
|
this.sectionMarkers.push(line);
|
|
|
|
const topPt = points[4];
|
|
if (topPt) {
|
|
const sprite = this.createTextSprite(s.name, s.color);
|
|
sprite.position.set(topPt.x, topPt.y, topPt.z + 0.6);
|
|
this.scene.add(sprite);
|
|
this.labelSprites.push(sprite);
|
|
}
|
|
}
|
|
}
|
|
|
|
addAnnotations(objects) {
|
|
const wwL = objects.ww_left;
|
|
const wwR = objects.ww_right;
|
|
if (!wwL || !wwR) return;
|
|
|
|
const ptA = wwL.sections_3d?.['A-A']?.[5] || [15.725, 42.650, wwL.dimensions.top_el_start];
|
|
const ptB = wwL.sections_3d?.['B-B']?.[5] || [18.75, 45.77, wwL.dimensions.top_el_end];
|
|
const ptD = wwR.sections_3d?.['D-D']?.[5] || [21.01, 38.02, wwR.dimensions.top_el_end];
|
|
const stName = this.modelData?.station || '종점부';
|
|
|
|
const elMarkers = [
|
|
{ text: `EL. ${wwL.dimensions.top_el_start.toFixed(3)} (암거 접합부)`, pos: ptA, color: 0x38bdf8 },
|
|
{ text: `EL. ${wwL.dimensions.top_el_end.toFixed(3)} (좌 말단 L=${wwL.dimensions.length}m)`, pos: ptB, color: 0x38bdf8 },
|
|
{ text: `EL. ${wwR.dimensions.top_el_end.toFixed(3)} (우 말단 L=${wwR.dimensions.length}m)`, pos: ptD, color: 0xfbbf24 },
|
|
{ text: `${stName} (종점부)`, pos: [16.0, 41.65, wwL.dimensions.top_el_start + 0.5], color: 0xffffff }
|
|
];
|
|
|
|
for (const m of elMarkers) {
|
|
const sprite = this.createTextSprite(m.text, m.color);
|
|
sprite.position.set(m.pos[0], m.pos[1], m.pos[2] + 0.4);
|
|
this.scene.add(sprite);
|
|
this.labelSprites.push(sprite);
|
|
}
|
|
}
|
|
|
|
createTextSprite(text, colorHex) {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 320;
|
|
canvas.height = 64;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
ctx.fillStyle = 'rgba(18, 21, 28, 0.88)';
|
|
ctx.roundRect ? ctx.roundRect(4, 4, 312, 56, 8) : ctx.fillRect(4, 4, 312, 56);
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#' + new THREE.Color(colorHex).getHexString();
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
|
|
ctx.font = 'bold 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(text, 160, 32);
|
|
|
|
const texture = new THREE.CanvasTexture(canvas);
|
|
texture.minFilter = THREE.LinearFilter;
|
|
const spriteMat = new THREE.SpriteMaterial({ map: texture, depthTest: false });
|
|
const sprite = new THREE.Sprite(spriteMat);
|
|
sprite.scale.set(3.6, 0.75, 1);
|
|
return sprite;
|
|
}
|
|
|
|
clearSectionMarkers() {
|
|
for (const line of this.sectionMarkers) {
|
|
this.scene.remove(line);
|
|
}
|
|
this.sectionMarkers = [];
|
|
|
|
for (const sprite of this.labelSprites) {
|
|
this.scene.remove(sprite);
|
|
}
|
|
this.labelSprites = [];
|
|
}
|
|
|
|
selectObject(objectId) {
|
|
this.selectedObjectId = objectId;
|
|
if (this.stepMode === 3) return;
|
|
for (const id in this.meshes) {
|
|
const m = this.meshes[id];
|
|
const mat = m.group.userData.mat;
|
|
if (id === objectId) {
|
|
mat.emissive = new THREE.Color(0x2563eb);
|
|
mat.emissiveIntensity = 0.45;
|
|
} else {
|
|
mat.emissive = new THREE.Color(0x000000);
|
|
mat.emissiveIntensity = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
toggleObjectVisibility(objectId, visible) {
|
|
if (this.meshes[objectId]) {
|
|
this.meshes[objectId].group.visible = visible;
|
|
}
|
|
}
|
|
|
|
setDisplayMode(mode) {
|
|
this.displayMode = mode;
|
|
for (const id in this.meshes) {
|
|
const mat = this.meshes[id].group.userData.mat;
|
|
if (mode === 'wireframe') {
|
|
mat.wireframe = true;
|
|
mat.transparent = false;
|
|
mat.opacity = 1.0;
|
|
mat.depthWrite = true;
|
|
} else if (mode === 'transparent') {
|
|
mat.wireframe = false;
|
|
mat.transparent = true;
|
|
mat.opacity = 0.35;
|
|
mat.depthWrite = false;
|
|
} else {
|
|
mat.wireframe = false;
|
|
mat.transparent = false;
|
|
mat.opacity = 1.0;
|
|
mat.depthWrite = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
fitView() {
|
|
const box = new THREE.Box3();
|
|
for (const id in this.meshes) {
|
|
box.expandByObject(this.meshes[id].group);
|
|
}
|
|
if (box.isEmpty()) return;
|
|
const center = box.getCenter(new THREE.Vector3());
|
|
const size = box.getSize(new THREE.Vector3());
|
|
const maxDim = Math.max(size.x, size.y, size.z);
|
|
|
|
this.controls.target.copy(center);
|
|
this.camera.position.set(center.x + maxDim * 1.35, center.y - maxDim * 1.35, center.z + maxDim * 1.05);
|
|
this.camera.lookAt(center);
|
|
this.controls.update();
|
|
}
|
|
|
|
onPointerDown(event) {
|
|
const rect = this.renderer.domElement.getBoundingClientRect();
|
|
this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
|
this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
|
|
|
this.raycaster.setFromCamera(this.mouse, this.camera);
|
|
|
|
if (this.stepMode === 3) {
|
|
const visibleRebarChildren = [];
|
|
for (const grp of this.rebarMeshes) {
|
|
if (grp.visible) {
|
|
visibleRebarChildren.push(...grp.children);
|
|
}
|
|
}
|
|
const hits = this.raycaster.intersectObjects(visibleRebarChildren, false);
|
|
if (hits.length > 0) {
|
|
const hitObj = hits[0].object;
|
|
const mark = hitObj.userData.mark || hitObj.parent?.userData?.mark;
|
|
if (mark) {
|
|
this.selectRebarMark(mark);
|
|
if (this.onSelectRebar) this.onSelectRebar(mark, hitObj.userData.wingwallId);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
const meshes = Object.values(this.meshes).map(m => m.group.userData.mesh);
|
|
const intersects = this.raycaster.intersectObjects(meshes);
|
|
|
|
if (intersects.length > 0) {
|
|
const hitMesh = intersects[0].object;
|
|
const objId = hitMesh.userData.id;
|
|
this.selectObject(objId);
|
|
if (this.onSelect) this.onSelect(objId);
|
|
}
|
|
}
|
|
|
|
onWindowResize() {
|
|
if (!this.container) return;
|
|
const width = this.container.clientWidth;
|
|
const height = this.container.clientHeight;
|
|
if (width === 0 || height === 0) return;
|
|
|
|
this.camera.aspect = width / height;
|
|
this.camera.updateProjectionMatrix();
|
|
this.renderer.setSize(width, height);
|
|
}
|
|
|
|
animate() {
|
|
requestAnimationFrame(() => this.animate());
|
|
this.controls.update();
|
|
this.renderer.render(this.scene, this.camera);
|
|
}
|
|
}
|