WebGL關於網頁端與U3D互動的傳值方法
因工作需要，所以對WEBGL進行了研究，期間遇到了挺多坑。所以針對我所遇到的坑，來做個總結。
這是我第一次釋出教程類文章，所以如果有遺漏或沒說清楚的地方，請留言告訴我。我也是剛剛研究，所以我無法講清楚其中原理，所以只能寫一些解決的方法，和心得體會。
測試環境：
系統：Windows7旗艦版SP1
HTTP伺服器：Nodejs //可選伺服器,瀏覽器也可直接執行。
U3D版本：.5.0f3
瀏覽器：火狐51.0.1 (32 位)
語言：c# javascript html
一個DEMO：
http://hecom.in/lab/webgl-chat/
實現方法：
首先發布Webgl，需要下載的支援元件，自動下載。
123.gif (90.54 KB, 下載次數: 0)
安裝完畢後，即可釋出WebGL版本了。
我第一次釋出的時候遇到了錯誤，沒有查詢到有用的資料，後來翻牆谷歌也無果。無奈，就將所有指令碼剪切出專案，排除指令碼問題，發現可以釋出，於是再將指令碼分批匯入，排查。發現在原專案中使用了Forms控制元件，應該是Windows控制元件造成的。using System.Windows.Forms;//控制元件本身沒有問題，註釋相關函式即可生成WebGL。
這是遇到第一個問題，原因應該是U3D的WebGL不支援Forms控制元件，想想也對。
釋出是很簡單的，但原專案Mysql不能讀取,國內無法獲取到有用的資訊，翻牆谷歌查詢資料，發現WEBGL不支援直連資料庫，這耗費了我一天的時間。
查詢資料的結果是要通過WEB端獲取資料庫的值，傳值給U3D執行。
大致的流程是 Mysql->Web->Javascript-> 。
通過翻牆谷歌找到一個日本開發者的部落格，非常詳實的介紹了WebGL
解決的辦法：
這是WEB端的程式碼，通過JavaScript傳值給U3D。
在U3D生成的index.html複製一份，改個名字，這樣新生成的就不會覆蓋修改後的了。
WEB端程式碼（基本是最小WEBGL框架了）：
[HTML] 純文字檢視 複製程式碼?
| 01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 | <!DOCTYPE html><html><head><meta charset="UTF-8"><title>測試Uweb</title><script src="TemplateData/UnityProgress.js"></script><link rel="stylesheet" href="TemplateData/style.css"><link rel="shortcut icon" href="TemplateData/favicon.ico" /><style type="text/css">.Main {width: 100%;height: 100%;}.MainLeft {width: 200px;float: left;}.MainRight {width: 800px;height: 600px;float: right;}</style></head><body><!--html--><div class="Main"><div style="font-size: 18px;text-align: center;"><h3>WebGL-測試</h3></div><div class="MainLeft"><div><form><div><label>字串資料</label><input type="text" value="1" id="storeID" placeholder="測試資料"></div> <button type="button" >提交</button></form></div></div><div class="MainRight"><canvas class="emscripten" id="canvas" style=" height: 500px;width: 600px;margin: 0;padding: 0;display: block;"></canvas></div></div><div style="font-size: 18px;text-align: center;"><h3>By Code Sconi</h3></div></div></body><!--傳值方法--><script type="text/javascript">//按鈕點選事件id為print()function print() {//獲取ID名為storeID的Value的值，賦值給sIDvar sID = document.getElementById("storeID").value; console.log(sID);//傳參到U3D場景內Button掛載指令碼的OnClickText函式，引數為一個字串SendMessage("Button", "OnClickText", sID);}</script><!--Webgl獲取資料方法，請根據自己U3D生成資料為準--><script type='text/javascript'>var Module = {TOTAL_MEMORY: 268435456,errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'compatibilitycheck: null,backgroundColor: "#ffffff",splashStyle: "Light",dataUrl: "Development/public.data",codeUrl: "Development/public.js",asmUrl: "Development/public.asm.js",memUrl: "Development/public.mem",};</script><!--讀取指令碼，必須有--><script src="Development/UnityLoader.js"></script></html> |
SendMessage是WEBGL的通訊方法，其結構為：SendMessage(“場景內物體名”,”掛載指令碼內函式名”,引數);。
這樣就將Input輸入的內容傳值到，U3D場景內的一個名稱為“Button”的遊戲物體，掛載的指令碼內名為“OnClickText”函式，其引數為Input的值。
如果不寫引數，那麼會直接執行指定的函式。
接下來是U3D端的程式碼：
[C#] 純文字檢視 複製程式碼?
| 0102030405060708091011 | using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI; public class TestClickShell : MonoBehaviour { public Text WebText;public void OnClickText(string abc){ WebText.text = abc; //在U3D的ugui的WebText上顯示傳值進來的字串}} |
這樣就將abc的值傳遞到U3D的函式內，並執行函數了。就可以通過WEB端的按鈕來控制u3d場景的變化。
但我要做到的是要傳遞多個引數到U3D，所以這個方法要擴充套件一下，不假思索我首先嚐試了這個：
[JavaScript] 純文字檢視 複製程式碼?
SendMessage("Button", "OnClickText",abc,12); |
和這個：
[JavaScript] 純文字檢視 複製程式碼?
SendMessage("Button", "OnClickText",abc+12); |
U3D:
[C#] 純文字檢視 複製程式碼?
public void OnClickText(string abc,int number); |
提示如下錯誤：
Failed to call function OnClickText of class TestClickShell Calling function OnClickText With1 parameter but the function requires 2.
函式需要2個引數，只傳遞了一個引數，錯誤；
又試了好多方法，都不行。
文章說，U3D只接受一個字串（我試了Int也行），但只接收一個。
該博文還介紹瞭如何用分隔符來獲取多個數值，找到寶藏了，於是修改為：
Javascript的傳值方法：(替換HTML內的js程式碼，值的獲取對照複製即可) [JavaScript] 純文字檢視 複製程式碼?
SendMessage("Button","OnClickText",abc+'~'+abc+'~'+abc); |
U3D的接收方法：U3D的c#函式只能接收一個字串引數。通過建立陣列，使用自建分隔符str.Split(‘~’); 來，獲取到多個數值。
[C#] 純文字檢視 複製程式碼?
| 01020304050607080910111213141516 | using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI; public class TestClickShell : MonoBehaviour {public Text textGo;public Text intGo;public Text floatGo;public void OnClickText(string str){string[] words = str.Split('~');textGo.text = words[0];intGo.text = words[1];floatGo.text = words[2];}} |
OK這樣，多值傳遞也可以了，這的確用了我幾天的時間，也是非常有樂趣的幾天。
這實現起來是很簡單的，只是官方手冊和國內資料，不夠詳盡，始終無法理解透徹，所以我翻山越嶺總算解決了這些小問題。
這是我的第一篇，希望是個好的開端，我認為我說的一些可能不那麼專業，但我盡力了。
相關推薦
WebGL關於網頁端與U3D互動的傳值方法
本帖最後由 sconi 於 2017-2-16 09:47 編輯 因工作需要，所以對WEBGL進行了研究，期間遇到了挺多坑。所以針對我所遇到的坑，來做個總結。 這是我第一次釋出教程類文章，所以如果有遺漏或沒說清楚的地方，請留言告訴我。我也是剛剛研究，所以我無法講清楚其中原理，所以只能寫一些解決的方法
Webview與原生互動傳值
UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(0,0, MainScreenWidth,MainScreenH
qml與C++互動傳值的簡單demo
qml 與C++的後臺互動，參照foruok大神的寫法自己研究，改動了一下，有不足 的地方還望路過的大神指出， 我用的是Qt5.7.1，做了個簡單的demo，下面是我的程式碼原始碼 具體的操作過程如下： 新建選擇Application專案 中的Qt Quick Contro
網頁實現文章功能，傳值到後端亂碼的處理
一 問題 惡意使用者帶上一些轉義字元使得服務報錯，還有各種換行符前端不能識別。 二 解決 前端後端使用urldecode，erlencode即可。換行符不能識別，由於前端技術水平問題，統一後端處理了。 三 真正的解決 大家都是部落格園的使用者，那麼一定知道HTML按鈕
ios js與oc原生WKWebView方法注入及互動傳值
上篇文章中,我們整理了關於WKWebView的詳細使用,包含進度條、獲取web title等等內容,這篇文章我們整理下,專案中,我們可能使用到的oc 與 js 原生互動場景下的使用.如有興趣,
前後端互動傳值
一.簡析前後端互動 java語言是一種強型別的語言，必須定義型別，然後生成例項，而js卻不是，雖然它也是面向物件的，但是它並沒有先定義類這一種概念（但是js也有型別），它是基於原型的一種模式，和java完全不同。很顯然，二者的原理，機制，語法並不能相容。二者產生的物件並不能
Android自定義view與activity的傳值
重復 轉動 自定義 activit 廣播 內部 代碼 view 等待 昨晚在寫團隊項目的時候，遇到一個問題，直到今天早上才解決。。。即在自定義view“轉盤”結束轉動後獲取結果的處理中，我是想吧值傳到activity中的一個textview中的，但我的自定義view類不是a
struts2動態方法呼叫與j2ee互動傳參
動態方法呼叫： （action程式碼） package com.zking.web; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ModelDriven; import
java swing 彈出對話方塊與父視窗傳值例項
/** * Main entry of the class. * Note: This class is only created so that you can easily preview the result at runtime. * It is not expected to be m
在Struts2中，form 表單form與action之間傳值
參考示例 前端頁面 <input type="text" id="msg_text"name="msg_text" value="<s:propertyvalue="msg_text"/>"/><s:hiddenname="backIn
四十八、mysql資料庫7：Mysql與python的互動、引數化（重點python與mysql互動傳參）
一、使用python命令連線資料庫流程 二、python3 安裝pymysql包 建立py檔案，進行插入資料：通過python檔案來連線資料庫實現互動（前提需要安裝pymysql包） 1、Li
python 其他.py 與tkinter介面傳值的方法（以遍歷資料夾進度為例）
本小白沒深入瞭解過python的原理，多個檔案只知道在一個.py檔案裡import另一個.py檔案但是問題來了 ，帶著介面的被import後會又多出來一個視窗！ 就算是呼叫一下函式都會再彈出一個介面！於是，經過不斷嘗試我分享一下我的方法……（本小白還沒用到類）本人做了一個小工
php前後端通過json資料傳值
前端關鍵程式碼(需要下載jquery-3.3.1)：<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script> <script> $(functi
MVC模式Controller與view之間傳值
使用ViewResult來傳值controller寫法 UserInfoModel UserInfoModel = new UserInfoModel(); UserInfoModel.Id = 1;
Android-Intent與Bundle在傳值上的區別
Intent與Bundle在activity之間傳值的區別 Intent的putExtra()方法有： public Intent putExtra(String name, boole
Vue父子傳值與非父子傳值
父傳子：主要是通過 子元件使用 props() 方法來接收 父元件傳遞過來的值 Vue.component('father',{ template:` <div>
頁面與頁面間傳值的幾種方法
問題 因最近嘗試實現客戶端與服務端分離，服務端只提供介面，客戶端用html+js實現，分成兩個獨立的專案部署，因專案是個人專案，客戶端展示不考慮使用像Angular、Vue、Native這種前端框架實現，於是全部使用靜態頁面實現，請求資料用ajax，在開發的過程中，就遇到了頁面之間傳值的問題。 解決方
以申購單為例項，講解Jquery動態刪減行,新增行新增滑鼠事件，子視窗與父視窗傳值，自動計算金額，及輸入值的驗證，前臺資料批量提交到後臺action
最近在為公司做一個小型ERP，其中有一個申購模組，公司需求大概：新建申購單，新建時新增要申購的物料資訊。輸入每樣物料的申購數量，預計價格，前臺自動計算總價。 設計需求大概：申購單應可以動態增減物料資訊。每條物料資訊應驗證不可重複。大概就是這些。本人剛剛畢業，參考網上資料後，
Android混合開發（一）——移動端與前端互動之JSBridge引入
一丶概述 最近轉前端，在做一個混合專案，Android + 前端Vue技術，Vue沒那麼快上手，先分享一下Android部分的經驗，後期會學習Flutter，和RN，邊學邊做邊分享 二丶效果演示 三丶JSBridge引入 1.什麼是JSBridge JSBrid
android webview 中網頁資料與js互動
html.getSettings().setJavaScriptEnabled(true);html.getSettings().setDefaultTextEncodingName("UTF-8");html.getSettings().setLayoutAlgorith