Telecom360-next

English · 中文

360° panorama editor and offline viewer for site / room walkthroughs.
Deploy with a single Release ZIP: download → unzip → copy into the IIS site root — ready to use.

What	URL (example)
Editor	`http://{server}/`
Published tour	`http://{server}/site/{SITE_CODE}/{ROOM_NAME}/{PHOTO_DATE}/`

Features

Multi-scene equirectangular tours (including high-res such as 11904×5952 JPG/PNG 2:1 aspect images).
Info annotations and links between scenes.
Per-scene initial view.
Slight 3D walk with WASD / QE (always on, no toggle).
Export a self-contained package (prebuilt Viewer bundle + images; no CDN).
Host as static files on IIS (no Node.js on the server).

UI language: Traditional Chinese. Branding: CLP logo.

Deploy (IIS) — three steps

1. Install / update the Editor

Download the official package: Telecom360-next-vX.Y.Z-iis.zip.
Unzip it.

Copy all files into the IIS website physical path (e.g. C:\inetpub\wwwroot).

You should see at least:

Path	Role
`index.html`	Editor
`assets\`	Editor JS / CSS
`brand\`	Logos / favicon
`viewer-shell\`	Prebuilt Viewer template (required for Export ZIP — do not delete)
`web.config`	MIME for `.json` / `.mjs` / `.wasm` — already configured

Open the site in a browser. The Editor is ready.

No Node.js on the server. No scripts (no PowerShell, no npm).

web.config and viewer-shell/ are included in the Release ZIP — copy once and the site works with zero extra IIS setup. Do not remove viewer-shell/; Export ZIP depends on it.

2. Create a tour (Editor)

Open the Editor in the browser.
Fill 專案名稱 (project name, required), e.g. FOS - Control Room.
Fill SITE_CODE, ROOM_NAME, PHOTO_DATE (required; used in the publish path).
Click 新增全景圖片 and add equirectangular JPG/PNG (about 2:1 aspect).
Optional: 注解, 場景連結, 設置初始視角, drag scenes to reorder.
Click 匯出 ZIP.

3. Publish a tour (manual copy)

Unzip the tour ZIP into the same IIS website root, so you get:

{IIS root}\site\{SITE_CODE}\{ROOM_NAME}\{PHOTO_DATE}\
  index.html              ← prebuilt Viewer
  project.json            ← tour data (fetched by Viewer)
  brand\                  ← logos / favicon
  assets\
    viewer-*.js / *.css   ← Viewer app + three.js bundle
    source\*.jpg          ← panorama images

The ZIP also contains README.txt at the ZIP root (next to the site\ folder).

Open:

http://{server}/site/{SITE_CODE}/{ROOM_NAME}/{PHOTO_DATE}/

To edit later: Editor → 開啟專案套件 → select the same ZIP.

Viewer controls (published page)

Control	Behaviour
Drag	Rotate
Mouse wheel	Zoom
WASD / QE	3D move (always on)
自動旋轉	Button on page, default OFF
全螢幕	Button on page

Technology

Layer	Stack
3D / panorama	three.js r172 via WebGL 2 (shared `PanoramaEngine`)
Language	TypeScript
Apps	Editor (`index.html`) + Viewer (`viewer/index.html`) — two Vite entries
Build (development team)	Vite 6 → `dist/` + `viewer-shell/` + Release ZIP
Browser export	JSZip assembles shell + `project.json` + images (no runtime HTML generation)
Hosting	IIS static files

Export package layout (tour ZIP from Editor)

README.txt                          ← at ZIP root
site/{SITE_CODE}/{ROOM_NAME}/{PHOTO_DATE}/
  index.html                        ← prebuilt Viewer (from viewer-shell)
  project.json                      ← single source of tour data
  brand/
  assets/
    viewer-*.js / shared chunks / *.css
    source/*.jpg

For developers

End users only need the Release IIS ZIP. Developers build it once:

npm install
npm run dev        # local Editor (default http://127.0.0.1:8888/)
npm run build      # typecheck + Vite (editor + viewer) + prepare viewer-shell
npm run release    # build + validate dist + zip → release/Telecom360-next-v{version}-iis.zip

Upload release/Telecom360-next-v{version}-iis.zip as a GitHub Release asset. That ZIP is the only install package for IT.

Viewer source: src/viewer/ (main.ts, ViewerApp.ts) + viewer/index.html.
Shared: src/shared/, src/panorama/PanoramaEngine.ts.
Export template: viewer-shell/ (generated by build; do not hand-edit).
Editor deploy must include viewer-shell/ so browser export can fetch it.
Tour data is only in project.json (not inlined into HTML).
Autorotate: toggle on → drag/wheel pauses → resumes after 5 seconds idle.
web.config lives in public/ and is copied into dist/ / the Release ZIP automatically.

Notes

Browser: recent Chrome / Edge recommended (WebGL 2 required).
Private / internal use. CLP logo and brand assets remain company property.

Telecom360-next（中文）

360° 全景 編輯器 與 離線檢視器，用於站點／機房導覽。
部署：下載官方 Release ZIP → 解壓 → 複製到 IIS 網站根目錄，即可使用。

項目	網址（例子）
編輯器	`http://{伺服器}/`
已發佈導覽	`http://{伺服器}/site/{SITE_CODE}/{ROOM_NAME}/{PHOTO_DATE}/`

