【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;
}

 

 3.用鼠标+键盘 控制主摄像头(【alt+左键=旋转 】【alt+右键=拖动】【alt+上下滚动=放大和缩小】).

void Update()
{

// 检查是否按住Alt键
if (Input.GetKey(KeyCode.LeftAlt) || Input.GetKey(KeyCode.RightAlt))
{
// 视角平移
if (Input.GetMouseButton(1)) // Alt + 右键拖动
{
Vector3 delta = Input.mousePosition - lastMousePosition;
Vector3 pan = new Vector3(-delta.x, -delta.y, 0) * panSpeed * Time.deltaTime;
transform.Translate(pan, Space.Self);
}

// 视角旋转
if (Input.GetMouseButton(0)) // Alt + 左键拖动
{
float rotationX = Input.GetAxis("Mouse X") * rotateSpeed * Time.deltaTime;
float rotationY = -Input.GetAxis("Mouse Y") * rotateSpeed * Time.deltaTime;
transform.Rotate(Vector3.up, rotationX, Space.World);
transform.Rotate(Vector3.right, rotationY, Space.Self);
}

// 视角缩放
float scroll = Input.GetAxis("Mouse ScrollWheel");
if (scroll != 0.0f) // Alt + 滚轮
{
Vector3 zoom = scroll * zoomSpeed * transform.forward;
transform.Translate(zoom, Space.World);
}
}

lastMousePosition = Input.mousePosition;
}

 

三、其他注意项

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();
}
});

 

posted @   移动工程师  阅读(106)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
历史上的今天:
2022-08-17 【西门子通讯】
点击右上角即可分享
微信分享提示