303 lines
14 KiB
JavaScript
303 lines
14 KiB
JavaScript
<script>
|
|
(function () {
|
|
var THREE_JS = "api/notes/__THREE_ID__/download";
|
|
var ORBIT_JS = "api/notes/__THREE_ORBIT_ID__/download";
|
|
var STL_JS = "api/notes/__THREE_STL_ID__/download";
|
|
var OCCT_JS = "api/notes/__OCCT_JS_ID__/download";
|
|
var OCCT_WASM = "api/notes/__OCCT_WASM_ID__/download";
|
|
|
|
var OCCT_JS_ABS = new URL(OCCT_JS, location.href).href;
|
|
var OCCT_WASM_ABS = new URL(OCCT_WASM, location.href).href;
|
|
|
|
var MODEL_RE = /\.(stl|step|stp)$/i;
|
|
|
|
var STEP_PARAMS = { linearDeflection: 0.0005, angularDeflection: 0.2 };
|
|
|
|
var WORKER_SRC = [
|
|
"self.onmessage = function (e) {",
|
|
" var d = e.data;",
|
|
" if (d.type === 'loadLib') {",
|
|
" try { importScripts(d.libUrl); } catch (err) {",
|
|
" self.postMessage({ type: 'error', message: 'importScripts: ' + (err && err.message || err) }); return;",
|
|
" }",
|
|
" if (typeof self.occtimportjs !== 'function') {",
|
|
" self.postMessage({ type: 'error', message: 'STEP parser not found.' }); return;",
|
|
" }",
|
|
" self.occtimportjs({ locateFile: function () { return 'occt.wasm'; }, wasmBinary: d.wasm }).then(function (occt) {",
|
|
" self.occt = occt;",
|
|
" self.postMessage({ type: 'ready' });",
|
|
" }).catch(function (err) {",
|
|
" self.postMessage({ type: 'error', message: 'STEP init: ' + (err && err.message || err) });",
|
|
" });",
|
|
" return;",
|
|
" }",
|
|
" if (d.type === 'parse' && self.occt) {",
|
|
" try {",
|
|
" var result = self.occt.ReadStepFile(d.data, d.params);",
|
|
" var meshes = [];",
|
|
" (result.meshes || []).forEach(function (m) {",
|
|
" if (!m.attributes || !m.attributes.position) return;",
|
|
" var out = { position: m.attributes.position.array, color: m.color };",
|
|
" if (m.attributes.index && m.attributes.index.array) out.index = m.attributes.index.array;",
|
|
" meshes.push(out);",
|
|
" });",
|
|
" var transfer = [];",
|
|
" meshes.forEach(function (m) {",
|
|
" if (m.position && m.position.buffer) transfer.push(m.position.buffer);",
|
|
" if (m.index && m.index.buffer) transfer.push(m.index.buffer);",
|
|
" });",
|
|
" self.postMessage({ type: 'done', success: !!result.success, meshes: meshes }, transfer);",
|
|
" } catch (err) {",
|
|
" self.postMessage({ type: 'error', message: 'parse: ' + (err && err.message || err) });",
|
|
" }",
|
|
" }",
|
|
"};"
|
|
].join("\n");
|
|
|
|
function formatBytes(n) {
|
|
if (n >= 1048576) return (n / 1048576).toFixed(1) + " MB";
|
|
if (n >= 1024) return (n / 1024).toFixed(1) + " KB";
|
|
return n + " B";
|
|
}
|
|
|
|
function formatCount(n) {
|
|
n = Math.round(n);
|
|
if (n >= 1000000) return (n / 1000000).toFixed(2) + "M";
|
|
if (n >= 1000) return (n / 1000).toFixed(1) + "k";
|
|
return String(n);
|
|
}
|
|
|
|
function makeViewer(name) {
|
|
var box = document.createElement("div");
|
|
box.className = "model-viewer";
|
|
var wrap = document.createElement("div");
|
|
wrap.className = "model-viewer-canvas";
|
|
var status = document.createElement("div");
|
|
status.className = "model-viewer-status";
|
|
status.textContent = "Loading 3D model\u2026";
|
|
var progress = document.createElement("div");
|
|
progress.className = "model-viewer-progress";
|
|
var fill = document.createElement("div");
|
|
fill.className = "model-viewer-progress-fill";
|
|
progress.appendChild(fill);
|
|
var data = document.createElement("div");
|
|
data.className = "model-viewer-data";
|
|
wrap.appendChild(status);
|
|
wrap.appendChild(progress);
|
|
box.appendChild(data);
|
|
box.appendChild(wrap);
|
|
if (name) {
|
|
var cap = document.createElement("div");
|
|
cap.className = "model-viewer-caption";
|
|
cap.textContent = name;
|
|
box.appendChild(cap);
|
|
}
|
|
return box;
|
|
}
|
|
|
|
function loadScript(src, cb) {
|
|
var s = document.createElement("script");
|
|
s.src = src;
|
|
s.onload = cb;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
function fetchProgress(url, onProgress) {
|
|
return fetch(url).then(function (r) {
|
|
if (!r.ok) throw new Error("fetch " + r.status);
|
|
var total = parseInt(r.headers.get("Content-Length") || "0", 10);
|
|
var reader = r.body.getReader();
|
|
var chunks = [];
|
|
var received = 0;
|
|
function pump() {
|
|
return reader.read().then(function (res) {
|
|
if (res.done) {
|
|
var buf = new Uint8Array(received);
|
|
var off = 0;
|
|
chunks.forEach(function (c) { buf.set(c, off); off += c.length; });
|
|
return buf.buffer;
|
|
}
|
|
chunks.push(res.value);
|
|
received += res.value.length;
|
|
if (total) onProgress(received / total);
|
|
return pump();
|
|
});
|
|
}
|
|
return pump();
|
|
});
|
|
}
|
|
|
|
function initViewer(el, url, ext) {
|
|
var isStep = /\.(step|stp)$/i.test(ext);
|
|
var fileSize = null;
|
|
|
|
function setStatus(text) {
|
|
var s = el.querySelector(".model-viewer-status");
|
|
if (s) s.textContent = text;
|
|
}
|
|
function setProgress(percent) {
|
|
var bar = el.querySelector(".model-viewer-progress-fill");
|
|
if (!bar) return;
|
|
if (typeof percent === "number") {
|
|
bar.classList.remove("indeterminate");
|
|
bar.style.width = Math.round(percent * 100) + "%";
|
|
} else {
|
|
bar.classList.add("indeterminate");
|
|
bar.style.width = "";
|
|
}
|
|
}
|
|
function onError(msg) {
|
|
var s = el.querySelector(".model-viewer-status");
|
|
if (s) { s.textContent = msg || "Could not load 3D model."; s.classList.add("error"); }
|
|
setProgress(0);
|
|
}
|
|
function showData(extra) {
|
|
var d = el.querySelector(".model-viewer-data");
|
|
if (!d) return;
|
|
var parts = [];
|
|
if (fileSize) parts.push(formatBytes(fileSize));
|
|
if (extra) parts.push(extra);
|
|
if (parts.length) { d.textContent = parts.join(" \u00b7 "); d.style.display = "block"; }
|
|
}
|
|
|
|
function loadThree(cb) {
|
|
if (window.THREE && window.THREE.OrbitControls) { cb(); return; }
|
|
loadScript(THREE_JS, function () {
|
|
loadScript(ORBIT_JS, function () {
|
|
if (isStep) { cb(); return; }
|
|
if (window.THREE.STLLoader) { cb(); return; }
|
|
loadScript(STL_JS, cb);
|
|
});
|
|
});
|
|
}
|
|
|
|
setProgress(null);
|
|
setStatus("Loading 3D libraries\u2026");
|
|
|
|
loadThree(function () {
|
|
var wrap = el.querySelector(".model-viewer-canvas") || el;
|
|
var w = wrap.clientWidth || el.clientWidth || 400;
|
|
var h = Math.min(520, Math.max(320, Math.round(w * 0.62)));
|
|
var renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(w, h);
|
|
renderer.setClearColor(0x1d2021, 1);
|
|
|
|
var scene = new THREE.Scene();
|
|
var camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1000000);
|
|
camera.position.set(300, 220, 320);
|
|
scene.add(new THREE.AmbientLight(0xffffff, 0.55));
|
|
var dir = new THREE.DirectionalLight(0xffffff, 1.0); dir.position.set(1, 1.5, 1); scene.add(dir);
|
|
var back = new THREE.DirectionalLight(0xffffff, 0.35); back.position.set(-1, -0.5, -1); scene.add(back);
|
|
var controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
controls.enableDamping = true;
|
|
var group = new THREE.Group();
|
|
scene.add(group);
|
|
|
|
function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }
|
|
animate();
|
|
|
|
function fit() {
|
|
var box = new THREE.Box3().setFromObject(group);
|
|
if (box.isEmpty()) return;
|
|
var size = box.getSize(new THREE.Vector3()).length() || 1;
|
|
var center = box.getCenter(new THREE.Vector3());
|
|
var d = size * 2.4;
|
|
camera.position.set(center.x + d * 0.9, center.y + d * 0.6, center.z + d);
|
|
controls.target.copy(center);
|
|
controls.update();
|
|
}
|
|
function showCanvas() {
|
|
wrap.innerHTML = "";
|
|
wrap.appendChild(renderer.domElement);
|
|
var hint = document.createElement("div");
|
|
hint.className = "model-viewer-hint";
|
|
hint.textContent = "Drag to rotate \u00b7 scroll to zoom";
|
|
wrap.appendChild(hint);
|
|
}
|
|
|
|
setStatus("Downloading model\u2026");
|
|
fetchProgress(url, function (p) { setProgress(p); }).then(function (buf) {
|
|
fileSize = buf.byteLength;
|
|
showData();
|
|
var data = new Uint8Array(buf);
|
|
if (isStep) {
|
|
setStatus("Downloading STEP parser\u2026");
|
|
setProgress(null);
|
|
fetchProgress(OCCT_WASM_ABS, function () {}).then(function (wasmBuf) {
|
|
setStatus("Parsing STEP\u2026");
|
|
setProgress(null);
|
|
var blob = new Blob([WORKER_SRC], { type: "application/javascript" });
|
|
var wurl = URL.createObjectURL(blob);
|
|
var worker = new Worker(wurl);
|
|
var settled = false;
|
|
worker.onmessage = function (e) {
|
|
if (e.data.type === "ready") {
|
|
worker.postMessage({ type: "parse", data: data, params: STEP_PARAMS }, [data.buffer]);
|
|
} else if (e.data.type === "done") {
|
|
settled = true; worker.terminate(); URL.revokeObjectURL(wurl);
|
|
if (!e.data.success) { onError("Could not parse STEP file."); return; }
|
|
var tris = 0;
|
|
(e.data.meshes || []).forEach(function (m) {
|
|
var geo = new THREE.BufferGeometry();
|
|
geo.setAttribute("position", new THREE.Float32BufferAttribute(m.position, 3));
|
|
if (m.index) geo.setIndex(m.index);
|
|
geo.computeVertexNormals();
|
|
var color = m.color && m.color.length === 3 ? new THREE.Color(m.color[0], m.color[1], m.color[2]) : null;
|
|
var mat = new THREE.MeshStandardMaterial({ color: color || 0xb8bb26, metalness: 0.2, roughness: 0.6, side: THREE.DoubleSide, flatShading: true });
|
|
group.add(new THREE.Mesh(geo, mat));
|
|
tris += geo.index ? geo.index.count / 3 : geo.attributes.position.count / 3;
|
|
});
|
|
fit();
|
|
showCanvas();
|
|
showData(formatCount(tris) + " triangles");
|
|
} else if (e.data.type === "error") {
|
|
settled = true; worker.terminate(); URL.revokeObjectURL(wurl);
|
|
onError(e.data.message || "Could not parse STEP file.");
|
|
}
|
|
};
|
|
worker.onerror = function (e) {
|
|
if (!settled) { settled = true; worker.terminate(); URL.revokeObjectURL(wurl); onError("STEP worker error: " + (e && e.message || "unknown")); }
|
|
};
|
|
worker.postMessage({ type: "loadLib", libUrl: OCCT_JS_ABS, wasm: new Uint8Array(wasmBuf) }, [wasmBuf]);
|
|
}).catch(function () { onError("Could not download STEP parser."); });
|
|
} else {
|
|
var geo = new THREE.STLLoader().parse(data);
|
|
geo.computeVertexNormals();
|
|
var mat = new THREE.MeshStandardMaterial({ color: 0xb8bb26, metalness: 0.25, roughness: 0.55, flatShading: true });
|
|
group.add(new THREE.Mesh(geo, mat));
|
|
fit();
|
|
showCanvas();
|
|
showData(formatCount(geo.index ? geo.index.count / 3 : geo.attributes.position.count / 3) + " triangles");
|
|
}
|
|
}).catch(function () { onError("Could not load 3D model."); });
|
|
});
|
|
}
|
|
|
|
var type = (document.body.className.match(/type-([\w-]+)/) || [])[1];
|
|
|
|
if (type === "file") {
|
|
var title = ((document.getElementById("title") || {}).textContent || document.title || "").trim();
|
|
var m = title.match(MODEL_RE);
|
|
if (m) {
|
|
var content = document.getElementById("content");
|
|
if (content) {
|
|
var noteId = document.body.getAttribute("data-note-id");
|
|
var el = makeViewer(title.trim());
|
|
content.innerHTML = "";
|
|
content.appendChild(el);
|
|
initViewer(el, "api/notes/" + noteId + "/download", m[0]);
|
|
}
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll("#content a[href*='api/attachments/']").forEach(function (a) {
|
|
var name = (a.textContent || "").trim();
|
|
var m = name.match(MODEL_RE);
|
|
if (!m) return;
|
|
var href = a.getAttribute("href");
|
|
var el = makeViewer(name);
|
|
a.replaceWith(el);
|
|
initViewer(el, href, m[0]);
|
|
});
|
|
})();
|
|
</script> |