jason
587 lines
20 KiB
TypeScript
587 lines
20 KiB
TypeScript
import '../style.css'
|
|
import * as THREE from 'three'
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
|
|
import { STLLoader } from 'three/addons/loaders/STLLoader.js'
|
|
import type { GeometryFile, HierarchyNode } from '../../server/services/stepConverter'
|
|
|
|
// ---- Data injected by viewer.ejs -----------------------------------------
|
|
|
|
declare const __STEPVIEW__: {
|
|
modelId: number
|
|
fileType: 'step' | 'stp' | 'stl'
|
|
shareUrl: string
|
|
hasPdfs: boolean
|
|
hasGeometry: boolean // pre-processed geometry JSON exists (STEP/STP only)
|
|
}
|
|
|
|
// ---- Scene state ---------------------------------------------------------
|
|
|
|
let renderer: THREE.WebGLRenderer
|
|
let scene: THREE.Scene
|
|
let camera: THREE.PerspectiveCamera
|
|
let controls: OrbitControls
|
|
let viewingDist: number = 200 // updated by fitCamera; used by fog toggle
|
|
|
|
// Map from geometry-JSON mesh index → Three.js Mesh, used by the tree panel
|
|
const meshObjects = new Map<number, THREE.Mesh>()
|
|
|
|
// ---- UI helpers ----------------------------------------------------------
|
|
|
|
function setLoading(msg: string) {
|
|
const el = document.getElementById('loading-msg')
|
|
if (el) el.textContent = msg
|
|
}
|
|
|
|
function hideLoading() {
|
|
const overlay = document.getElementById('loading-overlay') as HTMLElement
|
|
overlay.style.opacity = '0'
|
|
setTimeout(() => { overlay.style.display = 'none' }, 300)
|
|
}
|
|
|
|
function showError(msg: string) {
|
|
document.getElementById('loading-overlay')!.style.display = 'none'
|
|
const overlay = document.getElementById('error-overlay')!
|
|
overlay.classList.remove('hidden')
|
|
overlay.classList.add('flex')
|
|
const msgEl = document.getElementById('error-msg')
|
|
if (msgEl) msgEl.textContent = msg
|
|
}
|
|
|
|
function showToast(msg: string, duration = 2200) {
|
|
const toast = document.getElementById('toast')!
|
|
const toastMsg = document.getElementById('toast-msg')!
|
|
toastMsg.textContent = msg
|
|
toast.classList.remove('opacity-0', 'pointer-events-none')
|
|
toast.classList.add('opacity-100')
|
|
setTimeout(() => {
|
|
toast.classList.add('opacity-0', 'pointer-events-none')
|
|
toast.classList.remove('opacity-100')
|
|
}, duration)
|
|
}
|
|
|
|
// ---- Scene setup ---------------------------------------------------------
|
|
|
|
function buildScene(canvas: HTMLCanvasElement) {
|
|
renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false })
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
renderer.setClearColor(0x0a0a0f, 1)
|
|
renderer.shadowMap.enabled = true
|
|
renderer.shadowMap.type = THREE.PCFSoftShadowMap
|
|
renderer.outputColorSpace = THREE.SRGBColorSpace
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping
|
|
renderer.toneMappingExposure = 1.1
|
|
|
|
scene = new THREE.Scene()
|
|
|
|
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, 10000)
|
|
camera.position.set(5, 3, 8)
|
|
|
|
// Lighting — no fog: FogExp2 with a fixed density darkens large models
|
|
// whose camera distance exceeds ~200 units, making them appear black.
|
|
const ambient = new THREE.AmbientLight(0xffffff, 0.9)
|
|
scene.add(ambient)
|
|
|
|
const key = new THREE.DirectionalLight(0xffffff, 1.8)
|
|
key.position.set(1, 2, 1.5)
|
|
key.castShadow = true
|
|
key.shadow.mapSize.set(2048, 2048)
|
|
key.shadow.camera.near = 0.1
|
|
key.shadow.camera.far = 500
|
|
scene.add(key)
|
|
|
|
const fill = new THREE.DirectionalLight(0x8899cc, 0.4)
|
|
fill.position.set(-2, 0.5, -1)
|
|
scene.add(fill)
|
|
|
|
const rim = new THREE.DirectionalLight(0xffffff, 0.25)
|
|
rim.position.set(0, -1, -2)
|
|
scene.add(rim)
|
|
|
|
controls = new OrbitControls(camera, renderer.domElement)
|
|
controls.enableDamping = true
|
|
controls.dampingFactor = 0.06
|
|
controls.minDistance = 0.001
|
|
controls.maxDistance = 5000
|
|
controls.panSpeed = 0.8
|
|
controls.rotateSpeed = 0.6
|
|
controls.zoomSpeed = 1.2
|
|
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight
|
|
camera.updateProjectionMatrix()
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
})
|
|
}
|
|
|
|
// ---- Render loop ---------------------------------------------------------
|
|
|
|
function startRenderLoop() {
|
|
const clock = new THREE.Clock()
|
|
function tick() {
|
|
requestAnimationFrame(tick)
|
|
controls.update()
|
|
renderer.render(scene, camera)
|
|
void clock
|
|
}
|
|
tick()
|
|
}
|
|
|
|
// ---- Camera fit ----------------------------------------------------------
|
|
|
|
function fitCamera(object: THREE.Object3D) {
|
|
const box = new THREE.Box3().setFromObject(object)
|
|
const size = box.getSize(new THREE.Vector3())
|
|
const center = box.getCenter(new THREE.Vector3())
|
|
const maxDim = Math.max(size.x, size.y, size.z)
|
|
|
|
if (maxDim === 0) return
|
|
|
|
const fovRad = camera.fov * (Math.PI / 180)
|
|
const dist = (maxDim / (2 * Math.tan(fovRad / 2))) * 1.6
|
|
|
|
viewingDist = dist
|
|
|
|
camera.near = maxDim * 0.0005
|
|
camera.far = maxDim * 200
|
|
camera.updateProjectionMatrix()
|
|
|
|
camera.position.set(
|
|
center.x + dist * 0.55,
|
|
center.y + dist * 0.35,
|
|
center.z + dist,
|
|
)
|
|
camera.lookAt(center)
|
|
controls.target.copy(center)
|
|
controls.update()
|
|
}
|
|
|
|
// ---- Ground grid ---------------------------------------------------------
|
|
|
|
function addGrid(object: THREE.Object3D) {
|
|
const box = new THREE.Box3().setFromObject(object)
|
|
const size = box.getSize(new THREE.Vector3())
|
|
const center = box.getCenter(new THREE.Vector3())
|
|
const maxDim = Math.max(size.x, size.z) * 3
|
|
|
|
const grid = new THREE.GridHelper(maxDim, 20, 0x1a1a2a, 0x1a1a2a)
|
|
grid.position.set(center.x, box.min.y - 0.001, center.z)
|
|
scene.add(grid)
|
|
}
|
|
|
|
// ---- Material factory ----------------------------------------------------
|
|
|
|
function makeMaterial(color: [number, number, number] | null): THREE.MeshStandardMaterial {
|
|
const c = color
|
|
? new THREE.Color(color[0], color[1], color[2])
|
|
: new THREE.Color(0x8fa3b8)
|
|
return new THREE.MeshStandardMaterial({
|
|
color: c,
|
|
roughness: 0.45,
|
|
metalness: 0.25,
|
|
side: THREE.DoubleSide,
|
|
})
|
|
}
|
|
|
|
// ---- Binary decode helpers (geometry v2) ---------------------------------
|
|
|
|
function b64ToFloat32(b64: string): Float32Array {
|
|
const bin = atob(b64)
|
|
const buf = new ArrayBuffer(bin.length)
|
|
const u8 = new Uint8Array(buf)
|
|
for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i)
|
|
return new Float32Array(buf)
|
|
}
|
|
|
|
function b64ToUint32(b64: string): Uint32Array {
|
|
const bin = atob(b64)
|
|
const buf = new ArrayBuffer(bin.length)
|
|
const u8 = new Uint8Array(buf)
|
|
for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i)
|
|
return new Uint32Array(buf)
|
|
}
|
|
|
|
// ---- STEP/STP loader (geometry JSON, pre-processed server-side) ----------
|
|
|
|
async function loadStepGeometry(): Promise<void> {
|
|
setLoading('Fetching geometry…')
|
|
const res = await fetch(`/files/geometry/${__STEPVIEW__.modelId}`)
|
|
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({})) as { processing?: boolean }
|
|
if (body.processing) {
|
|
throw new Error('This model is still being processed. Please try again in a moment.')
|
|
}
|
|
throw new Error(`Could not load geometry (HTTP ${res.status})`)
|
|
}
|
|
|
|
// Stream the response body so there is visible activity during large downloads
|
|
let text: string
|
|
if (res.body) {
|
|
const reader = res.body.getReader()
|
|
const chunks: Uint8Array[] = []
|
|
let loaded = 0
|
|
while (true) {
|
|
const { done, value } = await reader.read()
|
|
if (done) break
|
|
chunks.push(value)
|
|
loaded += value.byteLength
|
|
setLoading(`Downloading geometry… ${Math.round(loaded / 1024)} KB`)
|
|
}
|
|
setLoading('Parsing geometry…')
|
|
text = new TextDecoder().decode(
|
|
chunks.reduce((acc, c) => { const m = new Uint8Array(acc.length + c.length); m.set(acc); m.set(c, acc.length); return m }, new Uint8Array(0))
|
|
)
|
|
} else {
|
|
text = await res.text()
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const data = JSON.parse(text) as GeometryFile & { version: number; meshes: any[] }
|
|
|
|
if (!data.meshes || data.meshes.length === 0) {
|
|
throw new Error('Geometry file contains no meshes.')
|
|
}
|
|
|
|
setLoading('Building 3D scene…')
|
|
const group = new THREE.Group()
|
|
const isV2 = data.version >= 2
|
|
|
|
for (let i = 0; i < data.meshes.length; i++) {
|
|
const mesh = data.meshes[i]
|
|
const geo = new THREE.BufferGeometry()
|
|
|
|
let positions: Float32Array
|
|
let normals: Float32Array | null
|
|
let indices: Uint32Array | null
|
|
|
|
if (isV2) {
|
|
positions = b64ToFloat32(mesh.positions)
|
|
normals = mesh.normals ? b64ToFloat32(mesh.normals) : null
|
|
indices = mesh.indices ? b64ToUint32(mesh.indices) : null
|
|
} else {
|
|
// Legacy v1: plain number arrays
|
|
positions = new Float32Array(mesh.positions as number[])
|
|
normals = mesh.normals ? new Float32Array(mesh.normals as number[]) : null
|
|
indices = mesh.indices ? new Uint32Array(mesh.indices as number[]) : null
|
|
}
|
|
|
|
geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
|
|
if (normals && normals.length > 0) {
|
|
geo.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3))
|
|
}
|
|
if (indices && indices.length > 0) {
|
|
geo.setIndex(new THREE.Uint32BufferAttribute(indices, 1))
|
|
}
|
|
if (!normals || normals.length === 0) {
|
|
geo.computeVertexNormals()
|
|
}
|
|
|
|
const threeMesh = new THREE.Mesh(geo, makeMaterial(mesh.color))
|
|
meshObjects.set(i, threeMesh)
|
|
group.add(threeMesh)
|
|
}
|
|
|
|
scene.add(group)
|
|
fitCamera(group)
|
|
addGrid(group)
|
|
|
|
// Diagnostics — always log tree state so browser console can confirm what arrived
|
|
console.log('[StepView] geometry version:', data.version)
|
|
console.log('[StepView] mesh count:', data.meshes.length)
|
|
console.log('[StepView] data.tree:', data.tree)
|
|
|
|
const treeContent = document.getElementById('tree-content')
|
|
if (!treeContent) return // not a STEP model or panel removed
|
|
|
|
if (!data.tree) {
|
|
treeContent.innerHTML = '<p class="text-xs text-gray-500 px-4 py-3">No tree data — open the admin panel, edit this model, and click <strong class="text-gray-400">Retry Processing</strong> to rebuild geometry with tree support.</p>'
|
|
return
|
|
}
|
|
|
|
const nodeCount = countNodes(data.tree)
|
|
console.log('[StepView] tree node count:', nodeCount)
|
|
|
|
if (nodeCount === 0) {
|
|
treeContent.innerHTML = '<p class="text-xs text-gray-500 px-4 py-3">This file has no named components in its hierarchy.</p>'
|
|
return
|
|
}
|
|
|
|
wireTreePanel(data.tree)
|
|
}
|
|
|
|
function countNodes(node: HierarchyNode): number {
|
|
return 1 + node.children.reduce((acc, c) => acc + countNodes(c), 0)
|
|
}
|
|
|
|
// ---- STL loader (client-side, Three.js built-in) -------------------------
|
|
|
|
async function loadStl(): Promise<void> {
|
|
setLoading('Fetching STL file…')
|
|
const loader = new STLLoader()
|
|
|
|
const geometry = await new Promise<THREE.BufferGeometry>((resolve, reject) => {
|
|
loader.load(
|
|
`/files/model/${__STEPVIEW__.modelId}`,
|
|
resolve,
|
|
(xhr) => {
|
|
if (xhr.total) {
|
|
const pct = Math.round((xhr.loaded / xhr.total) * 100)
|
|
setLoading(`Downloading STL… ${pct}%`)
|
|
}
|
|
},
|
|
reject,
|
|
)
|
|
})
|
|
|
|
setLoading('Building 3D scene…')
|
|
geometry.computeVertexNormals()
|
|
|
|
// Center geometry at origin
|
|
geometry.computeBoundingBox()
|
|
const center = new THREE.Vector3()
|
|
geometry.boundingBox!.getCenter(center)
|
|
geometry.translate(-center.x, -center.y, -center.z)
|
|
|
|
const mesh = new THREE.Mesh(geometry, makeMaterial(null))
|
|
mesh.castShadow = true
|
|
mesh.receiveShadow = true
|
|
scene.add(mesh)
|
|
fitCamera(mesh)
|
|
addGrid(mesh)
|
|
}
|
|
|
|
// ---- Model tree ----------------------------------------------------------
|
|
|
|
function setNodeVisible(node: HierarchyNode, visible: boolean) {
|
|
for (const idx of node.meshes) {
|
|
const m = meshObjects.get(idx)
|
|
if (m) m.visible = visible
|
|
}
|
|
for (const child of node.children) setNodeVisible(child, visible)
|
|
}
|
|
|
|
function buildTreeNode(node: HierarchyNode, depth: number): HTMLElement {
|
|
const label = node.name.trim() || 'Solid'
|
|
const hasChildren = node.children.length > 0
|
|
|
|
const wrapper = document.createElement('div')
|
|
|
|
const row = document.createElement('div')
|
|
row.className = 'flex items-center gap-1 py-1 rounded-lg hover:bg-white/5 group select-none'
|
|
row.style.paddingLeft = `${6 + depth * 14}px`
|
|
row.style.paddingRight = '6px'
|
|
|
|
// Chevron
|
|
const chevron = document.createElement('span')
|
|
chevron.className = `w-3.5 h-3.5 shrink-0 text-gray-600 transition-transform duration-150 ${hasChildren ? 'cursor-pointer' : 'invisible'}`
|
|
chevron.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>`
|
|
|
|
// Eye toggle
|
|
const EYE_ON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>`
|
|
const EYE_OFF = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`
|
|
|
|
const eyeBtn = document.createElement('button')
|
|
eyeBtn.className = 'w-3.5 h-3.5 shrink-0 text-gray-500 hover:text-white transition-colors opacity-0 group-hover:opacity-100'
|
|
eyeBtn.title = 'Toggle visibility'
|
|
eyeBtn.innerHTML = EYE_ON
|
|
|
|
let visible = true
|
|
eyeBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation()
|
|
visible = !visible
|
|
eyeBtn.innerHTML = visible ? EYE_ON : EYE_OFF
|
|
eyeBtn.style.opacity = visible ? '' : '1'
|
|
eyeBtn.style.color = visible ? '' : 'rgb(248 113 113)'
|
|
nameEl.style.opacity = visible ? '' : '0.3'
|
|
setNodeVisible(node, visible)
|
|
})
|
|
|
|
// Name
|
|
const nameEl = document.createElement('span')
|
|
nameEl.className = 'text-xs text-gray-300 truncate flex-1'
|
|
nameEl.textContent = label
|
|
|
|
row.append(chevron, eyeBtn, nameEl)
|
|
wrapper.append(row)
|
|
|
|
if (hasChildren) {
|
|
const childrenEl = document.createElement('div')
|
|
for (const child of node.children) {
|
|
childrenEl.append(buildTreeNode(child, depth + 1))
|
|
}
|
|
|
|
let expanded = true
|
|
chevron.style.transform = 'rotate(90deg)'
|
|
|
|
const toggle = () => {
|
|
expanded = !expanded
|
|
chevron.style.transform = expanded ? 'rotate(90deg)' : ''
|
|
childrenEl.style.display = expanded ? '' : 'none'
|
|
}
|
|
|
|
chevron.addEventListener('click', (e) => { e.stopPropagation(); toggle() })
|
|
row.addEventListener('click', toggle)
|
|
wrapper.append(childrenEl)
|
|
}
|
|
|
|
return wrapper
|
|
}
|
|
|
|
function wireTreePanel(root: HierarchyNode) {
|
|
const content = document.getElementById('tree-content')
|
|
if (!content) return
|
|
|
|
// Skip an unnamed root wrapper — go straight to its children
|
|
const topNodes = (!root.name && root.children.length > 0) ? root.children : [root]
|
|
|
|
content.innerHTML = ''
|
|
for (const node of topNodes) {
|
|
content.append(buildTreeNode(node, 0))
|
|
}
|
|
}
|
|
|
|
// ---- Viewer toolbar ------------------------------------------------------
|
|
|
|
function wireToolbar() {
|
|
// Model tree panel toggle (always wired; content populated after geometry loads)
|
|
const treePanel = document.getElementById('tree-panel')
|
|
const treeBtn = document.getElementById('tree-toggle-btn')
|
|
const treeClose = document.getElementById('tree-close-btn')
|
|
if (treePanel) {
|
|
treeBtn?.addEventListener('click', () => {
|
|
const closing = !treePanel.classList.contains('closed')
|
|
treePanel.classList.toggle('closed')
|
|
treeBtn.classList.toggle('text-accent', !closing)
|
|
})
|
|
treeClose?.addEventListener('click', () => {
|
|
treePanel.classList.add('closed')
|
|
treeBtn?.classList.remove('text-accent')
|
|
})
|
|
}
|
|
|
|
// Copy-link
|
|
const copyBtn = document.getElementById('copy-link-btn') as HTMLButtonElement | null
|
|
if (copyBtn) {
|
|
copyBtn.addEventListener('click', async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(__STEPVIEW__.shareUrl)
|
|
} catch {
|
|
const ta = Object.assign(document.createElement('textarea'), {
|
|
value: __STEPVIEW__.shareUrl,
|
|
style: 'position:fixed;opacity:0',
|
|
})
|
|
document.body.appendChild(ta)
|
|
ta.select()
|
|
document.execCommand('copy')
|
|
document.body.removeChild(ta)
|
|
}
|
|
const orig = copyBtn.innerHTML
|
|
copyBtn.textContent = '✓ Copied!'
|
|
setTimeout(() => { copyBtn.innerHTML = orig }, 2000)
|
|
})
|
|
}
|
|
|
|
// Reset camera
|
|
const resetBtn = document.getElementById('reset-camera-btn')
|
|
if (resetBtn) {
|
|
resetBtn.addEventListener('click', () => {
|
|
// Re-fit camera to scene objects (exclude grid)
|
|
const objects = scene.children.filter(c => !(c instanceof THREE.GridHelper))
|
|
const group = new THREE.Group()
|
|
objects.forEach(o => group.add(o.clone()))
|
|
if (group.children.length) fitCamera(group)
|
|
})
|
|
}
|
|
|
|
// Fog toggle — off by default; density scaled to the loaded model's viewing distance
|
|
let fogOn = false
|
|
const fogBtn = document.getElementById('fog-btn')
|
|
if (fogBtn) {
|
|
fogBtn.addEventListener('click', () => {
|
|
fogOn = !fogOn
|
|
scene.fog = fogOn
|
|
? new THREE.FogExp2(0x0a0a0f, 0.5 / viewingDist)
|
|
: null
|
|
fogBtn.classList.toggle('text-accent', fogOn)
|
|
})
|
|
}
|
|
|
|
// Wireframe toggle
|
|
let wireframe = false
|
|
const wireBtn = document.getElementById('wireframe-btn')
|
|
if (wireBtn) {
|
|
wireBtn.addEventListener('click', () => {
|
|
wireframe = !wireframe
|
|
scene.traverse(obj => {
|
|
if (obj instanceof THREE.Mesh && obj.material instanceof THREE.MeshStandardMaterial) {
|
|
obj.material.wireframe = wireframe
|
|
}
|
|
})
|
|
wireBtn.classList.toggle('text-accent', wireframe)
|
|
})
|
|
}
|
|
|
|
// PDF panel
|
|
const pdfToggle = document.getElementById('pdf-toggle-btn')
|
|
const pdfPanel = document.getElementById('pdf-panel')
|
|
const pdfClose = document.getElementById('pdf-close-btn')
|
|
|
|
if (pdfToggle && pdfPanel) {
|
|
pdfToggle.addEventListener('click', () => pdfPanel.classList.toggle('closed'))
|
|
}
|
|
if (pdfClose && pdfPanel) {
|
|
pdfClose.addEventListener('click', () => pdfPanel.classList.add('closed'))
|
|
}
|
|
|
|
// PDF tabs
|
|
document.querySelectorAll<HTMLButtonElement>('.pdf-tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
const idx = tab.dataset.tab
|
|
document.querySelectorAll('.pdf-tab').forEach(t => {
|
|
t.classList.remove('border-accent', 'text-white')
|
|
t.classList.add('border-transparent', 'text-gray-500')
|
|
})
|
|
tab.classList.add('border-accent', 'text-white')
|
|
tab.classList.remove('border-transparent', 'text-gray-500')
|
|
document.querySelectorAll<HTMLElement>('.pdf-frame').forEach(f => {
|
|
f.classList.toggle('hidden', f.dataset.frame !== idx)
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
// ---- Boot ----------------------------------------------------------------
|
|
|
|
async function boot() {
|
|
const canvas = document.getElementById('viewer-canvas') as HTMLCanvasElement
|
|
|
|
try {
|
|
buildScene(canvas)
|
|
startRenderLoop()
|
|
wireToolbar()
|
|
|
|
if (__STEPVIEW__.fileType === 'stl') {
|
|
await loadStl()
|
|
} else {
|
|
// STEP / STP
|
|
if (!__STEPVIEW__.hasGeometry) {
|
|
throw new Error(
|
|
'This model has not finished processing yet. ' +
|
|
'Please check back shortly or contact your administrator.'
|
|
)
|
|
}
|
|
await loadStepGeometry()
|
|
}
|
|
|
|
hideLoading()
|
|
} catch (err) {
|
|
console.error('[StepView]', err)
|
|
showError(err instanceof Error ? err.message : String(err))
|
|
}
|
|
}
|
|
|
|
boot()
|
|
|
|
export {}
|