222 lines
9.6 KiB
React
222 lines
9.6 KiB
React
import { useEffect, useRef } from 'react'
|
|
|
|
const DEFAULT_CAMERA = { yaw: -0.66, pitch: 0.43, zoom: 1, panX: 0, panY: 0 }
|
|
const COLORS = { major: '#78917c', minor: '#d0aa69', insert: '#9a9074' }
|
|
const clamp = (value, min, max) => Math.max(min, Math.min(max, value))
|
|
|
|
function worldPoint(unit, pointA, pointB, pointIndex, t) {
|
|
const angle = (unit.startAngle + (unit.endAngle - unit.startAngle) * t) * Math.PI / 180
|
|
const cx = unit.center[0] + unit.radius * Math.cos(angle)
|
|
const cz = unit.center[1] + unit.radius * Math.sin(angle)
|
|
const tangentX = -Math.sin(angle)
|
|
const tangentZ = Math.cos(angle)
|
|
const normalX = -tangentZ
|
|
const normalZ = tangentX
|
|
const stationT = (0.01 + t * 19.98) / 20
|
|
const lateral = pointA[pointIndex][0] + (pointB[pointIndex][0] - pointA[pointIndex][0]) * stationT
|
|
const elevation = pointA[pointIndex][1] + (pointB[pointIndex][1] - pointA[pointIndex][1]) * stationT
|
|
return [cx + lateral * normalX, elevation, cz + lateral * normalZ]
|
|
}
|
|
|
|
function hexRgb(hex) {
|
|
return [1, 3, 5].map(index => parseInt(hex.slice(index, index + 2), 16))
|
|
}
|
|
|
|
function colorShade(hex, amount, alpha) {
|
|
const [r, g, b] = hexRgb(hex).map(value => Math.round(value * amount))
|
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
|
}
|
|
|
|
function inPolygon(point, polygon) {
|
|
let inside = false
|
|
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
const [xi, yi] = polygon[i], [xj, yj] = polygon[j]
|
|
const intersect = ((yi > point[1]) !== (yj > point[1])) && (point[0] < ((xj - xi) * (point[1] - yi)) / (yj - yi || 1) + xi)
|
|
if (intersect) inside = !inside
|
|
}
|
|
return inside
|
|
}
|
|
|
|
export default function ModelViewer({ units, hidden, selected, onSelect, view, renderMode, resetToken }) {
|
|
const canvasRef = useRef(null)
|
|
const cameraRef = useRef({ ...DEFAULT_CAMERA })
|
|
const sceneRef = useRef({ units, hidden, selected, view, renderMode, onSelect })
|
|
const drawRef = useRef(() => {})
|
|
|
|
useEffect(() => {
|
|
sceneRef.current = { units, hidden, selected, view, renderMode, onSelect }
|
|
drawRef.current()
|
|
}, [units, hidden, selected, view, renderMode, onSelect])
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current
|
|
const ctx = canvas.getContext('2d')
|
|
let hitFaces = []
|
|
let pointerStart = null
|
|
let lastPoint = null
|
|
let dragged = false
|
|
|
|
const project = (point, width, height) => {
|
|
const camera = cameraRef.current
|
|
const y = point[1] - 104
|
|
const x = point[0] * Math.cos(camera.yaw) - point[2] * Math.sin(camera.yaw)
|
|
const z = point[0] * Math.sin(camera.yaw) + point[2] * Math.cos(camera.yaw)
|
|
const scale = Math.min(width / 66, height / 24) * camera.zoom
|
|
return [width / 2 + x * scale + camera.panX, height / 2 - (y * Math.cos(camera.pitch) - z * Math.sin(camera.pitch)) * scale + camera.panY, y * Math.sin(camera.pitch) + z * Math.cos(camera.pitch)]
|
|
}
|
|
|
|
const draw = () => {
|
|
const rect = canvas.getBoundingClientRect()
|
|
const width = rect.width, height = rect.height
|
|
if (!width || !height) return
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2)
|
|
if (canvas.width !== Math.round(width * dpr) || canvas.height !== Math.round(height * dpr)) {
|
|
canvas.width = Math.round(width * dpr); canvas.height = Math.round(height * dpr)
|
|
}
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
|
|
const { units, hidden, selected, renderMode } = sceneRef.current
|
|
const background = ctx.createLinearGradient(0, 0, 0, height)
|
|
background.addColorStop(0, renderMode ? '#e8efea' : '#f8faf8')
|
|
background.addColorStop(1, renderMode ? '#cbd8cf' : '#e9efea')
|
|
ctx.fillStyle = background; ctx.fillRect(0, 0, width, height)
|
|
|
|
const drawLine = (a, b, color, lineWidth = 1) => {
|
|
const pa = project(a, width, height), pb = project(b, width, height)
|
|
ctx.beginPath(); ctx.moveTo(pa[0], pa[1]); ctx.lineTo(pb[0], pb[1])
|
|
ctx.strokeStyle = color; ctx.lineWidth = lineWidth; ctx.stroke()
|
|
}
|
|
for (let x = -40; x <= 40; x += 5) drawLine([x, 100.2, -22], [x, 100.2, 22], '#aab9ad38', .6)
|
|
for (let z = -20; z <= 20; z += 5) drawLine([-40, 100.2, z], [40, 100.2, z], '#aab9ad38', .6)
|
|
|
|
const faces = []
|
|
const longitudinalSteps = 8
|
|
for (const unit of units) {
|
|
for (const part of unit.parts) {
|
|
if (hidden.has(part.id) || part.a.length !== part.b.length) continue
|
|
const color = COLORS[part.group] || COLORS.major
|
|
const active = selected?.unitId === unit.id && selected?.partId === part.id
|
|
for (let step = 0; step < longitudinalSteps; step++) {
|
|
const t0 = step / longitudinalSteps, t1 = (step + 1) / longitudinalSteps
|
|
for (let edge = 0; edge < part.a.length - 1; edge++) {
|
|
const points3d = [
|
|
worldPoint(unit, part.a, part.b, edge, t0),
|
|
worldPoint(unit, part.a, part.b, edge + 1, t0),
|
|
worldPoint(unit, part.a, part.b, edge + 1, t1),
|
|
worldPoint(unit, part.a, part.b, edge, t1),
|
|
]
|
|
const projected = points3d.map(point => project(point, width, height))
|
|
const depth = projected.reduce((sum, point) => sum + point[2], 0) / projected.length
|
|
faces.push({ projected, part, unit, color, depth, active, shade: .82 + .18 * Math.abs(Math.sin(edge * .73 + step * .11)) })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
faces.sort((a, b) => a.depth - b.depth)
|
|
hitFaces = []
|
|
for (const face of faces) {
|
|
ctx.beginPath()
|
|
face.projected.forEach((point, index) => index ? ctx.lineTo(point[0], point[1]) : ctx.moveTo(point[0], point[1]))
|
|
ctx.closePath()
|
|
ctx.fillStyle = colorShade(face.active ? '#d27c42' : face.color, renderMode ? face.shade : 1, face.active ? .92 : face.part.group === 'insert' ? .58 : .72)
|
|
ctx.fill()
|
|
ctx.strokeStyle = face.active ? '#9b4f20' : renderMode ? '#51675a99' : '#566b5b8c'
|
|
ctx.lineWidth = face.active ? 1.8 : .65
|
|
ctx.stroke()
|
|
hitFaces.push(face)
|
|
}
|
|
|
|
ctx.font = '11px sans-serif'
|
|
ctx.textAlign = 'left'
|
|
ctx.fillStyle = '#68806d'
|
|
units.forEach(unit => {
|
|
const start = project(worldPoint(unit, [[0, 104]], [[0, 104]], 0, 0), width, height)
|
|
const end = project(worldPoint(unit, [[0, 104]], [[0, 104]], 0, 1), width, height)
|
|
ctx.fillText('BLOCK8 중심선 · STA 319.010', start[0] - 5, start[1] - 16)
|
|
ctx.fillText(`STA 338.990`, end[0] - 8, end[1] - 14)
|
|
})
|
|
ctx.fillStyle = '#6f8275'
|
|
ctx.fillText('X·Z 평면: 도면 중심선 · Y: 표고 EL', 16, height - 18)
|
|
ctx.textAlign = 'right'
|
|
ctx.fillText(`확대 ${Math.round(cameraRef.current.zoom * 100)}%`, width - 16, height - 18)
|
|
}
|
|
drawRef.current = draw
|
|
|
|
const local = event => {
|
|
const rect = canvas.getBoundingClientRect()
|
|
return [event.clientX - rect.left, event.clientY - rect.top]
|
|
}
|
|
const down = event => {
|
|
canvas.setPointerCapture(event.pointerId)
|
|
pointerStart = local(event); lastPoint = pointerStart; dragged = false
|
|
event.preventDefault()
|
|
}
|
|
const move = event => {
|
|
if (pointerStart === null) return
|
|
const point = local(event)
|
|
const dx = point[0] - lastPoint[0], dy = point[1] - lastPoint[1]
|
|
if (Math.hypot(point[0] - pointerStart[0], point[1] - pointerStart[1]) > 4) dragged = true
|
|
const camera = cameraRef.current
|
|
if (event.shiftKey || event.buttons === 2 || event.buttons === 4) {
|
|
camera.panX += dx; camera.panY += dy
|
|
} else {
|
|
camera.yaw += dx * .008
|
|
camera.pitch = clamp(camera.pitch + dy * .006, -.4, 1.45)
|
|
}
|
|
lastPoint = point; drawRef.current()
|
|
}
|
|
const up = event => {
|
|
if (pointerStart === null) return
|
|
if (!dragged) {
|
|
const point = local(event)
|
|
for (let index = hitFaces.length - 1; index >= 0; index--) {
|
|
const face = hitFaces[index]
|
|
if (inPolygon(point, face.projected)) {
|
|
sceneRef.current.onSelect({ unitId: face.unit.id, partId: face.part.id })
|
|
break
|
|
}
|
|
}
|
|
}
|
|
pointerStart = null; lastPoint = null
|
|
}
|
|
const wheel = event => {
|
|
event.preventDefault()
|
|
cameraRef.current.zoom = clamp(cameraRef.current.zoom * (event.deltaY < 0 ? 1.1 : .9), .3, 5)
|
|
drawRef.current()
|
|
}
|
|
const context = event => event.preventDefault()
|
|
const resize = new ResizeObserver(() => drawRef.current())
|
|
resize.observe(canvas)
|
|
canvas.addEventListener('pointerdown', down)
|
|
canvas.addEventListener('pointermove', move)
|
|
canvas.addEventListener('pointerup', up)
|
|
canvas.addEventListener('pointercancel', up)
|
|
canvas.addEventListener('wheel', wheel, { passive: false })
|
|
canvas.addEventListener('contextmenu', context)
|
|
draw()
|
|
return () => {
|
|
resize.disconnect()
|
|
canvas.removeEventListener('pointerdown', down)
|
|
canvas.removeEventListener('pointermove', move)
|
|
canvas.removeEventListener('pointerup', up)
|
|
canvas.removeEventListener('pointercancel', up)
|
|
canvas.removeEventListener('wheel', wheel)
|
|
canvas.removeEventListener('contextmenu', context)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const viewCameras = {
|
|
전체: { yaw: -.66, pitch: .43 },
|
|
평면: { yaw: 0, pitch: Math.PI / 2 },
|
|
정면: { yaw: 0, pitch: 0 },
|
|
측면: { yaw: Math.PI / 2, pitch: 0 },
|
|
'A-A': { yaw: 0, pitch: 0 },
|
|
'B-B': { yaw: Math.PI, pitch: 0 },
|
|
}
|
|
cameraRef.current = { ...DEFAULT_CAMERA, ...viewCameras[view] }
|
|
drawRef.current()
|
|
}, [view, resetToken])
|
|
|
|
return <canvas ref={canvasRef} className="model-canvas" aria-label="BLOCK8 도면 기반 3D 구조 모델. 끌어 회전하고 휠로 확대할 수 있습니다." tabIndex={0} />
|
|
}
|