功能

建立 多場景 equirectangular 全景（可含高解像 2:1 比例如 11904×5952 圖片）
加入 注解標示、場景之間跳轉
設定每場景 初始視角
以 WASD / QE 輕微 3D 移動（預設開、無開關掣）
匯出完整離線套件（預建 Viewer bundle + 圖片，不需 CDN）
以 IIS 靜態檔 託管（伺服器不需 Node.js）

介面：繁體中文；品牌：CLP LOGO。

部署（IIS）— 三步完成

1. 安裝／更新編輯器

下載官方套件：Telecom360-next-vX.Y.Z-iis.zip。
解壓。

將全部檔案複製到 IIS 網站實體路徑（例如 C:\inetpub\wwwroot）。

必須看到：

路徑	用途
`index.html`	編輯器
`assets\`	編輯器 JS / CSS
`brand\`	LOGO / favicon
`viewer-shell\`	預建 Viewer 模板（匯出 ZIP 必須，勿刪）
`web.config`	已設定 `.json` / `.mjs` / `.wasm` MIME，無需再改 IIS

瀏覽器開啟網站首頁 → 即可使用。

伺服器不需要 Node.js，也不需要執行任何腳本。

Release ZIP 已包含 web.config 與 viewer-shell/ — 複製一次即可，IIS 無需額外套 MIME。請勿刪除 viewer-shell/，否則「匯出 ZIP」會失敗。

詳見 docs/IIS_DEPLOY.md。

2. 製作導覽（編輯器）

瀏覽器開啟編輯器。
填 專案名稱（必填），例如 FOS - Control Room。
填 SITE_CODE、ROOM_NAME、PHOTO_DATE（必填；決定發佈路徑）。
按 新增全景圖片，加入約 2:1 的 equirectangular JPG/PNG。
可選：注解、場景連結、設置初始視角、拖曳調整場景順序。
按 匯出 ZIP。

3. 發佈導覽（人手複製）

將導覽 ZIP 解壓到同一個 IIS 網站根目錄，使出現：

{IIS 根目錄}\site\{SITE_CODE}\{ROOM_NAME}\{PHOTO_DATE}\
  index.html              ← 預建 Viewer
  project.json            ← 導覽資料（Viewer 以 fetch 載入）
  brand\
  assets\
    viewer-*.js / *.css   ← Viewer 應用（含 three.js）
    source\*.jpg          ← 全景圖

ZIP 根層另有 README.txt（與 site\ 同一層）。

瀏覽器開啟：

http://{伺服器}/site/{SITE_CODE}/{ROOM_NAME}/{PHOTO_DATE}/

之後要再改：編輯器 → 開啟專案套件 → 選同一個 ZIP。

檢視器操作（發佈後頁面）

操作	說明
拖曳	旋轉
滾輪	縮放
WASD / QE	3D 移動（預設開）
自動旋轉	頁面有掣，預設關
全螢幕	頁面有掣

技術

層級	技術
全景 / 3D	three.js r172（WebGL 2；共用 `PanoramaEngine`）
語言	TypeScript
應用	編輯器 + 檢視器（兩個 Vite entry）
建置（由開發團隊）	Vite 6 → `dist/` + `viewer-shell/` + Release ZIP
瀏覽器匯出	JSZip 組裝 shell + `project.json` + 圖片（不 runtime 砌 HTML）
上線	IIS 靜態網站

匯出套件結構（編輯器「匯出 ZIP」）

README.txt                          ← ZIP 根目錄
site/{SITE_CODE}/{ROOM_NAME}/{PHOTO_DATE}/
  index.html                        ← 預建 Viewer（來自 viewer-shell）
  project.json                      ← 導覽資料唯一來源
  brand/
  assets/
    viewer-*.js / 共用 chunk / *.css
    source/*.jpg

開發者

一般使用者只需官方 Release IIS ZIP。開發端建置一次後發佈：

npm install
npm run dev        # 本機編輯器（預設 http://127.0.0.1:8888/）
npm run build      # typecheck + Vite + 產生 viewer-shell
npm run release    # build + 校驗 dist + 打包 → release/Telecom360-next-v{version}-iis.zip

將 release/Telecom360-next-v{version}-iis.zip 上傳為 GitHub Release 附件，即為 IT 唯一安裝包。

Viewer 源碼：src/viewer/ + viewer/index.html
共用：src/shared/、PanoramaEngine
匯出模板：viewer-shell/（build 產物，勿手改）
編輯器部署必須包含 viewer-shell/
導覽資料只在 project.json，不 inline 進 HTML
web.config 放在 public/，會自動進入 dist/ 與 Release ZIP
自動旋轉： 開啟後拖拉／滾輪會暫停，約 5 秒無操作後自動再轉

注意

瀏覽器： 建議新版 Chrome / Edge（需 WebGL 2）。
內部使用。 CLP LOGO 與品牌資產屬公司所有。

Name		Name	Last commit message	Last commit date
docs		docs
public		public
scripts		scripts
server		server
src		src
viewer		viewer
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Navigation Menu

Repository navigation

About

Repository files navigation

Telecom360-next

Features

Deploy (IIS) — three steps

1. Install / update the Editor

2. Create a tour (Editor)

3. Publish a tour (manual copy)

Viewer controls (published page)

Technology

Export package layout (tour ZIP from Editor)

For developers

Notes

Telecom360-next（中文）

功能

部署（IIS）— 三步完成

1. 安裝／更新編輯器

2. 製作導覽（編輯器）

3. 發佈導覽（人手複製）

檢視器操作（發佈後頁面）

技術

匯出套件結構（編輯器「匯出 ZIP」）

開發者

注意

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Telecom360-next

Features

Deploy (IIS) — three steps

1. Install / update the Editor

2. Create a tour (Editor)

3. Publish a tour (manual copy)

Viewer controls (published page)

Technology

Export package layout (tour ZIP from Editor)

For developers

Notes

Telecom360-next（中文）

功能

部署（IIS）— 三步完成

1. 安裝／更新編輯器

2. 製作導覽（編輯器）

3. 發佈導覽（人手複製）

檢視器操作（發佈後頁面）

技術

匯出套件結構（編輯器「匯出 ZIP」）

開發者

注意

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages