Το Unity WebGL ενσωματώνει ιστοσελίδες front-end και communicates

Το Unity WebGL ενσωματώνει ιστοσελίδες front-end και επικοινωνεί

2024-07-12

1. Εισαγωγή

Πρόσφατα, όταν εργαζόμουν σε ένα έργο, αντιμετώπισα την ανάγκη να ενσωματώσω το UnityWebGL σε μια ιστοσελίδα και το UnityWebGL πρέπει να ανταποκρίνεται όταν κάνετε κλικ σε ένα κουμπί στην ιστοσελίδα.Παραλείψτε απευθείας το νέο μέρος του έργου

2. Τελικό αποτέλεσμα

3. Βασικές ρυθμίσεις

Ορίστε την πλατφόρμα εξαγωγής σε WebGL
Ελέγξτε τις Ρυθμίσεις προγράμματος αναπαραγωγής -> Ρυθμίσεις δημοσίευσης Data Caching καιDecompression Fallback Ο παρακάτω σύνδεσμος είναι η επίσημη εξήγηση.
Data Caching Για να το θέσω απλά, τα δεδομένα αποθηκεύονται τοπικά και την επόμενη φορά που θα τα ανοίξετε, μπορείτε να μπείτε απευθείας στο παιχνίδι χωρίς λήψη.
Decompression Fallback Εάν υπάρχει αδυναμία ανάλυσης αρχείων gz, σφάλματα διαμόρφωσης διακομιστή web, κ.λπ., πρέπει να ενεργοποιήσετε αυτήν την επιλογή.
Unity - Εγχειρίδιο: WebGL Player Settings (unity3d.com)

4. Σύνταξη και εξαγωγή κώδικα

Η σκηνή έχει ρυθμιστεί ως εξής (μπορείτε να δημιουργήσετε σκηνές σύμφωνα με τις δικές σας ανάγκες)
Τμήμα κώδικα (προσαρτήστε τον κώδικα στον δημιουργημένο κύβο)

Σημείωση: Η μέθοδος πρέπει να είναι δημόσια, διαφορετικά δεν θα είναι προσβάσιμη

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

Εξαγωγή WebGL (απλώς περιμένετε να ολοκληρωθεί η εξαγωγή)

Εάν θέλετε να περιηγηθείτε στα συσκευασμένα αρχεία τοπικά, πρέπει να τα κατεβάσετε. Firefox浏览器 , η λήψη απαιτεί ορισμένες συγκεκριμένες παραμέτρους διαμόρφωσης.Άνοιγμα webgl στον Firefox_Άνοιγμα webgl στο Ιστολόγιο Firefox-CSDN

5. Δείγμα ιστοσελίδας

Λαμβάνοντας υπόψη ότι ορισμένοι φίλοι μπορεί να μην ξέρουν πώς να γράφουν ιστοσελίδες, ο συγγραφέας παρέχει ένα απλό πρότυπο ιστοσελίδας για να το δοκιμάσουν όλοι.

Οδηγίες χρήσης: Δημιουργήστε ένα νέο αρχείο κειμένου, επικολλήστε τον ακόλουθο κώδικα σε αυτό, αποθηκεύστε το και αλλάξτε το επίθημα αρχείου σε.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. Ενσωματώστε το WebGL

Δημιουργήστε έναν φάκελο και τοποθετήστε το πακέτο WebGL και τις ιστοσελίδες στον ίδιο φάκελο, όπως φαίνεται παρακάτω (αυτό το βήμα είναι κυρίως για εύκολη διαχείριση, δεν χρειάζεται να το κάνετε)
Χρησιμοποιήστε το IDE για να ανοίξετε την ιστοσελίδα και να βρείτε την τοποθεσία που επισημαίνεται με το κόκκινο πλαίσιο στον παρακάτω κώδικα.
Αντικαταστήστε το περιεχόμενο στην ετικέτα div με τον ακόλουθο κώδικα Εάν το έργο σας WebGL έχει αναπτυχθεί στον διακομιστή, μπορείτε να αντικαταστήσετε το περιεχόμενο στην ετικέτα iframe με τον ακόλουθο κώδικα.src Απλώς αλλάξτε τον σύνδεσμο προς τη διεύθυνση διακομιστή. (Για πληροφορίες σχετικά με το iframe, ανατρέξτε στοHTML Iframe (w3school.com.cn)) αποθήκευση και χρήσηFirefox浏览器Ανοίξτε μια ιστοσελίδα και τα έργα που έχουν αναπτυχθεί στον διακομιστή μπορούν να ανοίξουν με οποιοδήποτε πρόγραμμα περιήγησης που υποστηρίζει WebGL.

