моя контактная информация
Почтамезофия@protonmail.com
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Недавно при работе над проектом я столкнулся с необходимостью встроить UnityWebGL в веб-страницу, а UnityWebGL должен реагировать при нажатии кнопки на веб-странице.Пропустить новую часть проекта напрямую
Data Caching иDecompression Fallback Ссылка ниже является официальным объяснением.Data Caching Проще говоря, данные кэшируются локально и при следующем открытии вы сможете напрямую войти в игру без скачивания.Decompression Fallback Если есть невозможность парсить gz-файлы, ошибки конфигурации веб-сервера и т.п., необходимо отметить эту опцию.
Примечание. Метод должен быть общедоступным, иначе он не будет доступен.
using System;
using System.Text;
using UnityEngine;
using UnityEngine.UI;
public class CubeRotate : MonoBehaviour
{
public Text tx;
void Update()
{
transform.Rotate(Vector3.up * Time.deltaTime * 30, Space.World);
}
public void SetTextInfo(string info)
{ byte[] bytes = Convert.FromBase64String(info);
var decodedMessage = Encoding.UTF8.GetString(bytes);
Debug.Log($"收到消息：{info}----{decodedMessage}");
tx.text = decodedMessage;
}
public void AddScale()
{
transform.localScale += Vector3.one * 0.1f;
}
public void SubtractScale()
{
transform.localScale -= Vector3.one * 0.1f;
}
}
Если вы хотите просмотреть упакованные файлы локально, вам необходимо их загрузить.
Firefox浏览器, для загрузки требуются определенные параметры конфигурации.Открыть webgl в Firefox_Открыть webgl в Firefox-Блог CSDN
Учитывая, что некоторые друзья могут не знать, как писать веб-страницы, автор предоставляет простой шаблон веб-страницы, который каждый может протестировать.
Инструкция по использованию: Создайте новый текстовый файл, вставьте в него следующий код, сохраните его и измените суффикс файла на
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Web Page</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
.nav {
background-color: #ddd;
padding: 10px;
text-align: center;
}
.nav-button {
background-color: #ddd;
border: none;
color: #333;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px; /* 圆角边框 */
}
.nav-button:hover {
background-color: #ccc;
}
.nav a {
color: #333;
text-decoration: none;
margin-right: 10px;
}
.container {
display: flex;
justify-content: space-between;
padding: 20px;
}
.sidebar,
.main {
padding: 20px;
height: 550px;
overflow: hidden;
}
.sidebar {
background-color: #f0f0f0;
flex: 0 0 380px; /* Fixed width for sidebar */
}
.main {
background-color: #e0e0e0;
flex: 0 0 960px; /* Fixed width for main content */
}
.sidebar-left {
margin-right: 20px; /* Adjust the margin for the left sidebar */
}
.sidebar-right {
margin-left: 20px; /* Adjust the margin for the right sidebar */
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>My Simple Web Page</h1>
</div>
<div class="nav">
<button id="enlargeButton" class="nav-button">放大</button>
<button id="shrinkButton" class="nav-button">缩小</button>
<button id="infoButton" class="nav-button">设置信息</button>
</div>
<div class="container">
<div class="sidebar sidebar-left">
<h2>Left Sidebar</h2>
<p>
This is the left sidebar area. It typically contains additional
information or links.
</p>
</div>
<div class="main">
WebGL网页
</div>
<div class="sidebar sidebar-right">
<h2>Right Sidebar</h2>
<p>
This is the right sidebar area. It typically contains additional
information or links.
</p>
</div>
</div>
<div class="footer">
<p>Footer - Copyright © 2024</p>
</div>
</body>
<script>
// JS 代码
</script>
</html>
src Просто измените ссылку на адрес сервера. (Информацию об iframe см.HTML-фрейм (w3school.com.cn)) сохраняйте и используйтеFirefox浏览器Откройте веб-страницу, и проекты, развернутые на сервере, можно будет открыть в любом браузере, поддерживающем WebGL.<iframe
id="webgl"
style="
position: relative;
width: 100%;
height: 100%;
border: medium none;
"
src="../UnWeb/webgl/index.html"
></iframe>
Уведомление:
methodNameОно должно соответствовать имени метода в Unity, иначе метод не будет найден.
// 获取DOM中id为"webgl"的iframe元素
var unWebGL = document.getElementById("webgl");
// 获取放大按钮
var enlargeButton = document.getElementById("enlargeButton");
// 获取缩小按钮
var shrinkButton = document.getElementById("shrinkButton");
// 获取信息按钮
var infoButton = document.getElementById("infoButton");
/**
* Action函数用于向iframe内的WebGL应用发送指令。
* @param {string} methodName - 要调用的方法名
* @param {string} message - 要传递的消息（可选）
*/
function Action(methodName, message) {
// 获取嵌套的iframe元素
var iframeB = document.getElementById("webgl");
// 调用iframe内容窗口的ReceiveJSMethod方法，传递方法名和消息
iframeB.contentWindow.ReceiveJSMethod(methodName, message);
}
// 为放大按钮添加点击事件监听器
enlargeButton.addEventListener("click", function () {
// 当按钮被点击时，调用Action函数，通知WebGL应用增大缩放
Action("AddScale");
// 可以在这里执行其他操作
});
// 为缩小按钮添加点击事件监听器
shrinkButton.addEventListener("click", function () {
// 当按钮被点击时，调用Action函数，通知WebGL应用减小缩放
Action("SubtractScale");
});
// 为信息按钮添加点击事件监听器
infoButton.addEventListener("click", function () {
// 当按钮被点击时，调用Action函数，通知WebGL应用显示信息
Action("SetTextInfo", "这是一条测试消息");
});
var unityIns = null;
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
})
.then((unityInstance) => {
unityIns = unityInstance;
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
})
.catch((message) => {
alert(message);
});
};
SendMessageМетоды. Это позволяет вам вызывать определенные методы игровых объектов в вашей сцене Unity из кода JavaScript.Уведомление:
SendMessageМетод имеет три параметра:
Имя целевого объекта: это имя игрового объекта в сцене. Для этого объекта определен метод, который вы хотите вызвать.
Имя метода: это имя метода, который вы хотите вызвать. Это должен быть общедоступный метод в скрипте целевого объекта.
Параметры: это параметры, которые вы хотите передать методу. В SendMessage Unity этот параметр может иметь только строковый тип. Если вам нужно передать более сложные данные, возможно, вам придется использовать другие механизмы.
/**
* ReceiveJSMethod 函数用于接收来自网页的指令和消息，并将它们传递给 Unity 中的对象。
* @param {string} methodName - 要调用的 Unity 对象的方法名
* @param {string} message - 要传递给 Unity 对象的消息（可选）
*/
function ReceiveJSMethod(methodName, message) {
// 在控制台输出接收到的methodName和message，用于调试
console.log(methodName, message);
// 检查methodName是否不为null
if (methodName != null) {
// 如果message也不为null，则进行处理
if (message != null) {
// 将文本消息转换为base64编码
var base64Str = btoa(
encodeURIComponent(message).replace(
/%([0-9A-F]{2})/g,
function (match, p1) {
// 将百分比编码的序列转换回原始字符
return String.fromCharCode("0x" + p1);
}
)
);
// 使用Unity引擎的SendMessage方法，将methodName和base64编码的消息发送给名为"Cube"的Unity对象
unityIns.SendMessage("Cube", methodName, base64Str);
} else {
// 如果没有message，只发送methodName给名为"Cube"的Unity对象
unityIns.SendMessage("Cube", methodName);
}
}
}
Ладно, на сегодня всё~
Если это было полезно для вас, вы можете поставить лайк, подписаться и собрать его. Если у вас есть вопросы, увидимся в области комментариев ~
Нелегко быть оригинальным. Если перепечатываете, пожалуйста, укажите источник. Всем спасибо~
Он посвятил себя исследованию технологий более 30 лет и владеет различными языками, такими как Java, Linux, Javascript, php, css и т. д. Он внес большой вклад в область открытого исходного кода. Станция документации для разработчиков, где можно поделиться некоторыми проблемами в разработке технологий для дальнейшего использования. Все ознакомьтесь.
Почтамезофия@protonmail.com