Unity WebGL upottaa käyttöliittymän verkkosivuja ja communications

Unity WebGL upottaa käyttöliittymän verkkosivuja ja kommunikoi

2024-07-12

1. Esittely

Äskettäin työskennellessäni projektissa törmäsin tarpeeseen upottaa UnityWebGL verkkosivulle, ja UnityWebGL:n on reagoitava, kun napsautat verkkosivun painiketta.Ohita uusi projektiosa suoraan

2. Lopullinen vaikutus

3. Perusasetukset

Aseta vientialustaksi WebGL
Tarkista Soittimen asetukset -> Julkaisuasetukset Data Caching jaDecompression Fallback Alla oleva linkki on virallinen selitys.
Data Caching Yksinkertaisesti sanottuna tiedot tallennetaan välimuistiin paikallisesti ja seuraavan kerran kun avaat sen, voit siirtyä suoraan peliin lataamatta.
Decompression Fallback Jos gz-tiedostoja ei voida jäsentää, Web-palvelimen asetusvirheitä jne., sinun on tarkistettava tämä vaihtoehto.
Unity – Manuaalinen: WebGL Playerin asetukset (unity3d.com)

4. Koodin kirjoittaminen ja vienti

Kohtaus asetetaan seuraavasti (voit luoda kohtauksia omien tarpeidesi mukaan)
Koodiosa (asentaa koodi luotuun kuutioon)

Huomautus: Metodin on oltava julkinen, muuten se ei ole käytettävissä

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;  
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Vie WebGL (odota vain, että vienti on valmis)

Jos haluat selata pakattuja tiedostoja paikallisesti, sinun on ladattava ne. Firefox浏览器 , lataaminen vaatii tiettyjä määritysparametreja.Avaa webgl Firefoxissa_Avaa webgl Firefox-CSDN-blogissa

5. Esimerkki web-sivusta

Ottaen huomioon, että jotkut ystävät eivät ehkä osaa kirjoittaa web-sivuja, kirjoittaja tarjoaa yksinkertaisen web-sivumallin kaikkien testattavaksi.

Käyttöohje: Luo uusi tekstitiedosto, liitä siihen seuraava koodi, tallenna se ja muuta tiedoston päätteeksi.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 &copy; 2024</p>
    </div>
  </body>

  <script>
    // JS 代码
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

6. Upota WebGL

Luo kansio ja laita pakatut WebGL ja verkkosivut samaan kansioon alla olevan kuvan mukaisesti (tämä vaihe on pääasiassa helpottamaan hallintaa, sinun ei tarvitse tehdä tätä)
Avaa web-sivu IDE:n avulla ja etsi punaisella laatikolla merkitty sijainti alla olevassa koodissa.
Korvaa div-tunnisteen sisältö seuraavalla koodilla. Jos WebGL-projektisi on otettu käyttöön palvelimessa, voit korvata iframe-tunnisteen sisällön seuraavalla koodilla.src Vaihda vain linkki palvelimen osoitteeseen. (Lisätietoja iframe-kehyksestä on osoitteessaHTML Iframe (w3school.com.cn)) tallenna ja käytäFirefox浏览器Avaa web-sivu, ja palvelimella käyttöönotetut projektit voidaan avata millä tahansa WebGL:ää tukevalla selaimella.

<iframe
          id="webgl"
          style="
            position: relative;
            width: 100%;
            height: 100%;
            border: medium none;
          "
          src="../UnWeb/webgl/index.html"
        ></iframe>
1
2
3
4
5
6
7
8
9
10

Liitetty kuva 20240527115228
Liitetty kuva 20240527115718

juoksutulos

7. Web-sivu kutsuu Unity-menetelmää

Etsi alla olevasta koodista punaisella laatikolla merkitty sijainti
Korvaa komentosarjatunnisteen sisältö seuraavalla koodilla (koodi on suhteellisen yksinkertainen ja sisältää kommentteja, joten en selitä sitä liikaa)

Ilmoitus:methodName Sen on oltava yhdenmukainen Unityn menetelmän nimen kanssa, muuten menetelmää ei löydy.

    // 获取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", "这是一条测试消息");
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Liitetty kuva 20240527122058

Kun olet suorittanut yllä olevat vaiheet, avaa WebGL-verkkosivu IDE:n avulla (index.html-tiedosto alla olevassa kuvassa)
Etsi komentosarjatunniste ja etsi koodi tämän tunnisteen alta lataajan alustamiseksi. Ja lisää koodi punaiseen ruutuun.

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);
          });
      };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Luo koodi viestien lähettämiseksi Unitylle Tässä selitämme lyhyesti, mitä koodissa käytetään.SendMessageMethods Tämän avulla voit kutsua tiettyjä menetelmiä peliobjekteissa Unity-skenessäsi JavaScript-koodista.

Ilmoitus:SendMessage Menetelmällä on kolme parametria:
Kohdeobjektin nimi: Tämä on kohtauksessa olevan peliobjektin nimi. Menetelmä, jota haluat kutsua, on määritetty tälle objektille.
Menetelmän nimi: Tämä on kutsuttavan menetelmän nimi. Sen pitäisi olla julkinen menetelmä kohdeobjektin komentosarjassa.
Parametrit: Nämä ovat parametrit, jotka haluat välittää menetelmälle. Unityn SendMessagessa tämä parametri voi olla vain merkkijonotyyppinen. Jos sinun on välitettävä monimutkaisempia tietoja, saatat joutua käyttämään muita mekanismeja.

Kirjoittaja on tehnyt yksinkertaisen kapseloinnin seuraavasta menetelmästä, sinun tarvitsee vain muuttaa kohdeobjektin nimi.Katso tarkempi selitys osoitteestaUnity - Manuaalinen: Unity C# -komentosarjatoimintojen kutsuminen JavaScriptistä (unity3d.com)

   /**
       * 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);
          }
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

8. Loppu

Okei, siinä kaikki tälle päivälle~
Jos siitä on sinulle hyötyä, voit tykätä, seurata ja kerätä, jos sinulla on kysyttävää, nähdään kommenttialueella
Ei ole helppoa olla alkuperäinen Jos painat uudelleen, ilmoita lähde. Kiitos kaikille

Teknologian jakaminen