first push
This commit is contained in:
jason
@@ -0,0 +1,379 @@
|
||||
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 } 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
|
||||
|
||||
// ---- 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()
|
||||
|
||||
// Subtle environment fog
|
||||
scene.fog = new THREE.FogExp2(0x0a0a0f, 0.0008)
|
||||
|
||||
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, 10000)
|
||||
camera.position.set(5, 3, 8)
|
||||
|
||||
// Lighting
|
||||
const ambient = new THREE.AmbientLight(0xffffff, 0.5)
|
||||
scene.add(ambient)
|
||||
|
||||
const key = new THREE.DirectionalLight(0xffffff, 2.0)
|
||||
key.position.set(10, 20, 10)
|
||||
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(-10, 5, -10)
|
||||
scene.add(fill)
|
||||
|
||||
const rim = new THREE.DirectionalLight(0xffffff, 0.2)
|
||||
rim.position.set(0, -5, -10)
|
||||
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
|
||||
|
||||
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,
|
||||
})
|
||||
}
|
||||
|
||||
// ---- 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})`)
|
||||
}
|
||||
|
||||
setLoading('Building 3D scene…')
|
||||
const data = await res.json() as GeometryFile
|
||||
|
||||
if (!data.meshes || data.meshes.length === 0) {
|
||||
throw new Error('Geometry file contains no meshes.')
|
||||
}
|
||||
|
||||
const group = new THREE.Group()
|
||||
|
||||
for (const mesh of data.meshes) {
|
||||
const geo = new THREE.BufferGeometry()
|
||||
geo.setAttribute('position', new THREE.Float32BufferAttribute(mesh.positions, 3))
|
||||
|
||||
if (mesh.normals && mesh.normals.length > 0) {
|
||||
geo.setAttribute('normal', new THREE.Float32BufferAttribute(mesh.normals, 3))
|
||||
}
|
||||
|
||||
if (mesh.indices && mesh.indices.length > 0) {
|
||||
geo.setIndex(new THREE.Uint32BufferAttribute(mesh.indices, 1))
|
||||
}
|
||||
|
||||
if (!mesh.normals || mesh.normals.length === 0) {
|
||||
geo.computeVertexNormals()
|
||||
}
|
||||
|
||||
group.add(new THREE.Mesh(geo, makeMaterial(mesh.color)))
|
||||
}
|
||||
|
||||
scene.add(group)
|
||||
fitCamera(group)
|
||||
addGrid(group)
|
||||
}
|
||||
|
||||
// ---- 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)
|
||||
}
|
||||
|
||||
// ---- Viewer toolbar ------------------------------------------------------
|
||||
|
||||
function wireToolbar() {
|
||||
// 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)
|
||||
})
|
||||
}
|
||||
|
||||
// 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 {}
|
||||
Reference in New Issue
Block a user