<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

Επικολλημένη εικόνα 20240527115228

αποτέλεσμα τρεξίματος

7. Η ιστοσελίδα καλεί τη μέθοδο Unity

Βρείτε την τοποθεσία που επισημαίνεται με το κόκκινο πλαίσιο στον παρακάτω κωδικό
Αντικαταστήστε το περιεχόμενο στην ετικέτα σεναρίου με τον ακόλουθο κώδικα (ο κώδικας είναι σχετικά απλός και έχει σχόλια, οπότε δεν θα το εξηγήσω πολύ)

Ειδοποίηση: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", "这是一条测试消息");
    });
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

Επικολλημένη εικόνα 20240527122058

Αφού ολοκληρώσετε τα παραπάνω βήματα, χρησιμοποιήστε το IDE για να ανοίξετε την ιστοσελίδα WebGL (αρχείο index.html στην παρακάτω εικόνα)
Βρείτε την ετικέτα σεναρίου και βρείτε τον κώδικα για να αρχικοποιήσετε το πρόγραμμα φόρτωσης κάτω από αυτήν την ετικέτα. Και προσθέστε τον κωδικό στο κόκκινο πλαίσιο.

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

Δημιουργήστε τον κώδικα για να στείλετε μηνύματα στο Unity Εδώ εξηγούμε εν συντομία τι χρησιμοποιείται στον κώδικα.SendMessageΜέθοδοι Αυτό σας επιτρέπει να καλείτε συγκεκριμένες μεθόδους σε αντικείμενα παιχνιδιού στη σκηνή Unity από κώδικα JavaScript.

Ειδοποίηση:SendMessage Η μέθοδος έχει τρεις παραμέτρους:
Όνομα αντικειμένου στόχου: Αυτό είναι το όνομα του αντικειμένου παιχνιδιού στη σκηνή Η μέθοδος που θέλετε να καλέσετε ορίζεται σε αυτό το αντικείμενο.
Όνομα μεθόδου: Αυτό είναι το όνομα της μεθόδου που θέλετε να καλέσετε, θα πρέπει να είναι μια δημόσια μέθοδος στο σενάριο στο αντικείμενο προορισμού.
Παράμετροι: Αυτές είναι οι παράμετροι που θέλετε να μεταβιβάσετε στη μέθοδο. Στο SendMessage της Unity, αυτή η παράμετρος μπορεί να είναι μόνο τύπου συμβολοσειράς. Εάν χρειάζεται να διαβιβάσετε πιο σύνθετα δεδομένα, ίσως χρειαστεί να χρησιμοποιήσετε άλλους μηχανισμούς.

Ο συγγραφέας έχει κάνει μια απλή ενθυλάκωση της ακόλουθης μεθόδου, χρειάζεται μόνο να αλλάξετε το όνομα του αντικειμένου προορισμού.Για μια πιο λεπτομερή εξήγηση, ανατρέξτε στοUnity - Εγχειρίδιο: Κλήση συναρτήσεων σεναρίου Unity C# από JavaScript (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. Τέλος

Εντάξει, αυτά είναι όλα για σήμερα~
Εάν είναι χρήσιμο για εσάς, μπορείτε να το κάνετε like, να το ακολουθήσετε και να το συλλέξετε
Δεν είναι εύκολο να είσαι πρωτότυπος, παρακαλώ να αναφέρεις την πηγή

Κοινή χρήση τεχνολογίας