【unity2022與html互動】

一、安裝untiy

1.官網下載 https://unity.com/cn/download ，這個類似於untiy管理器，很多版本都可以下

2.安裝後登陸賬號，網頁跳轉登陸，然後登陸後進入軟體頁面 選擇要下載的版本，建議2022 lst版本

3.下載後，在網頁上使用還需要新增模組 WEBGL，還有一箇中文漢化模組也可以下載

二、模型搭建與生成html

1.調整好視角角度，寫好主物體移動引數

【Unity程式碼】 寫完後拖到繫結的物體上，初始化和一幀一個觸發函式里面不用寫

// 這是一個公開的函式，可以從外部呼叫來移動 zhengti
public void ydyj(string parameters)
{// 將傳遞的引數字串解析為三個 float 值 x,y,z
string[] splitParams = parameters.Split('@');
float x = float.Parse(splitParams[0]);
float y = float.Parse(splitParams[1]);
float z = float.Parse(splitParams[2]);

// 移動 zhengti 物體
transform.Translate(x, y, z);
}

【js呼叫程式碼】 要先例項化unity物件

var script = document.createElement("script");

script.src = loaderUrl;

script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
my = unityInstance;
loadingBar.style.display = "none";
}).catch((message) => {
alert(message);
});
};

然後 寫個js函式 ，我是移動三個方向，所以需要先把三個引數 拼接成字串

function diaoydyj(a,b,c) {

var txt=a+"@"+b+"@"+c; //將三個變數xyz轉換成字串了 傳送 下面三個引數就是作用的【部件】 【函式】 【引數】
my.SendMessage('zhengti', 'ydyj', txt);
}

2.移動視角的方法 ，新增多個攝像頭，透過按鈕調動啟用哪一個，還有一種方法就是 調整主攝像頭的引數【位置，旋轉角度】

a.先把main camera的引數獲取了，傳送到html裡面去

public void huodesj()//========================================================================= 獲得視角資料 【要先定義公開變數 public Camera mainCamera;】
{// 獲取相機的世界座標位置和尤拉角旋轉
Vector3 position = mainCamera.transform.position;
Vector3 rotation = mainCamera.transform.eulerAngles;

// 傳送相機資訊到 HTML 用|方便分割資訊
string cameraInfo = position.x + "," + position.y + "," + position.z + "|" + rotation.x + "," + rotation.y + "," + rotation.z;
Application.ExternalCall("shouxinxi", cameraInfo); //引數【js函式名】 【傳送的字串】
}

b.我是把收到的主攝像頭資訊處理了，新增到6個文字框中了【id為t1-t6】

//=================================================================接受unity的資訊

function shouxinxi(cameraInfo) {

// 將接收到的相機資訊拆分為位置和角度
var parts = cameraInfo.split('|');
var position = parts[0].split(',');
var rotation = parts[1].split(',');

var cameraPosition = {
x: parseFloat(position[0]),
y: parseFloat(position[1]),
z: parseFloat(position[2])
};

var cameraRotation = {
x: parseFloat(rotation[0]),
y: parseFloat(rotation[1]),
z: parseFloat(rotation[2])
};

// 將資訊填入文字框中
document.getElementById('t1').value = cameraPosition.x;
document.getElementById('t2').value = cameraPosition.y;
document.getElementById('t3').value = cameraPosition.z;
document.getElementById('t4').value = cameraRotation.x;
document.getElementById('t5').value = cameraRotation.y;
document.getElementById('t6').value = cameraRotation.z;

console.log('Position:', cameraPosition);
console.log('Rotation:', cameraRotation);

// 你可以在這裡使用 cameraPosition 和 cameraRotation 做進一步處理
}

2.傳送攝像頭引數資訊到unity裡面去

【js程式碼部分】

function 更新視角() {
// 引數從 從文字框中獲取 就不用傳6個引數了====
var x = parseFloat(document.getElementById('t1').value) || 0;
var y = parseFloat(document.getElementById('t2').value) || 0;
var z = parseFloat(document.getElementById('t3').value) || 0;
var x1= parseFloat(document.getElementById('t4').value) || 0;
var y1 = parseFloat(document.getElementById('t5').value) || 0;
var z1 = parseFloat(document.getElementById('t6').value) || 0;

var cameraInfo = x + "," + y + "," + z + "|" + x1 + "," + y1 + "," + z1;
my.SendMessage('Main Camera', 'genxinsj', cameraInfo); 【物件】【uniy的方法】【字串引數】
}

【unity程式碼】

// 這個方法將被呼叫來更新相機的位置和旋轉======================================================更新視角資料
public void genxinsj(string cameraInfo)
{
// 將接收到的相機資訊拆分為位置和角度
var parts = cameraInfo.Split('|');
var position = parts[0].Split(',');
var rotation = parts[1].Split(',');

Vector3 newPosition = new Vector3(
float.Parse(position[0]),
float.Parse(position[1]),
float.Parse(position[2])
);

Vector3 newRotation = new Vector3(
float.Parse(rotation[0]),
float.Parse(rotation[1]),
float.Parse(rotation[2])
);

// 更新相機的位置和旋轉
mainCamera.transform.position = newPosition;
mainCamera.transform.eulerAngles = newRotation;
}

三、其他注意項

1.等3D模型載入完了執行函式 ==》獲取攝像頭的資訊

document.addEventListener('DOMContentLoaded',shouxinxi); //載入完了 讀取主視角一次資訊

2.在其他頁面裡面巢狀了uniy的自帶indexl.html如果上面沒有東西覆蓋就不需要額外呼叫，如果是全屏顯示了模型就需要 二次呼叫

document.getElementById('ok-button2').addEventListener('click', function() { //【最外層的id按鈕點選後執行】
// 模擬點選 index.htm 【untiy自帶的】中的 yj1 按鈕
const iframe = document.querySelector('.background-iframe');
const yj1Button = iframe.contentWindow.document.getElementById('liang');//【找到3D模型頁面的按鈕id】
if (yj1Button) {
yj1Button.click();
}
});