ljq/TkAstral3D
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ljq:151bc7c8a2cb0902d400624364ba25a2a7bd9743
Branches Tags
ljq:develop
...
compare: ljq:e8615c67969f123be65861056b6c9edefb4fd3de
Branches Tags
ljq:develop

2 Commits
151bc7c8a2 ... e8615c6796

Author SHA1 Message Date
plum
e8615c6796 feat(sdk): 迁移脚本执行系统与编辑器热更新对齐 Astral 
- Viewer.ts: enableScript setter 修复写回 options，脚本状态变量改为实例级
- Viewer.ts: 新增 InstallScriptsOptions、reinstallObjectScripts、invokeInstalledScriptEvent
- Viewer.ts: installScripts 支持 loadedScriptNames 精准触发 loaded，补充 bindDataChange 分发
- Viewer.ts: unInstallScripts 移除错误的 enableScript 提前返回守卫
- Signals.ts: 脚本信号统一改用 reinstallObjectScripts 热更新
- Signals.ts: sceneCleared 先卸载脚本再清场
- Signals.ts: registerSignal/dispose 模式防止信号泄漏
- CodeEditor.vue: Monaco 忽略 TS80002（构造函数转 class 建议）
 2026-04-09 00:43:15 +08:00
plum
d8f98ee295 feat(all): 离线包加载测试 2026-04-09 00:20:33 +08:00
10 changed files with 1877 additions and 242 deletions
Show Stats Expand all files Collapse all files

BIN
Test/1121212-offline.astral Normal file
View File

Binary file not shown.

BIN
Test/1121212.astral Normal file
View File

Binary file not shown.

BIN
Test/7ff6dd32-25b3-4eea-abdc-6f316ecd668e.astral Normal file
View File

Binary file not shown.

364
Test/index-nosplit.html Normal file
View File

