您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 更多程式設計知識

Cult3D 與網頁腳本交互開發指南：事件、方法與跨瀏覽器實作

編輯：更多程式設計知識

Cult3D 作為早期 Web 3D 內容展示技術，透過 ActiveX (IE) / Netscape Plugin 架構與 JavaScript/VBScript 實現雙向交互。本文系統整理其事件模型、JavaScript API、跨瀏覽器調用差異與完整實作範例，為維護舊專案或研究 Web 3D 歷史技術的開發者提供參考。

架構基礎與腳本選擇

瀏覽器	技術架構	腳本語言	嵌入標籤
Internet Explorer	ActiveX 控制項	VBScript / JavaScript	`<OBJECT>`
Netscape / Firefox	Netscape Plugin API	JavaScript	`<EMBED>`

核心建議：統一使用 JavaScript，配合 Cult3D.js 封裝庫抹平跨瀏覽器差異。VBScript 僅限 IE/Windows，不具備跨平台能力。

四大核心事件模型

事件名稱	觸發時機	典型應用
`OnSceneLoaded`	場景開始載入（材質/游標可能未就緒）	顯示載入進度、初始化 UI
`OnLoadFinished`	檔案下載解壓完成、場景完全就緒	啟動動畫、綁定互動邏輯
`OnLoadAborted`	下載錯誤、檔案不存在、格式無效	錯誤提示、降級顯示
`OnSendMessage`	Cult3D Designer 定義的「Send Message to Host」動作觸發、或 Java 程式呼叫	3D 場景與網頁雙向通訊

跨瀏覽器事件綁定實作

Internet Explorer (JavaScript)


<SCRIPT LANGUAGE="javascript">
function OnLoadFinished() {
    // 場景就緒邏輯
    cult3dObj.TriggerEvent('StartAnimation');
}
// 關鍵：FOR=物件ID EVENT=事件名
</SCRIPT>
<SCRIPT LANGUAGE="javascript" FOR="Cult3D" EVENT="OnLoadFinished">
    OnLoadFinished();
</SCRIPT>

<OBJECT id="Cult3D" 
        classid="clsid:31B7EB4E-8B4B-11D1-A789-00A0CC6651A8" 
        width="400" height="300">
    <PARAM NAME="SRC" VALUE="scene.co">
</OBJECT>

Internet Explorer (VBScript)


<SCRIPT LANGUAGE="vbscript">
Sub Cult3D_OnLoadFinished()
    ' 此處編寫邏輯
End Sub
</SCRIPT>

<OBJECT id="Cult3D" classid="clsid:31B7EB4E-8B4B-11D1-A789-00A0CC6651A8" width="400" height="300">
    <PARAM NAME="SRC" VALUE="scene.co">
</OBJECT>

Netscape / Firefox (JavaScript)


<SCRIPT LANGUAGE="javascript">
function OnLoadFinished() {
    // 場景就緒邏輯
}
function OnSceneLoaded() {
    document.embeds['Cult3D'].triggerEvent('StartAnimation');
}
function OnLoadAborted() {
    alert('場景載入失敗');
}
</SCRIPT>

<EMBED NAME="Cult3D"
       PLUGINSPAGE="https://www.cult3d.com/newuser/index.html"
       SRC="scene.co"
       WIDTH="400" HEIGHT="300"
       ONLOADFINISHED="OnLoadFinished()"
       ONSCENELOADED="OnSceneLoaded()"
       ONLOADABORTED="OnLoadAborted()">
</EMBED>

JavaScript API 方法完整參考

功能	Netscape 語法	IE 語法	說明
抗鋸齒模式	`setAntiAliasing(mode)` `getAntiAliasing()`	`AntiAliasing` (屬性)	0=自動, 1=關閉, 2=開啟。僅軟體渲染有效
抗鋸齒延遲	`setAntiAliasingDelay(ms)` `getAntiAliasingDelay()`	`AntiAliasingDelay`	自動模式下觸發延遲毫秒數
觸發事件	`triggerEvent(name)`	`TriggerEvent(name)`	觸發 Designer 定義的目標事件，回傳 Boolean
取得版本	`getVersion()`	`Version`	回傳 Cult3D Player 版本字串
取得最後訊息	`getLastMessage()`	`LastMessage`	接收 OnSendMessage 事件傳遞的字串
當前幀號	`getFrame()`	`Frame`	渲染幀計數器，隨時間遞增
設定鍵盤焦點	`setFocus()`	`Focus`	IE 強制焦點；Netscape 自動聚焦
取得動作狀態	`getActionStatus(name)`	`GetActionStatus(name)`	-1=事件不存在, 0=未執行, 1=已執行
觸發帶參數動作	`triggerAction(name, param)`	`TriggerAction(name, param)`	參數必須為字串，針對 Java 事件

實戰範例：動態控制 3D 場景

場景：使用者點選按鈕改變物體顏色


<html>
<head>
<title>Cult3D 互動範例</title>
<script>
// 統一取得物件參考
function getCult3D() {
    if (document.all) return document.all.Cult3D;      // IE
    return document.embeds['Cult3D'];                  // Netscape/FF
}

// 改變物體顏色（假設場景定義了 ChangeColor 事件，參數為十六進位色碼）
function changeColor(hexColor) {
    var obj = getCult3D();
    if (!obj) return;
    
    // 觸發帶參數動作
    var ok = obj.triggerAction ? obj.triggerAction('ChangeColor', hexColor)
                               : obj.TriggerAction('ChangeColor', hexColor);
    if (!ok) alert('找不到 ChangeColor 事件');
}

// 檢查動畫狀態並切換
function toggleDoor() {
    var obj = getCult3D();
    if (!obj) return;
    
    var status = obj.getActionStatus ? obj.getActionStatus('OpenDoor')
                                     : obj.GetActionStatus('OpenDoor');
    if (status == -1) { alert('事件不存在'); return; }
    
    if (status == 1) {
        obj.triggerEvent ? obj.triggerEvent('CloseDoor') : obj.TriggerEvent('CloseDoor');
    } else {
        obj.triggerEvent ? obj.triggerEvent('OpenDoor') : obj.TriggerEvent('OpenDoor');
    }
}

// 載入完成初始化
function onLoadFinished() {
    var obj = getCult3D();
    obj.setFocus ? obj.setFocus() : (obj.Focus = true);  // 確保鍵盤可控
    document.getElementById('status').innerText = '場景就緒';
}
</script>
</head>
<body>
<!-- IE -->
<object id="Cult3D" classid="clsid:31B7EB4E-8B4B-11D1-A789-00A0CC6651A8" width="400" height="300">
    <param name="SRC" value="demo.co">
</object>
<!-- Netscape/FF (IE 會忽略 EMBED) -->
<embed name="Cult3D" pluginspage="https://www.cult3d.com/newuser/index.html" 
       src="demo.co" width="400" height="300"
       onloadfinished="onLoadFinished()">
</embed>

<br>
<button onclick="changeColor('#FF0000')">紅色</button>
<button onclick="changeColor('#00FF00')">綠色</button>
<button onclick="changeColor('#0000FF')">藍色</button>
<button onclick="toggleDoor()">開/關門</button>
<div id="status">載入中...</div>
</body>
</html>

完整事件流程範例 (Netscape 風格)


<HTML>
<HEAD>
<TITLE>Cult3D 事件流程示範</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function OnSceneLoaded() {
    document.frm.txt.value = "場景開始載入...";
    document.embeds["Cult3D"].triggerEvent("StartLoading");
}

function OnLoadFinished() {
    document.frm.txt.value = "場景載入完成！";
    document.embeds["Cult3D"].triggerEvent("PlayIntroAnimation");
}

function OnLoadAborted() {
    document.frm.txt.value = "錯誤：檔案損壞或不存在";
}
//--></SCRIPT>
</HEAD>
<BODY>
<EMBED NAME="Cult3D"
       PLUGINSPAGE="https://www.cult3d.com/newuser/index.html"
       SRC="Test.co"
       WIDTH="400" HEIGHT="300"
       ONSCENELOADED="OnSceneLoaded()"
       ONLOADFINISHED="OnLoadFinished()"
       ONLOADABORTED="OnLoadAborted()">
</EMBED>

<FORM NAME="frm">
狀態: <INPUT NAME="txt" TYPE="TEXT" SIZE="40">
</FORM>
</BODY>
</HTML>

遷移與現代化建議

技術棧已淘汰：Cult3D Player 依賴 NPAPI/ActiveX，現代瀏覽器 (Chrome 45+, Firefox 52+, Edge) 全部移除支援
替代方案：Three.js (WebGL)、Babylon.js、Model Viewer (<model-viewer> Web Component)
資產遷移：.co 格式需在 Cult3D Designer 中匯出為通用格式，或重新建模
互動邏輯重寫：事件驅動模型可映射至現代框架的事件系統

總結

Cult3D 的網頁腳本交互機制建立在「事件通知 + 方法調用」雙向通道上。核心在於理解 OnSceneLoaded/OnLoadFinished/OnLoadAborted/OnSendMessage 四大事件生命週期，掌握 triggerEvent/triggerAction/getActionStatus/getLastMessage 關鍵 API，並透過 Cult3D.js 風格封裝抹平 IE/Netscape 差異。雖技術已退出歷史舞台，其「宣告式場景 + 腳本控制」的設計思想在現代 WebXR/Three.js 架構中依然延續。