@ -0,0 +1,364 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TkAstral3D 非分包离线测试</title>
<style>
:root {
--bg: #0b1020;
--panel: rgba(15, 23, 42, 0.88);
--line: rgba(148, 163, 184, 0.24);
--text: #e2e8f0;
--muted: #94a3b8;
--accent: #22c55e;
--accent-2: #38bdf8;
--danger: #f87171;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 32%),
radial-gradient(circle at top right, rgba(34, 197, 94, 0.14), transparent 28%),
linear-gradient(180deg, #0b1020, #050814 72%);
color: var(--text);
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.app {
display: grid;
grid-template-columns: 360px 1fr;
width: 100%;
height: 100%;
}
.sidebar {
padding: 20px;
border-right: 1px solid var(--line);
background: var(--panel);
backdrop-filter: blur(10px);
overflow: auto;
}
.viewer-wrap {
position: relative;
min-width: 0;
min-height: 0;
}
#viewer {
width: 100%;
height: 100%;
}
h1 {
margin: 0 0 10px;
font-size: 24px;
line-height: 1.2;
}
.desc,
.hint,
.meta,
.log {
color: var(--muted);
line-height: 1.6;
}
.desc {
margin-bottom: 16px;
font-size: 14px;
}
.card {
margin-top: 16px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(2, 6, 23, 0.36);
}
.card h2 {
margin: 0 0 10px;
font-size: 15px;
color: #f8fafc;
}
.row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: 12px;
}
button,
input[type="file"] {
font: inherit;
}
button {
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(34, 197, 94, 0.16));
color: var(--text);
cursor: pointer;
}
button.secondary {
background: rgba(15, 23, 42, 0.9);
}
input[type="file"] {
width: 100%;
color: var(--muted);
}
.status {
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(15, 23, 42, 0.72);
font-size: 13px;
white-space: pre-wrap;
}
.status.success {
border-color: rgba(34, 197, 94, 0.35);
color: #bbf7d0;
}
.status.error {
border-color: rgba(248, 113, 113, 0.35);
color: #fecaca;
}
.file-list {
margin: 10px 0 0;
padding-left: 18px;
font-size: 13px;
color: var(--muted);
}
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.18);
font-size: 12px;
color: #bae6fd;
}
@media (max-width: 900px) {
.app {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.sidebar {
border-right: 0;
border-bottom: 1px solid var(--line);
}
}
</style>
</head>
<body>
<div class="app">
<aside class="sidebar">
<h1>Tk 非分包离线测试</h1>
<div class="desc">
这个页面直接使用 Tk 构建产物来验证离线包加载。
仅支持非分包单文件模式：选择 1 个 .astral 文件加载。
</div>
<div class="row">
<span class="tag">SDK: TkAstral3D/Test/dist/astral3d.umd.js</span>
</div>
<div class="card">
<h2>选择离线包</h2>
<input id="fileInput" type="file" accept=".astral" />
<div class="row">
<button id="loadBtn">加载离线包</button>
<button id="loadLocalBtn" class="secondary">直接加载本目录</button>
<button id="resetBtn" class="secondary">重置场景</button>
</div>
<div id="status" class="status">等待选择 .astral 文件，或点击“直接加载本目录”</div>
<ul id="fileList" class="file-list"></ul>
</div>
<div class="card">
<h2>说明（非分包）</h2>
<div class="hint">
1. 仅选择一个非分包导出的 .astral 文件。\n
2. 页面使用 SDK 的 Package.unpack 直接加载，不依赖页面层 JSZip。\n
3. 也可点击“直接加载本目录”，默认读取 1121212.astral。\n
4. 建议通过本地静态服务器打开此页面，而不是直接 file:// 打开。
</div>
</div>
</aside>
<main class="viewer-wrap">
<div id="viewer"></div>
</main>
</div>
<script src="./dist/astral3d.umd.js"></script>
<script>
(function () {
const SDK = globalThis.Astral3D;
if (!SDK) {
document.getElementById("status").textContent = "Tk SDK 加载失败，请检查 astral3d.umd.js 路径";
document.getElementById("status").className = "status error";
return;
}
const viewerEl = document.getElementById("viewer");
const fileInput = document.getElementById("fileInput");
const loadBtn = document.getElementById("loadBtn");
const loadLocalBtn = document.getElementById("loadLocalBtn");
const resetBtn = document.getElementById("resetBtn");
const statusEl = document.getElementById("status");
const fileListEl = document.getElementById("fileList");
const LOCAL_SINGLE_FILE = "1121212.astral";
let viewer = null;
function setStatus(text, type) {
statusEl.textContent = text;
statusEl.className = "status" + (type ? ` ${type}` : "");
}
function ensureViewer() {
if (viewer) return viewer;
viewer = new SDK.Viewer({
container: viewerEl,
edit: { enabled: false },
grid: { enabled: true },
request: { baseUrl: "" },
});
globalThis.viewer = viewer;
return viewer;
}
function resetViewer() {
if (viewer && typeof viewer.dispose === "function") {
viewer.dispose();
}
viewer = null;
viewerEl.innerHTML = "";
setStatus("场景已重置", "success");
}
function renderFileList(files) {
fileListEl.innerHTML = "";
Array.from(files || []).forEach(file => {
const li = document.createElement("li");
li.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
fileListEl.appendChild(li);
});
}
async function loadByOfflineBundle(bundle, entryName) {
setStatus("正在准备离线包...", "");
const currentViewer = ensureViewer();
const packer = currentViewer.package || new SDK.Package(currentViewer);
currentViewer.package = packer;
setStatus(`开始加载离线包：${entryName}`, "");
await packer.unpack({
url: entryName,
offlineBundle: bundle,
offlineEntry: entryName,
onProgress: progress => {
setStatus(`离线包加载中... ${Number(progress || 0).toFixed(2)}%`, "");
},
onSceneLoad: () => {
setStatus("场景首包已解析，正在继续加载资源...", "");
},
onComplete: () => {
setStatus(`离线包加载完成：${entryName}`, "success");
},
});
}
async function fetchLocalAstralFile(name) {
const response = await fetch(`./${encodeURIComponent(name)}`);
if (!response.ok) {
throw new Error(`读取本地文件失败：${name}`);
}
const blob = await response.blob();
return new File([blob], name, { type: "application/octet-stream" });
}
function getSingleAstralFromFileList(fileList) {
const files = Array.from(fileList || []).filter(file => file.name.toLowerCase().endsWith(".astral"));
if (files.length === 0) {
throw new Error("请选择 .astral 文件");
}
if (files.length !== 1) {
throw new Error("非分包模式请只选择 1 个 .astral 文件");
}
return files[0];
}
async function loadOfflinePackage() {
try {
const file = getSingleAstralFromFileList(fileInput.files);
renderFileList([file]);
await loadByOfflineBundle(file, file.name);
} catch (error) {
console.error(error);
setStatus(`加载失败：${error && error.message ? error.message : error}`, "error");
}
}
async function loadLocalPackage() {
try {
renderFileList([{ name: LOCAL_SINGLE_FILE, size: 0 }]);
const file = await fetchLocalAstralFile(LOCAL_SINGLE_FILE);
await loadByOfflineBundle(file, LOCAL_SINGLE_FILE);
} catch (error) {
console.error(error);
setStatus(`本目录加载失败：${error && error.message ? error.message : error}`, "error");
}
}
fileInput.addEventListener("change", () => {
renderFileList(fileInput.files);
setStatus("文件已选择，点击“加载离线包”开始测试", "");
});
loadBtn.addEventListener("click", () => {
loadOfflinePackage();
});
loadLocalBtn.addEventListener("click", () => {
loadLocalPackage();
});
resetBtn.addEventListener("click", () => {
resetViewer();
});
ensureViewer();
setStatus("Tk SDK 已加载（非分包模式），等待选择离线包", "success");
})();
</script>
</body>
</html>

369
Test/index-split.html Normal file
View File

@ -0,0 +1,369 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TkAstral3D 分包离线测试</title>
<style>
:root {
--bg: #0b1020;
--panel: rgba(15, 23, 42, 0.88);
--line: rgba(148, 163, 184, 0.24);
--text: #e2e8f0;
--muted: #94a3b8;
--accent: #22c55e;
--accent-2: #38bdf8;
--danger: #f87171;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 32%),
radial-gradient(circle at top right, rgba(34, 197, 94, 0.14), transparent 28%),
linear-gradient(180deg, #0b1020, #050814 72%);
color: var(--text);
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.app {
display: grid;
grid-template-columns: 360px 1fr;
width: 100%;
height: 100%;
}
.sidebar {
padding: 20px;
border-right: 1px solid var(--line);
background: var(--panel);
backdrop-filter: blur(10px);
overflow: auto;
}
.viewer-wrap {
position: relative;
min-width: 0;
min-height: 0;
}
#viewer {
width: 100%;
height: 100%;
}
h1 {
margin: 0 0 10px;
font-size: 24px;
line-height: 1.2;
}
.desc,
.hint,
.meta,
.log {
color: var(--muted);
line-height: 1.6;
}
.desc {
margin-bottom: 16px;
font-size: 14px;
}
.card {
margin-top: 16px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(2, 6, 23, 0.36);
}
.card h2 {
margin: 0 0 10px;
font-size: 15px;
color: #f8fafc;
}
.row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: 12px;
}
button,
input[type="file"] {
font: inherit;
}
button {
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(34, 197, 94, 0.16));
color: var(--text);
cursor: pointer;
}
button.secondary {
background: rgba(15, 23, 42, 0.9);
}
input[type="file"] {
width: 100%;
color: var(--muted);
}
.status {
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(15, 23, 42, 0.72);
font-size: 13px;
white-space: pre-wrap;
}
.status.success {
border-color: rgba(34, 197, 94, 0.35);
color: #bbf7d0;
}
.status.error {
border-color: rgba(248, 113, 113, 0.35);
color: #fecaca;
}
.file-list {
margin: 10px 0 0;
padding-left: 18px;
font-size: 13px;
color: var(--muted);
}
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.18);
font-size: 12px;
color: #bae6fd;
}
@media (max-width: 900px) {
.app {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.sidebar {
border-right: 0;
border-bottom: 1px solid var(--line);
}
}
</style>
</head>
<body>
<div class="app">
<aside class="sidebar">
<h1>Tk 分包离线测试</h1>
<div class="desc">
这个页面直接使用 Tk 构建产物来验证离线包加载。
仅支持分包模式：请一次选择多个 .astral 文件并加载。
</div>
<div class="row">
<span class="tag">SDK: TkAstral3D/Test/dist/astral3d.umd.js</span>
</div>
<div class="card">
<h2>选择离线包</h2>
<input id="fileInput" type="file" multiple accept=".astral" />
<div class="row">
<button id="loadBtn">加载离线包</button>
<button id="loadLocalBtn" class="secondary">直接加载本目录</button>
<button id="resetBtn" class="secondary">重置场景</button>
</div>
<div id="status" class="status">等待选择 .astral 文件，或点击“直接加载本目录”</div>
<ul id="fileList" class="file-list"></ul>
</div>
<div class="card">
<h2>说明（分包）</h2>
<div class="hint">
1. 请选择导出的全部分包 .astral 文件。\n
2. 至少包含入口包和依赖包后再点击加载。\n
3. 也可点击“直接加载本目录”，默认读取 1121212.astral + 7ff6dd32-25b3-4eea-abdc-6f316ecd668e.astral。\n
4. 建议通过本地静态服务器打开此页面，而不是直接 file:// 打开。
</div>
</div>
</aside>
<main class="viewer-wrap">
<div id="viewer"></div>
</main>
</div>
<script src="./dist/astral3d.umd.js"></script>
<script>
(function () {
const SDK = globalThis.Astral3D;
if (!SDK) {
document.getElementById("status").textContent = "Tk SDK 加载失败，请检查 astral3d.umd.js 路径";
document.getElementById("status").className = "status error";
return;
}
const viewerEl = document.getElementById("viewer");
const fileInput = document.getElementById("fileInput");
const loadBtn = document.getElementById("loadBtn");
const loadLocalBtn = document.getElementById("loadLocalBtn");
const resetBtn = document.getElementById("resetBtn");
const statusEl = document.getElementById("status");
const fileListEl = document.getElementById("fileList");
const LOCAL_SPLIT_FILES = [
"1121212.astral",
"7ff6dd32-25b3-4eea-abdc-6f316ecd668e.astral",
];
let viewer = null;
function setStatus(text, type) {
statusEl.textContent = text;
statusEl.className = "status" + (type ? ` ${type}` : "");
}
function guessEntryFile(files) {
const uuidReg = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
const findBaseName = name => name.replace(/\.[^.]+$/, "");
return files.find(file => !uuidReg.test(findBaseName(file.name))) || files[0];
}
function ensureViewer() {
if (viewer) return viewer;
viewer = new SDK.Viewer({
container: viewerEl,
edit: { enabled: false },
grid: { enabled: true },
request: { baseUrl: "" },
});
globalThis.viewer = viewer;
return viewer;
}
function resetViewer() {
if (viewer && typeof viewer.dispose === "function") {
viewer.dispose();
}
viewer = null;
viewerEl.innerHTML = "";
setStatus("场景已重置", "success");
}
function renderFileList(files) {
fileListEl.innerHTML = "";
Array.from(files || []).forEach(file => {
const li = document.createElement("li");
li.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
fileListEl.appendChild(li);
});
}
async function loadByOfflineFiles(files, entryName) {
setStatus(`开始加载离线包：${entryName}`, "");
const currentViewer = ensureViewer();
const packer = currentViewer.package || new SDK.Package(currentViewer);
currentViewer.package = packer;
await packer.unpack({
url: entryName,
offlineFiles: files,
offlineEntry: entryName,
onProgress: progress => {
setStatus(`离线包加载中... ${Number(progress || 0).toFixed(2)}%`, "");
},
onSceneLoad: () => {
setStatus("场景首包已解析，正在继续加载资源...", "");
},
onComplete: () => {
setStatus(`离线包加载完成：${entryName}`, "success");
},
});
}
async function fetchLocalAstralFile(name) {
const response = await fetch(`./${encodeURIComponent(name)}`);
if (!response.ok) {
throw new Error(`读取本地文件失败：${name}`);
}
const blob = await response.blob();
return new File([blob], name, { type: "application/octet-stream" });
}
async function loadOfflinePackage() {
const files = Array.from(fileInput.files || []).filter(f => f.name.toLowerCase().endsWith(".astral"));
if (files.length < 2) {
setStatus("分包模式请至少选择 2 个 .astral 文件", "error");
return;
}
renderFileList(files);
try {
const entry = guessEntryFile(files);
await loadByOfflineFiles(files, entry.name);
} catch (error) {
console.error(error);
setStatus(`加载失败：${error && error.message ? error.message : error}`, "error");
}
}
async function loadLocalPackages() {
try {
renderFileList(LOCAL_SPLIT_FILES.map(name => ({ name, size: 0 })));
const files = [];
for (const name of LOCAL_SPLIT_FILES) {
files.push(await fetchLocalAstralFile(name));
}
await loadByOfflineFiles(files, LOCAL_SPLIT_FILES[0]);
} catch (error) {
console.error(error);
setStatus(`本目录加载失败：${error && error.message ? error.message : error}`, "error");
}
}
fileInput.addEventListener("change", () => {
renderFileList(fileInput.files);
setStatus("文件已选择，点击“加载离线包”开始测试", "");
});
loadBtn.addEventListener("click", () => {
loadOfflinePackage();
});
loadLocalBtn.addEventListener("click", () => {
loadLocalPackages();
});
resetBtn.addEventListener("click", () => {
resetViewer();
});
ensureViewer();
setStatus("Tk SDK 已加载（分包模式），等待选择离线包", "success");
})();
</script>
</body>
</html>

425
Test/index.html Normal file
View File

@ -0,0 +1,425 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TkAstral3D Offline Package Test</title>
<style>
:root {
--bg: #0b1020;
--panel: rgba(15, 23, 42, 0.88);
--line: rgba(148, 163, 184, 0.24);
--text: #e2e8f0;
--muted: #94a3b8;
--accent: #22c55e;
--accent-2: #38bdf8;
--danger: #f87171;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 32%),
radial-gradient(circle at top right, rgba(34, 197, 94, 0.14), transparent 28%),
linear-gradient(180deg, #0b1020, #050814 72%);
color: var(--text);
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.app {
display: grid;
grid-template-columns: 360px 1fr;
width: 100%;
height: 100%;
}
.sidebar {
padding: 20px;
border-right: 1px solid var(--line);
background: var(--panel);
backdrop-filter: blur(10px);
overflow: auto;
}
.viewer-wrap {
position: relative;
min-width: 0;
min-height: 0;
}
#viewer {
width: 100%;
height: 100%;
}
h1 {
margin: 0 0 10px;
font-size: 24px;
line-height: 1.2;
}
.desc,
.hint,
.meta,
.log {
color: var(--muted);
line-height: 1.6;
}
.desc {
margin-bottom: 16px;
font-size: 14px;
}
.card {
margin-top: 16px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(2, 6, 23, 0.36);
}
.card h2 {
margin: 0 0 10px;
font-size: 15px;
color: #f8fafc;
}
.row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: 12px;
}
button,
input[type="file"] {
font: inherit;
}
button {
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(34, 197, 94, 0.16));
color: var(--text);
cursor: pointer;
}
button.secondary {
background: rgba(15, 23, 42, 0.9);
}
input[type="file"] {
width: 100%;
color: var(--muted);
}
.status {
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(15, 23, 42, 0.72);
font-size: 13px;
white-space: pre-wrap;
}
.status.success {
border-color: rgba(34, 197, 94, 0.35);
color: #bbf7d0;
}
.status.error {
border-color: rgba(248, 113, 113, 0.35);
color: #fecaca;
}
.file-list {
margin: 10px 0 0;
padding-left: 18px;
font-size: 13px;
color: var(--muted);
}
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.18);
font-size: 12px;
color: #bae6fd;
}
@media (max-width: 900px) {
.app {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.sidebar {
border-right: 0;
border-bottom: 1px solid var(--line);
}
}
</style>
</head>
<body>
<div class="app">
<aside class="sidebar">
<h1>Tk 离线包测试</h1>
<div class="desc">
这个页面直接使用 Tk 构建产物来验证离线包加载。
支持单包与多包 .astral 文件，直接通过 SDK 的离线参数加载，不依赖编辑器页面。
</div>
<div class="row">
<span class="tag">SDK: TkAstral3D/Test/dist/astral3d.umd.js</span>
</div>
<div class="card">
<h2>选择离线包</h2>
<input id="fileInput" type="file" multiple accept=".astral" />
<div class="row">
<button id="loadBtn">加载离线包</button>
<button id="loadLocalSplitBtn" class="secondary">直接加载本目录（分包）</button>
<button id="loadLocalSingleBtn" class="secondary">直接加载本目录（单包）</button>
<button id="resetBtn" class="secondary">重置场景</button>
</div>
<div id="status" class="status">等待选择 .astral 文件，或使用“直接加载本目录”</div>
<ul id="fileList" class="file-list"></ul>
</div>
<div class="card">
<h2>说明</h2>
<div class="hint">
1. 多包模式：直接选中全部 .astral 文件后加载。\n
2. 单包模式：只需要选择导出的单个 .astral 文件。\n
3. 本目录快捷加载：分包=1121212.astral + 7ff6dd32-25b3-4eea-abdc-6f316ecd668e.astral；单包=1121212.astral。\n
4. 建议通过本地静态服务器打开此页面，而不是直接 file:// 打开。
</div>
</div>
</aside>
<main class="viewer-wrap">
<div id="viewer"></div>
</main>
</div>
<script src="./dist/astral3d.umd.js"></script>
<script>
(function () {
const SDK = globalThis.Astral3D;
if (!SDK) {
document.getElementById("status").textContent = "Tk SDK 加载失败，请检查 astral3d.umd.js 路径";
document.getElementById("status").className = "status error";
return;
}
const viewerEl = document.getElementById("viewer");
const fileInput = document.getElementById("fileInput");
const loadBtn = document.getElementById("loadBtn");
const loadLocalSplitBtn = document.getElementById("loadLocalSplitBtn");
const loadLocalSingleBtn = document.getElementById("loadLocalSingleBtn");
const resetBtn = document.getElementById("resetBtn");
const statusEl = document.getElementById("status");
const fileListEl = document.getElementById("fileList");
const LOCAL_SPLIT_FILES = [
"1121212.astral",
"7ff6dd32-25b3-4eea-abdc-6f316ecd668e.astral",
];
const LOCAL_SINGLE_FILE = "1121212-offline.astral";
let viewer = null;
function setStatus(text, type) {
statusEl.textContent = text;
statusEl.className = "status" + (type ? ` ${type}` : "");
}
function guessEntryFile(files) {
const uuidReg = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
return files.find(f => !uuidReg.test(f.name.replace(/\.[^.]+$/, ""))) || files[0];
}
function ensureViewer() {
if (viewer) return viewer;
viewer = new SDK.Viewer({
container: viewerEl,
edit: { enabled: false },
grid: { enabled: true },
request: { baseUrl: "" },
});
globalThis.viewer = viewer;
return viewer;
}
function resetViewer() {
if (viewer && typeof viewer.dispose === "function") {
viewer.dispose();
}
viewer = null;
viewerEl.innerHTML = "";
setStatus("场景已重置", "success");
}
function renderFileList(files) {
fileListEl.innerHTML = "";
Array.from(files || []).forEach(file => {
const li = document.createElement("li");
li.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
fileListEl.appendChild(li);
});
}
async function loadByOfflineFiles(files, entryName) {
setStatus(`开始加载离线包：${entryName}`, "");
const currentViewer = ensureViewer();
const packer = currentViewer.package || new SDK.Package(currentViewer);
currentViewer.package = packer;
await packer.unpack({
url: entryName,
offlineFiles: files,
offlineEntry: entryName,
onProgress: progress => {
setStatus(`离线包加载中... ${Number(progress || 0).toFixed(2)}%`, "");
},
onSceneLoad: () => {
setStatus("场景首包已解析，正在继续加载资源...", "");
},
onComplete: () => {
setStatus(`离线包加载完成：${entryName}`, "success");
},
});
}
async function loadByOfflineBundle(bundle, entryName) {
setStatus(`开始加载离线包：${entryName}`, "");
const currentViewer = ensureViewer();
const packer = currentViewer.package || new SDK.Package(currentViewer);
currentViewer.package = packer;
console.log({
url: "/",
offlineBundle: bundle,
offlineEntry: entryName,
onProgress: progress => {
setStatus(`离线包加载中... ${Number(progress || 0).toFixed(2)}%`, "");
},
onSceneLoad: () => {
setStatus("场景首包已解析，正在继续加载资源...", "");
},
onComplete: () => {
setStatus(`离线包加载完成：${entryName}`, "success");
},
})
await packer.unpack({
url: "/",
offlineBundle: bundle,
offlineEntry: entryName,
onProgress: progress => {
setStatus(`离线包加载中... ${Number(progress || 0).toFixed(2)}%`, "");
},
onSceneLoad: () => {
setStatus("场景首包已解析，正在继续加载资源...", "");
},
onComplete: () => {
setStatus(`离线包加载完成：${entryName}`, "success");
},
});
}
async function fetchLocalAstralFile(name) {
const response = await fetch(`./${encodeURIComponent(name)}`);
if (!response.ok) {
throw new Error(`读取本地文件失败：${name}`);
}
const blob = await response.blob();
return new File([blob], name, { type: "application/octet-stream" });
}
async function loadOfflinePackage() {
const files = Array.from(fileInput.files || []).filter(f => f.name.toLowerCase().endsWith(".astral"));
if (files.length === 0) {
setStatus("请选择 .astral 文件", "error");
return;
}
renderFileList(files);
try {
if (files.length === 1) {
await loadByOfflineBundle(files[0], files[0].name);
} else {
const entry = guessEntryFile(files);
await loadByOfflineFiles(files, entry.name);
}
} catch (error) {
console.error(error);
setStatus(`加载失败：${error && error.message ? error.message : error}`, "error");
}
}
async function loadLocalSplitPackage() {
try {
renderFileList(LOCAL_SPLIT_FILES.map(name => ({ name, size: 0 })));
const files = [];
for (const name of LOCAL_SPLIT_FILES) {
files.push(await fetchLocalAstralFile(name));
}
await loadByOfflineFiles(files, LOCAL_SPLIT_FILES[0]);
} catch (error) {
console.error(error);
setStatus(`本目录分包加载失败：${error && error.message ? error.message : error}`, "error");
}
}
async function loadLocalSinglePackage() {
try {
renderFileList([{ name: LOCAL_SINGLE_FILE, size: 0 }]);
const file = await fetchLocalAstralFile(LOCAL_SINGLE_FILE);
await loadByOfflineBundle(file, LOCAL_SINGLE_FILE);
} catch (error) {
console.error(error);
setStatus(`本目录单包加载失败：${error && error.message ? error.message : error}`, "error");
}
}
fileInput.addEventListener("change", () => {
renderFileList(fileInput.files);
setStatus("文件已选择，点击“加载离线包”开始测试", "");
});
loadBtn.addEventListener("click", () => {
loadOfflinePackage();
});
loadLocalSplitBtn.addEventListener("click", () => {
loadLocalSplitPackage();
});
loadLocalSingleBtn.addEventListener("click", () => {
loadLocalSinglePackage();
});
resetBtn.addEventListener("click", () => {
resetViewer();
});
ensureViewer();
setStatus("Tk SDK 已加载，等待选择离线包", "success");
})();
</script>
</body>
</html>

1
packages/editor/src/components/code/CodeEditor.vue
View File

@ -78,6 +78,7 @@ async function initMonaco() {
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false,
diagnosticCodesToIgnore: [80002],
});
// 如果使用 Webpack 或其他打包工具，可以使用 importScripts
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({

648
packages/sdk/lib/core/loader/Package.ts
View File

@ -5,7 +5,7 @@
* @update 2025-02-14
* @version 5.0.0
*/
import { Mesh, Group, Bone } from "three";
import { Mesh, Group, Bone, Object3D, Texture } from "three";
import JSZip from "jszip";
import { strToU8 } from 'three/examples/jsm/libs/fflate.module.js';
import { BASE64_TYPES, TYPED_ARRAYS } from "@/constant";
@ -123,6 +123,7 @@ export class Package {
private textureMap: Map<string, any>;
private callFunNum: { value: number; };
private skeletonClass: PackageSkeleton;
private dataComponentMap: Record<string, any> | null = null;
// 离线包相关属性
// @ts-ignore
@ -202,6 +203,15 @@ export class Package {
* @returns {string} 返回贴图存储文件名称
*/
handleImage(imageJson:ITHREEScene.ImageJSON, zipData:SourceData[]): string {
if (imageJson.url && typeof imageJson.url === "object" && !imageJson.url.type) {
const ktx2Data = (imageJson.url as any).ktx2OriginalData;
if (ktx2Data) {
const name = imageJson.uuid + `.ktx2`;
zipData.push({ name, texture: ktx2Data });
return name;
}
}
if (typeof imageJson.url === "string") {
const name = imageJson.uuid + `.${BASE64_TYPES[imageJson.url.split(",")[0]]}`;
zipData.push({ name, texture: imageJson.url });
@ -221,6 +231,22 @@ export class Package {
return name;
}
private findTextureByImageUuid(mesh: Mesh, imageUuid: string): Texture | null {
if (!mesh.material) return null;
const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
for (const material of materials) {
for (const key in material) {
const value = (material as any)[key];
if (value && value.isTexture && value.source?.uuid === imageUuid) {
return value as Texture;
}
}
}
return null;
}
/**
* 处理 mesh json
* @param mesh
@ -252,6 +278,12 @@ export class Package {
!json.images && (json.images = []);
const texture = this.findTextureByImageUuid(mesh, image.uuid);
const textureMeta = (texture as any)?.metadata;
if (textureMeta?.isKTX2 && textureMeta?.ktx2OriginalData && typeof image.url === "object") {
(image.url as any).ktx2OriginalData = textureMeta.ktx2OriginalData;
}
const name = this.handleImage(image, zipData)
if(name){
json.images.push(name);
@ -314,6 +346,60 @@ export class Package {
}
}
private sanitizeDataComponentList(list: any) {
if (!Array.isArray(list) || list.length === 0) return null;
return list.map((entry) => {
if (!entry || typeof entry !== "object") return entry;
const config = entry.config && typeof entry.config === "object" ? { ...entry.config } : entry.config;
return { ...entry, config, data: null };
});
}
private collectDataComponentMap(root: Object3D) {
const map: Record<string, any> = {};
const condition = (obj: any) => !obj.ignore;
const visit = (obj: any) => {
const sanitized = this.sanitizeDataComponentList(obj?.dataComponent);
if (sanitized) {
map[obj.uuid] = sanitized;
}
};
if (typeof (root as any).traverseByCondition === "function") {
(root as any).traverseByCondition(visit, condition);
} else {
root.traverse((obj: any) => {
if (!condition(obj)) return;
visit(obj);
});
}
return map;
}
private applyDataComponentMap(root: Object3D) {
const map = this.dataComponentMap;
if (!map || Object.keys(map).length === 0) return;
const condition = (obj: any) => !obj.ignore;
const apply = (obj: any) => {
if (!Object.prototype.hasOwnProperty.call(map, obj.uuid)) return;
const sanitized = this.sanitizeDataComponentList(map[obj.uuid]);
if (sanitized) {
obj.dataComponent = sanitized;
}
};
if (typeof (root as any).traverseByCondition === "function") {
(root as any).traverseByCondition(apply, condition);
} else {
root.traverse((obj: any) => {
if (!condition(obj)) return;
apply(obj);
});
}
}
/**
* 按 group 分组各打包为1个zip文件
* @param {IPackConfig} packConfig
@ -422,6 +508,14 @@ export class Package {
console.log(sceneZipData,drawingInfo)
}
const dataComponents = this.collectDataComponentMap(this.viewer.scene);
if (Object.keys(dataComponents).length > 0) {
sceneZipData.push({
name: "data_components.json",
json: JSON.stringify(dataComponents)
});
}
// 项目配置
sceneZipData.push({
name: "config.json",
@ -430,6 +524,8 @@ export class Package {
xr: App.project.getKey("xr"),
// 项目渲染器配置
renderer: App.project.getKey("renderer"),
// BVH 配置
bvh: App.project.getKey("bvh"),
// 项目级联阴影映射
csm: App.project.getKey("csm"),
// 项目后处理配置
@ -712,16 +808,170 @@ export class Package {
}
}
private decodeUint8Text(data: Uint8Array): string {
return new TextDecoder().decode(data);
}
private parseOfflineManifest(unzipped: Record<string, Uint8Array>): any | null {
const manifestData = unzipped["offline.json"];
if (!manifestData) return null;
try {
return JSON.parse(this.decodeUint8Text(manifestData));
} catch {
return null;
}
}
private buildOfflineFlatPackages(unzipped: Record<string, Uint8Array>, packagesPrefix: string): Map<string, Record<string, Uint8Array>> {
const prefix = packagesPrefix.endsWith("/") ? packagesPrefix : `${packagesPrefix}/`;
const map = new Map<string, Record<string, Uint8Array>>();
for (const [name, data] of Object.entries(unzipped)) {
if (name === "offline.json") continue;
if (!name.startsWith(prefix)) continue;
const rest = name.slice(prefix.length);
const splitIndex = rest.indexOf("/");
if (splitIndex <= 0) continue;
const baseName = rest.slice(0, splitIndex);
const innerPath = rest.slice(splitIndex + 1);
if (!innerPath) continue;
let pkg = map.get(baseName);
if (!pkg) {
pkg = {};
map.set(baseName, pkg);
}
pkg[innerPath] = data;
}
return map;
}
private async unzipJsZipToMap(zipInput: Blob | ArrayBuffer | Uint8Array): Promise<Record<string, Uint8Array>> {
const jszip = new JSZip();
const zipRes = await jszip.loadAsync(zipInput as any);
const out: Record<string, Uint8Array> = {};
for (const key in zipRes.files) {
if (zipRes.files[key].dir) continue;
const fileName = zipRes.files[key].name;
const content = await zipRes.file(fileName)?.async("uint8array");
if (content) out[fileName] = content;
}
return out;
}
private async buildOfflinePackageMapFromFiles(files: File[]): Promise<Map<string, Uint8Array>> {
const map = new Map<string, Uint8Array>();
for (const file of files) {
const buffer = new Uint8Array(await file.arrayBuffer());
const normalized = this.normalizeOfflinePackageName(file.name);
map.set(normalized, buffer);
const uuid = this.extractUuidFromName(file.name);
if (uuid) {
const canonical = this.normalizeOfflinePackageName(uuid.toLowerCase());
if (!map.has(canonical)) {
map.set(canonical, buffer);
}
}
}
return map;
}
private async initOfflineSource(unpackConfig: IUnpackConfig): Promise<void> {
this.isOfflineImportContext = Boolean(unpackConfig.offlineBundle || (unpackConfig.offlineFiles && unpackConfig.offlineFiles.length > 0));
this.offlineZipMap = null;
this.offlineEntryZip = null;
this.offlineFlatPackages = null;
this.offlineFlatEntryBase = null;
const setupFlat = (unzipped: Record<string, Uint8Array>, manifest?: any, fallbackEntry?: string) => {
const packagesPrefix = manifest?.packagesPrefix || this.offlinePackagesPrefix;
this.offlineFlatPackages = this.buildOfflineFlatPackages(unzipped, packagesPrefix);
const entryName = manifest?.entry
? this.normalizeOfflinePackageName(String(manifest.entry))
: (fallbackEntry ? this.normalizeOfflinePackageName(fallbackEntry) : undefined);
const entryBase = manifest?.entryBase || (entryName ? this.getOfflinePackageBaseName(entryName) : undefined);
if (entryBase) this.offlineFlatEntryBase = entryBase;
if (entryName) this.offlineEntryZip = entryName;
};
if (unpackConfig.offlineBundle) {
let u8: Uint8Array;
if (unpackConfig.offlineBundle instanceof Uint8Array) {
u8 = unpackConfig.offlineBundle;
} else if (unpackConfig.offlineBundle instanceof ArrayBuffer) {
u8 = new Uint8Array(unpackConfig.offlineBundle);
} else {
u8 = new Uint8Array(await unpackConfig.offlineBundle.arrayBuffer());
}
const unzipped = await this.unzipJsZipToMap(u8);
const manifest = this.parseOfflineManifest(unzipped);
if (manifest?.mode === "single") {
setupFlat(unzipped, manifest);
return;
}
const map = new Map<string, Uint8Array>();
for (const [name, data] of Object.entries(unzipped)) {
if (name === "offline.json") continue;
if (name.toLowerCase().endsWith(".astral")) {
map.set(this.normalizeOfflinePackageName(name), data);
}
}
this.offlineZipMap = map;
if (manifest?.entry) {
this.offlineEntryZip = this.normalizeOfflinePackageName(String(manifest.entry));
} else if (unpackConfig.offlineEntry) {
this.offlineEntryZip = this.normalizeOfflinePackageName(unpackConfig.offlineEntry);
}
} else if (unpackConfig.offlineFiles && unpackConfig.offlineFiles.length > 0) {
if (unpackConfig.offlineFiles.length === 1) {
const file = unpackConfig.offlineFiles[0];
try {
const unzipped = await this.unzipJsZipToMap(await file.arrayBuffer());
const manifest = this.parseOfflineManifest(unzipped);
if (manifest?.mode === "single") {
setupFlat(unzipped, manifest, file.name);
return;
}
} catch (err) {
// 兼容直接传入 .astral 分包文件的场景，忽略单包探测失败
}
}
this.offlineZipMap = await this.buildOfflinePackageMapFromFiles(unpackConfig.offlineFiles);
if (unpackConfig.offlineEntry) {
this.offlineEntryZip = this.normalizeOfflinePackageName(unpackConfig.offlineEntry);
}
}
if (this.offlineZipMap && !this.offlineEntryZip) {
this.offlineEntryZip = this.normalizeOfflinePackageName(unpackConfig.url);
}
}
/**
* 从首包开始解包
* @param {IUnpackConfig} unpackConfig
*/
public unpack(unpackConfig: IUnpackConfig) {
public async unpack(unpackConfig: IUnpackConfig) {
unpackConfig.onProgress && unpackConfig.onProgress(0);
let totalZipNumber = 0, progress = 0;
const match = unpackConfig.url.match( /(.*[\\/])?([a-zA-Z0-9]+-V\d+)(?=[\\/]|$)/);
this.prefix_url = this.viewer.options.request?.baseUrl + (match ? match[0] : unpackConfig.url.substring(0, unpackConfig.url.lastIndexOf("/")));
await this.initOfflineSource(unpackConfig);
if (!this.offlineZipMap && !this.offlineFlatPackages) {
const match = unpackConfig.url.match( /(.*[\\/])?([a-zA-Z0-9]+-V\d+)(?=[\\/]|$)/);
this.prefix_url = this.viewer.options.request?.baseUrl + (match ? match[0] : unpackConfig.url.substring(0, unpackConfig.url.lastIndexOf("/")));
} else {
this.prefix_url = "";
}
// indexDb存储
// const db = window.VIEWPORT.modules["db"];
@ -743,6 +993,11 @@ export class Package {
that.imagesMap.clear();
that.materialsMap.clear();
that.textureMap.clear();
that.offlineZipMap = null;
that.offlineEntryZip = null;
that.offlineFlatPackages = null;
that.offlineFlatEntryBase = null;
that.dataComponentMap = null;
// @ts-ignore 清除loader
that.loader = undefined;
}
@ -806,6 +1061,11 @@ export class Package {
App.FPS = Number(configJson.renderer.fps);
}
const bvhConfig = (configJson as any)?.bvh;
if (bvhConfig) {
App.project.setKey("bvh", bvhConfig);
}
if(configJson.csm){
const projectCSM = App.project.getKey("csm");
let _csmNotChange = true;
@ -859,6 +1119,9 @@ export class Package {
unpackConfig.onSceneLoad && unpackConfig.onSceneLoad(sceneJson, configJson);
this.applyDataComponentMap(App.scene as unknown as Object3D);
this.dataComponentMap = null;
// 防止项目只有一个包的情况造成不触发proxy set
if (this.callFunNum.value === 0) {
this.callFunNum.value = 0;
@ -872,15 +1135,12 @@ export class Package {
})
}
const networkGet = () => {
// 下载场景包
fetch(this.viewer.options.request?.baseUrl + unpackConfig.url)
.then(zipRes => zipRes.blob())
.then(async (file) => {
const parseSceneZip = async (file: Blob | Uint8Array | ArrayBuffer) => {
unpackConfig.onProgress && unpackConfig.onProgress(1);
// @ts-ignore
let sceneJson: ISceneJson = undefined, configJson: IAppProject.Config = undefined;
let dataComponentMap: Record<string, any> | null = null;
// 开始解压首包
const zip = new JSZip();
@ -898,7 +1158,7 @@ export class Package {
}
}
const res = await zip.loadAsync(file);
const res = await zip.loadAsync(file as any);
/**
* res.files里包含整个zip里的文件描述、目录描述列表
@ -917,6 +1177,9 @@ export class Package {
} else if (fileName === "config.json") { // 项目配置json
const content = await res.file(fileName)?.async('string') as string;
configJson = JSON.parse(content);
} else if (fileName === "data_components.json") {
const content = await res.file(fileName)?.async('string') as string;
dataComponentMap = JSON.parse(content);
} else if (fileName.substring(0, 9) === "Textures/") {
/**
* 贴图
@ -928,6 +1191,11 @@ export class Package {
// 转换回贴图原始信息，存入map
const content = await res.file(fileName)?.async('arraybuffer');
this.unGzipImage(fileName.replace("Textures/", ""), content);
} else if (/\.ktx2$/i.test(fileName)) {
const content = await res.file(fileName)?.async('arraybuffer') as ArrayBuffer;
const blob = new Blob([content], { type: "image/ktx2" });
const blobUrl = URL.createObjectURL(blob) + `#${fileName.replace("Textures/", "")}`;
this.unGzipImage(fileName.replace("Textures/", ""), blobUrl);
} else {
const content = await res.file(fileName)?.async('string')
this.unGzipImage(fileName.replace("Textures/", ""), content);
@ -964,6 +1232,7 @@ export class Package {
}
totalZipNumber = sceneJson.totalZipNumber || 0;
this.dataComponentMap = dataComponentMap;
// 贴图还原至sceneJson
sceneJson.scene.images = sceneJson.scene.images.map((item) => {
@ -1003,12 +1272,42 @@ export class Package {
// 解压处理好的数据添加至 indexDB -> Msy3D -> scene
// db.setItem(dbKey, sceneJson);
})
}
const networkGet = async () => {
if (this.offlineFlatPackages) {
const entryBase = this.offlineFlatEntryBase || this.getOfflinePackageBaseName(this.offlineEntryZip || unpackConfig.url);
const entry = this.offlineFlatPackages.get(entryBase);
if (!entry) {
console.error(`[Package] 离线包缺少首包内容: ${entryBase}`);
return;
}
const zipData = await this.zipRawFiles(entry);
await parseSceneZip(zipData);
return;
}
if (this.offlineZipMap) {
const entryName = this.offlineEntryZip || this.normalizeOfflinePackageName(unpackConfig.url);
const zipData = this.offlineZipMap.get(entryName);
if (!zipData) {
console.error(`[Package] 离线包缺少首包: ${entryName}`);
return;
}
await parseSceneZip(zipData);
return;
}
// 下载场景包
const file = await fetch(this.viewer.options.request?.baseUrl + unpackConfig.url).then(zipRes => zipRes.blob());
await parseSceneZip(file);
}
// db.getItem(dbKey).then((dbData) => {
// if (dbData === undefined) {
networkGet();
await networkGet();
// }else{
// this.recordUuid(dbData.scene);
//
@ -1044,6 +1343,8 @@ export class Package {
const check = (object, group) => {
// 检查数据是否已完善
let isDone = true;
const useMaterials = new Set<string>();
object.children.forEach((child) => {
// 检查几何数据是否都已拥有
if (child.geometry && group.geometries?.findIndex((geometry) => geometry.uuid === child.geometry) === -1) {
@ -1055,30 +1356,9 @@ export class Package {
}
// material->texture->image
if (child.material && group.materials?.findIndex((material) => material.uuid === child.material) === -1) {
if (!this.materialsMap.has(child.material)) {
isDone = false;
} else {
group.materials.push(this.materialsMap.get(child.material));
const material = this.materialsMap.get(child.material);
if (material.map && group.textures?.findIndex((texture) => texture.uuid === material.map) === -1) {
if (!this.textureMap.has(material.map)) {
isDone = false;
} else {
group.textures.push(this.textureMap.get(material.map));
const texture = this.textureMap.get(material.map);
if (texture.image && group.images?.findIndex((image) => image.uuid === texture.image) === -1) {
if (!this.imagesMap.has(texture.image)) {
isDone = false;
} else {
group.images.push(this.imagesMap.get(texture.image));
}
}
}
}
}
if (child.material) {
const materialUUIDs = Array.isArray(child.material) ? child.material : [child.material];
materialUUIDs.forEach((materialUuid) => useMaterials.add(materialUuid));
}
if (child.children?.length > 0 && isDone) {
@ -1086,6 +1366,68 @@ export class Package {
}
})
if (!isDone) return isDone;
const useTextures = new Set<string>();
const textureFields = [
"map", "alphaMap", "aoMap", "anisotropyMap", "bumpMap", "clearcoatMap", "clearcoatNormalMap", "clearcoatRoughnessMap",
"displacementMap", "envMap", "emissiveMap", "iridescenceMap", "iridescenceThicknessMap", "lightMap", "sheenColorMap",
"sheenRoughnessMap", "specularColorMap", "specularIntensityMap", "specularMap", "thicknessMap", "transmissionMap",
"metalnessMap", "roughnessMap", "normalMap", "gradientMap"
];
useMaterials.forEach((materialUuid) => {
if (!isDone) return;
const material = this.materialsMap.get(materialUuid);
if (!material) {
isDone = false;
return;
}
if (group.materials?.findIndex((item) => item.uuid === materialUuid) === -1) {
group.materials.push(material);
}
textureFields.forEach((field) => {
const textureUuid = material[field];
if (textureUuid) useTextures.add(textureUuid);
});
});
if (!isDone) return isDone;
const useImages = new Set<string>();
useTextures.forEach((textureUuid) => {
if (!isDone) return;
const texture = this.textureMap.get(textureUuid);
if (!texture) {
isDone = false;
return;
}
if (group.textures?.findIndex((item) => item.uuid === textureUuid) === -1) {
group.textures.push(texture);
}
if (texture.image) useImages.add(texture.image);
});
if (!isDone) return isDone;
useImages.forEach((imageUuid) => {
if (!isDone) return;
if (!this.imagesMap.has(imageUuid)) {
isDone = false;
return;
}
if (group.images?.findIndex((item) => item.uuid === imageUuid) === -1) {
group.images.push(this.imagesMap.get(imageUuid));
}
});
return isDone;
}
@ -1132,112 +1474,135 @@ export class Package {
}
}
const parseGroupZip = async (file: Blob | Uint8Array | ArrayBuffer) => {
const zip = new JSZip();
let json: GroupJson;
// 几何数据数组
let geometries: Array<any> = [];
const unzipDone = () => {
// 贴图还原至sceneJson
json.images = json.images.map((item) => {
const nameSplit = item.split(".");
if (nameSplit[1] === "env") {
const urlSplit = nameSplit[0].split("!");
return this.imagesMap.get(urlSplit[3])
} else {
return this.imagesMap.get(nameSplit[0])
}
});
// 几何数据还原至sceneJson
json.geometries = geometries;
this.recordUuid(json);
// 遍历children,拉取group zip还原
const children: any = [];
json.object.children.forEach((childUuid) => {
if (typeof childUuid === "string") {
// 保存uuid对应的function
funcMap.set(childUuid, this.unpackGroup);
this.callFunNum.value++;
} else {
children.push(childUuid)
}
})
json.object.children = children;
parse(json);
}
const res = await zip.loadAsync(file as any);
let num = new Proxy({ value: Object.keys(res.files).length }, {
set(target, p, value) {
target[p] = value;
if (value === 0) {
unzipDone();
}
return true;
}
})
for (let key in res.files) {
//判断是否是目录
if (!res.files[key].dir) {
const fileName = res.files[key].name;
//找到我们压缩包所需要的json文件
if (fileName === `${uuid}.json`) { // 场景json
res.file(fileName)?.async('string').then(content => {
json = JSON.parse(content);
num.value--;
})
} else if (fileName.substring(0, 9) === "Textures/") {
if (/\.env$/.test(fileName)) {
// 转换回贴图原始信息，存入map
res.file(fileName)?.async('arraybuffer').then(content => {
this.unGzipImage(fileName.replace("Textures/", ""), content);
num.value--;
})
} else if (/\.ktx2$/i.test(fileName)) {
res.file(fileName)?.async('arraybuffer').then(content => {
const blob = new Blob([content], { type: "image/ktx2" });
const blobUrl = URL.createObjectURL(blob) + `#${fileName.replace("Textures/", "")}`;
this.unGzipImage(fileName.replace("Textures/", ""), blobUrl);
num.value--;
})
} else {
res.file(fileName)?.async('string').then(content => {
this.unGzipImage(fileName.replace("Textures/", ""), content);
num.value--;
})
}
} else if (/^Geometries\/geometries_\d*\.json$/.test(fileName)) {
res.file(fileName)?.async('string').then(content => {
geometries.push(...this.unGzipGeometryJson(JSON.parse(content)));
num.value--;
})
} else {
num.value--;
}
} else {
num.value--;
}
}
}
const getByNetwork = () => {
if (this.offlineFlatPackages) {
const entry = this.offlineFlatPackages.get(uuid);
if (!entry) {
console.error(`[Package] 离线包缺少分包内容: ${uuid}`);
this.callFunNum.value--;
return;
}
this.zipRawFiles(entry).then((zipData) => {
parseGroupZip(zipData);
});
return;
}
if (this.offlineZipMap) {
const fileName = this.normalizeOfflinePackageName(uuid);
const normalizedLowerName = this.normalizeOfflinePackageName(uuid.toLowerCase());
const zipData = this.offlineZipMap.get(fileName) || this.offlineZipMap.get(normalizedLowerName);
if (!zipData) {
console.error(`[Package] 离线包缺少分包: ${fileName}`);
this.callFunNum.value--;
return;
}
parseGroupZip(zipData);
return;
}
Package._fetch(`${this.prefix_url}/${uuid}.zip`, {
onSuccess: (zipRes) => {
const file = zipRes.blob();
const zip = new JSZip();
let json: GroupJson;
// 几何数据数组
let geometries: Array<any> = [];
const unzipDone = () => {
// 贴图还原至sceneJson
json.images = json.images.map((item) => {
const nameSplit = item.split(".");
if (nameSplit[1] === "env") {
const urlSplit = nameSplit[0].split("!");
return this.imagesMap.get(urlSplit[3])
} else {
return this.imagesMap.get(nameSplit[0])
}
});
// 几何数据还原至sceneJson
json.geometries = geometries;
this.recordUuid(json);
// 遍历children,拉取group zip还原
const children: any = [];
json.object.children.forEach((uuid) => {
if (typeof uuid === "string") {
// 保存uuid对应的function
funcMap.set(uuid, this.unpackGroup);
this.callFunNum.value++;
} else {
children.push(uuid)
}
})
json.object.children = children;
//json.object.groupChildren = [...funcMap.keys()];
// 解压处理好的数据添加至 indexDB -> Msy3D -> ${dbTable}
// db.setItem(`${uuid}.zip`, json,dbTable);
parse(json);
}
zip.loadAsync(file as Blob).then(res => {
let num = new Proxy({ value: Object.keys(res.files).length }, {
set(target, p, value) {
target[p] = value;
if (value === 0) {
unzipDone();
}
return true;
}
})
for (let key in res.files) {
//判断是否是目录
if (!res.files[key].dir) {
const fileName = res.files[key].name;
//找到我们压缩包所需要的json文件
if (fileName === `${uuid}.json`) { // 场景json
res.file(fileName)?.async('string').then(content => {
//得到scene.json文件的内容
json = JSON.parse(content);
num.value--;
})
} else if (fileName.substring(0, 9) === "Textures/") {
/**
* 贴图
* 分为两种情况：
* 1.贴图为env格式（type!width!height!uuid.env），转换为arraybuffer格式，存入map
* 2.贴图为普通图片格式，直接存入map
**/
if (/\.env$/.test(fileName)) {
// 转换回贴图原始信息，存入map
res.file(fileName)?.async('arraybuffer').then(content => {
this.unGzipImage(fileName.replace("Textures/", ""), content);
num.value--;
})
} else {
res.file(fileName)?.async('string').then(content => {
this.unGzipImage(fileName.replace("Textures/", ""), content);
num.value--;
})
}
} else if (/^Geometries\/geometries_\d*\.json$/.test(fileName)) {
res.file(fileName)?.async('string').then(content => {
geometries.push(...this.unGzipGeometryJson(JSON.parse(content)));
num.value--;
})
}
} else {
num.value--;
}
}
})
parseGroupZip(zipRes.blob());
}
});
}
@ -1297,6 +1662,11 @@ export class Package {
this.prefix_url = "";
this.callFunNum = { value: 0 }; // 重置为初始状态
this.totalSize = 0;
this.offlineZipMap = null;
this.offlineEntryZip = null;
this.offlineFlatPackages = null;
this.offlineFlatEntryBase = null;
this.dataComponentMap = null;
// 5. 释放 viewer 引用（注意：不销毁 viewer，仅移除引用）
this.viewer = null as any;

206
packages/sdk/lib/core/viewer/Viewer.ts
View File

@ -119,6 +119,11 @@ export interface ViewerModules {
tilesManage:TilesManage,
}
export interface InstallScriptsOptions {
invokeLoaded?: boolean;
loadedScriptNames?: string[];
}
CameraControls.install({
THREE: {
Vector2: THREE.Vector2,
@ -140,25 +145,14 @@ const onDoubleClickPosition = new THREE.Vector2();
// 表示animate()函数被多次调用累积时间,用于限制FPS
let timeStamp = 0;
// 事件绑定
const Fn: any = {
pointerdown: null,
pointerup: null,
pointermove: null,
keydown: null,
keyup: null,
touchstart: null,
dblclick: null,
}
// 脚本管理数据结构
type EventHandlers = {
[eventName: string]: {
[uuid: string]: Function[];
};
};
// 脚本中可写的所有事件
let events: EventHandlers = {
const createScriptEvents = (): EventHandlers => ({
loaded: {},
beforeAnimation: {},
afterAnimation: {},
@ -168,6 +162,7 @@ let events: EventHandlers = {
afterDestroy: {},
onPick: {},
onDoubleClick: {},
bindDataChange: {},
onKeyDown: {},
onKeyUp: {},
onPointerDown: {},
@ -175,9 +170,7 @@ let events: EventHandlers = {
onPointerMove: {},
onTouchStart: {},
onTouchEnd: {},
};
// UUID 到事件的映射
const uuidEventMap: Map<string, Map<string, { name: string, fn: Function }[]>> = new Map();
});
export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
public container: HTMLElement;
@ -197,6 +190,18 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
public css2DRenderer: CSS2DRenderer = new CSS2DRenderer();
public css3DRenderer: CSS3DRenderer = new CSS3DRenderer();
public timer = new Timer();
public events: EventHandlers = createScriptEvents();
public uuidEventMap: Map<string, Map<string, { name: string, fn: Function }[]>> = new Map();
public fns: any = {
mousedown: null,
pointerdown: null,
pointerup: null,
pointermove: null,
keydown: null,
keyup: null,
touchstart: null,
dblclick: null,
};
//整个主场景的box3
public sceneBox3 = new THREE.Box3();
public package: Package;
@ -362,6 +367,8 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
set enableScript(enable: boolean) {
if (enable === this.enableScript) return;
this.options.enableScript = enable;
if (enable) {
this.installScripts();
} else {
@ -591,14 +598,14 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
* 初始化事件监听
*/
initEvent() {
Fn.pointerdown = this.onPointerDown.bind(this);
this.container.addEventListener('pointerdown', Fn.pointerdown);
Fn.pointermove = this.onPointerMove.bind(this);
this.container.addEventListener('pointermove', Fn.pointermove);
Fn.touchstart = this.onTouchStart.bind(this);
this.container.addEventListener('touchstart', Fn.touchstart);
Fn.dblclick = this.onDoubleClick.bind(this)
this.container.addEventListener('dblclick', Fn.dblclick);
this.fns.pointerdown = this.onPointerDown.bind(this);
this.container.addEventListener('pointerdown', this.fns.pointerdown);
this.fns.pointermove = this.onPointerMove.bind(this);
this.container.addEventListener('pointermove', this.fns.pointermove);
this.fns.touchstart = this.onTouchStart.bind(this);
this.container.addEventListener('touchstart', this.fns.touchstart);
this.fns.dblclick = this.onDoubleClick.bind(this)
this.container.addEventListener('dblclick', this.fns.dblclick);
}
/**
@ -606,9 +613,13 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
* @param uuids 传入此参数则仅组装此数组下Object.uuid的脚本
* @param filterName 传入此参数则仅组装此数组下Object.uuid的脚本中name匹配的脚本
*/
installScripts(uuids?: string | string[], filterName: string = "") {
installScripts(uuids?: string | string[], filterName: string = "", options: InstallScriptsOptions = {}) {
if (!this.enableScript) return;
const { invokeLoaded = false, loadedScriptNames = [] } = options;
const loadedScriptNameSet = new Set(loadedScriptNames.filter(Boolean));
const shouldInvokeLoadedAfterInstall = invokeLoaded || loadedScriptNameSet.size > 0;
// 注册 Helper
const helper = new ScriptHelper(this.scene);
@ -622,7 +633,7 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
}
// 拼接下方闭包函数返回的结构，即返回脚本中写的支持的事件函数
const validEvents = Object.keys(events);
const validEvents = Object.keys(this.events);
// 准备返回结构
validEvents.forEach(eventName => {
@ -646,7 +657,8 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
// 一个模型允许存在多个脚本
const scripts = App.scripts[uuid] || [];
const uuidEvents = uuidEventMap.get(uuid) || new Map<string, { name: string, fn: Function }[]>();
const uuidEvents = this.uuidEventMap.get(uuid) || new Map<string, { name: string, fn: Function }[]>();
const scriptsNeedLoaded = new Set<string>();
scripts.forEach(script => {
// 如果存在需要按照name过滤
@ -660,6 +672,11 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
this.camera, this.modules.controls, this.timer, fns.render
);
const shouldInvokeLoaded = loadedScriptNameSet.size > 0 ? loadedScriptNameSet.has(script.name) : invokeLoaded;
if (shouldInvokeLoaded && typeof functions.loaded === "function") {
scriptsNeedLoaded.add(script.name);
}
Object.entries(functions).forEach(([name, fn]) => {
if (!fn || !validEvents.includes(name)) {
if (fn && !validEvents.includes(name)) {
@ -672,12 +689,16 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
const {type, target, ...params} = e;
// 点击事件只分发给对应模型
if (["onPick", "onDoubleClick"].includes(name)) {
const {intersect, object: _object} = params;
if (["onPick", "onDoubleClick", "bindDataChange"].includes(name)) {
const {intersect, object: _object, data, config, index} = params;
if (_object.uuid !== object.uuid) return;
(fn as Function).bind(object)(intersect as THREE.Intersection);
if (name === "bindDataChange") {
(fn as Function).bind(object)(data, config, index);
} else {
(fn as Function).bind(object)(intersect as THREE.Intersection);
}
} else {
if (isEmptyObject(params)) {
(fn as Function).bind(object)();
@ -688,8 +709,8 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
}
// 添加到全局事件集合
if (!events[name][uuid]) events[name][uuid] = [];
events[name][uuid].push(boundFn);
if (!this.events[name][uuid]) this.events[name][uuid] = [];
this.events[name][uuid].push(boundFn);
// 添加到 UUID 事件映射
if (!uuidEvents.has(name)) uuidEvents.set(name, []);
@ -704,7 +725,13 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
});
// 更新 UUID 映射
uuidEventMap.set(uuid, uuidEvents);
this.uuidEventMap.set(uuid, uuidEvents);
if (shouldInvokeLoadedAfterInstall) {
scriptsNeedLoaded.forEach(scriptName => {
this.invokeInstalledScriptEvent(uuid, scriptName, "loaded");
});
}
};
// 处理指定 UUID 或全部
@ -714,15 +741,15 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
Object.keys(App.scripts).forEach(processUuid);
}
if (!Fn.keydown) {
Fn.keydown = (event: KeyboardEvent) => {
if (!this.fns.keydown) {
this.fns.keydown = (event: KeyboardEvent) => {
this.dispatchEvent({type: "onKeyDown", event})
}
window.addEventListener('keydown', Fn.keydown);
Fn.keyup = (event: KeyboardEvent) => {
window.addEventListener('keydown', this.fns.keydown);
this.fns.keyup = (event: KeyboardEvent) => {
this.dispatchEvent({type: "onKeyUp", event})
}
window.addEventListener('keyup', Fn.keyup);
window.addEventListener('keyup', this.fns.keyup);
}
}
@ -732,9 +759,9 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
* @param filterName 传入此参数则仅卸载此Object.uuid的脚本中name匹配的脚本
*/
uninstallScriptsByUuid(uuid: string, filterName: string = "") {
if (!uuidEventMap.has(uuid)) return;
if (!this.uuidEventMap.has(uuid)) return;
const uuidEvents = uuidEventMap.get(uuid)!;
const uuidEvents = this.uuidEventMap.get(uuid)!;
const uuidEventsArray = Array.from(uuidEvents);
for (let i = uuidEventsArray.length - 1; i >= 0; i--) {
@ -756,7 +783,7 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
}
// 全局事件集合
const es = events[eventName][uuid];
const es = this.events[eventName][uuid];
// 移除相应函数
const ei = es.findIndex(f => f === sc.fn);
if (ei !== -1) {
@ -764,40 +791,79 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
}
if (es.length === 0) {
delete events[eventName][uuid];
delete this.events[eventName][uuid];
}
}
}
// 清理 UUID 映射
if (Array.from(uuidEvents.keys()).length === 0) {
uuidEventMap.delete(uuid);
this.uuidEventMap.delete(uuid);
}
}
invokeInstalledScriptEvent<T extends keyof ViewerEventMap>(
uuid: string,
scriptName: string,
eventName: T,
payload: Partial<ViewerEventMap[T]> = {}
): boolean {
const uuidEvents = this.uuidEventMap.get(uuid);
if (!uuidEvents) return false;
const handlers = uuidEvents.get(String(eventName));
if (!handlers || handlers.length === 0) return false;
let executed = false;
handlers.forEach(handler => {
if (handler.name !== scriptName) return;
try {
handler.fn({
...payload,
type: eventName,
target: this,
});
executed = true;
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
App.log.error(`[Script] 执行 ${scriptName}.${String(eventName)} 失败: ${message}`);
}
});
return executed;
}
reinstallObjectScripts(uuid: string, loadedScriptNames: string[] = []): void {
if (!uuid) return;
const uniqueLoadedScriptNames = Array.from(new Set(loadedScriptNames.filter(Boolean)));
this.uninstallScriptsByUuid(uuid);
this.installScripts([uuid], "", uniqueLoadedScriptNames.length > 0 ? { loadedScriptNames: uniqueLoadedScriptNames } : undefined);
}
/**
* 卸载所有脚本
*/
unInstallScripts() {
if (this.enableScript) return;
// 直接遍历 UUID 映射，复杂度 O(n)
uuidEventMap.forEach((_, uuid) => {
this.uuidEventMap.forEach((_, uuid) => {
this.uninstallScriptsByUuid(uuid);
});
// 重置数据结构
uuidEventMap.clear();
Object.keys(events).forEach(event => {
events[event] = {};
this.uuidEventMap.clear();
Object.keys(this.events).forEach(event => {
this.events[event] = {};
});
if (Fn.keydown) {
window.removeEventListener('keydown', Fn.keydown);
Fn.keydown = null;
if (this.fns.keydown) {
window.removeEventListener('keydown', this.fns.keydown);
this.fns.keydown = null;
window.removeEventListener('keyup', Fn.keyup);
Fn.keyup = null;
window.removeEventListener('keyup', this.fns.keyup);
this.fns.keyup = null;
}
}
@ -904,8 +970,8 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
event.preventDefault();
const array = getMousePosition(this.container, event.clientX, event.clientY);
onDownPosition.fromArray(array);
Fn.pointerup = this.onPointerUp.bind(this);
document.addEventListener('pointerup', Fn.pointerup);
this.fns.pointerup = this.onPointerUp.bind(this);
document.addEventListener('pointerup', this.fns.pointerup);
}
/**
@ -918,8 +984,8 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
const array = getMousePosition(this.container, event.clientX, event.clientY);
onUpPosition.fromArray(array);
this.handleClick();
document.removeEventListener('pointerup', Fn.pointerup);
Fn.pointerup = null;
document.removeEventListener('pointerup', this.fns.pointerup);
this.fns.pointerup = null;
}
/**
@ -940,8 +1006,8 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
const touch = event.changedTouches[0];
const array = getMousePosition(this.container, touch.clientX, touch.clientY);
onDownPosition.fromArray(array);
Fn.pointerup = this.onTouchEnd.bind(this);
document.addEventListener('touchend', Fn.pointerup);
this.fns.pointerup = this.onTouchEnd.bind(this);
document.addEventListener('touchend', this.fns.pointerup);
}
/**
@ -955,8 +1021,8 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
const array = getMousePosition(this.container, touch.clientX, touch.clientY);
onUpPosition.fromArray(array);
this.handleClick();
document.removeEventListener('touchend', Fn.pointerup);
Fn.pointerup = null;
document.removeEventListener('touchend', this.fns.pointerup);
this.fns.pointerup = null;
}
/**
@ -1133,14 +1199,14 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
dispose() {
this.dispatchEvent({type: "beforeDestroy"});
this.container.removeEventListener('mousedown', Fn.mousedown);
Fn.mousedown = null;
this.container.removeEventListener('pointermove', Fn.pointermove);
Fn.pointermove = null;
this.container.removeEventListener('touchstart', Fn.touchstart);
Fn.touchstart = null;
this.container.removeEventListener('dblclick', Fn.dblclick);
Fn.dblclick = null;
this.container.removeEventListener('mousedown', this.fns.mousedown);
this.fns.mousedown = null;
this.container.removeEventListener('pointermove', this.fns.pointermove);
this.fns.pointermove = null;
this.container.removeEventListener('touchstart', this.fns.touchstart);
this.fns.touchstart = null;
this.container.removeEventListener('dblclick', this.fns.dblclick);
this.fns.dblclick = null;
Object.keys(this.modules).forEach(key => {
if (this.modules[key].dispose) {

106
packages/sdk/lib/core/viewer/modules/Signals.ts
View File

@ -2,15 +2,21 @@ import * as THREE from "three";
import {RoomEnvironment} from "three/examples/jsm/environments/RoomEnvironment.js";
import {ShaderPass} from "three/examples/jsm/postprocessing/ShaderPass.js";
import {Effect} from "./Effect";
import {useAddSignal} from "@/hooks";
import {useAddSignal, useRemoveSignal} from "@/hooks";
import Viewer from "../Viewer";
import App from "@/core/app/App";
import {focusObject} from "@/utils/scene/controls.ts";
type SignalListenerRecord = {
name: string;
listener: (...params: any[]) => void;
};
export class Signals {
private readonly viewer: Viewer;
private useBackgroundAsEnvironment = false;
private readonly signalListeners: SignalListenerRecord[] = [];
constructor(viewer:Viewer) {
this.viewer = viewer;
@ -18,41 +24,46 @@ export class Signals {
this.init();
}
private registerSignal(name: string, listener: (...params: any[]) => void) {
this.signalListeners.push({ name, listener });
useAddSignal(name, listener);
}
init() {
useAddSignal("sceneCleared", this.sceneCleared.bind(this));
useAddSignal("transformModeChanged", this.transformModeChanged.bind(this));
useAddSignal("snapChanged", this.snapChanged.bind(this));
useAddSignal("spaceChanged", this.spaceChanged.bind(this));
useAddSignal("effectEnabledChange", this.effectEnabledChange.bind(this));
this.registerSignal("sceneCleared", this.sceneCleared.bind(this));
this.registerSignal("transformModeChanged", this.transformModeChanged.bind(this));
this.registerSignal("snapChanged", this.snapChanged.bind(this));
this.registerSignal("spaceChanged", this.spaceChanged.bind(this));
this.registerSignal("effectEnabledChange", this.effectEnabledChange.bind(this));
useAddSignal("rendererUpdated", this.rendererUpdated.bind(this));
useAddSignal("rendererCreated", this.rendererCreated.bind(this));
useAddSignal("rendererConfigUpdate", this.rendererConfigUpdate.bind(this));
useAddSignal("rendererDetectKTX2Support", this.rendererDetectKTX2Support.bind(this));
this.registerSignal("rendererUpdated", this.rendererUpdated.bind(this));
this.registerSignal("rendererCreated", this.rendererCreated.bind(this));
this.registerSignal("rendererConfigUpdate", this.rendererConfigUpdate.bind(this));
this.registerSignal("rendererDetectKTX2Support", this.rendererDetectKTX2Support.bind(this));
useAddSignal("sceneBackgroundChanged", this.sceneBackgroundChanged.bind(this));
useAddSignal("sceneEnvironmentChanged", this.sceneEnvironmentChanged.bind(this));
useAddSignal("sceneGraphChanged", this.sceneGraphChanged.bind(this));
useAddSignal("cameraChanged", this.cameraChanged.bind(this));
useAddSignal("cameraReset", this.viewer.updateAspectRatio.bind(this.viewer));
useAddSignal("viewportCameraChanged", this.viewportCameraChanged.bind(this));
useAddSignal("viewportShadingChanged", this.viewportShadingChanged.bind(this));
this.registerSignal("sceneBackgroundChanged", this.sceneBackgroundChanged.bind(this));
this.registerSignal("sceneEnvironmentChanged", this.sceneEnvironmentChanged.bind(this));
this.registerSignal("sceneGraphChanged", this.sceneGraphChanged.bind(this));
this.registerSignal("cameraChanged", this.cameraChanged.bind(this));
this.registerSignal("cameraReset", this.viewer.updateAspectRatio.bind(this.viewer));
this.registerSignal("viewportCameraChanged", this.viewportCameraChanged.bind(this));
this.registerSignal("viewportShadingChanged", this.viewportShadingChanged.bind(this));
useAddSignal("objectSelected", this.objectSelected.bind(this));
useAddSignal("objectFocused", this.objectFocused.bind(this));
useAddSignal("objectAdded", this.objectAdded.bind(this));
useAddSignal("objectChanged", this.objectChanged.bind(this));
useAddSignal("objectRemoved", this.objectRemoved.bind(this));
this.registerSignal("objectSelected", this.objectSelected.bind(this));
this.registerSignal("objectFocused", this.objectFocused.bind(this));
this.registerSignal("objectAdded", this.objectAdded.bind(this));
this.registerSignal("objectChanged", this.objectChanged.bind(this));
this.registerSignal("objectRemoved", this.objectRemoved.bind(this));
useAddSignal("geometryChanged", this.geometryChanged.bind(this));
useAddSignal("materialChanged", this.materialChanged.bind(this));
this.registerSignal("geometryChanged", this.geometryChanged.bind(this));
this.registerSignal("materialChanged", this.materialChanged.bind(this));
useAddSignal("sceneResize", this.sceneResize.bind(this));
useAddSignal("showGridChanged", this.showGridChanged.bind(this));
this.registerSignal("sceneResize", this.sceneResize.bind(this));
this.registerSignal("showGridChanged", this.showGridChanged.bind(this));
useAddSignal("scriptAdded",this.scriptAdded.bind(this));
useAddSignal("scriptRemoved",this.scriptRemoved.bind(this));
useAddSignal("scriptChanged",this.scriptChanged.bind(this));
this.registerSignal("scriptAdded",this.scriptAdded.bind(this));
this.registerSignal("scriptRemoved",this.scriptRemoved.bind(this));
this.registerSignal("scriptChanged",this.scriptChanged.bind(this));
}
/**
@ -66,6 +77,8 @@ export class Signals {
* 清空
*/
sceneCleared() {
this.viewer.unInstallScripts();
this.viewer.modules.controls.setTarget(0, 0, 0,true);
this.viewer.pathtracer?.reset();
@ -453,15 +466,29 @@ export class Signals {
/**
* 添加脚本
*/
scriptAdded(object:THREE.Object3D, _:ISceneScript){
this.viewer.installScripts([object.uuid]);
scriptAdded(object:THREE.Object3D, sc:ISceneScript){
if (!object?.uuid || !sc?.name) return;
try {
this.viewer.reinstallObjectScripts(object.uuid, [sc.name]);
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
App.log.error(`[Script] 热安装脚本 ${sc.name} 失败: ${message}`);
}
}
/**
* 移除脚本
*/
scriptRemoved(object:THREE.Object3D, sc:ISceneScript){
this.viewer.uninstallScriptsByUuid(object.uuid,sc.name);
if (!object?.uuid) return;
try {
this.viewer.reinstallObjectScripts(object.uuid);
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
App.log.error(`[Script] 卸载脚本 ${sc?.name || "unknown"} 失败: ${message}`);
}
}
/**
@ -469,8 +496,14 @@ export class Signals {
*/
scriptChanged(attributeName:string,object:THREE.Object3D, sc:ISceneScript){
if(attributeName !== "source") return;
if (!object?.uuid || !sc?.name) return;
this.viewer.installScripts([object.uuid],sc.name);
try {
this.viewer.reinstallObjectScripts(object.uuid, [sc.name]);
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
App.log.error(`[Script] 热更新脚本 ${sc.name} 失败: ${message}`);
}
}
/**
@ -479,4 +512,11 @@ export class Signals {
render(){
this.viewer.render();
}
dispose() {
this.signalListeners.forEach(({ name, listener }) => {
useRemoveSignal(name, listener);
});
this.signalListeners.length = 0;
}
}