Unity3d 5发布成 WebGL文件容量巨大？ - 知乎41被浏览12844分享邀请回答opengg.me/940/spaceshooter-simple-unity3d-game/114 条评论分享收藏感谢收起1添加评论分享收藏感谢收起查看更多回答WebGL关于网页端与U3D互动的传值方法
本帖最后由 sconi 于
09:47 编辑
因工作需要，所以对WEBGL进行了研究，期间遇到了挺多坑。所以针对我所遇到的坑，来做个总结。
这是我第一次发布教程类文章，所以如果有遗漏或没说清楚的地方，请留言告诉我。我也是刚刚研究，所以我无法讲清楚其中原理，所以只能写一些解决的方法，和心得体会。
测试环境：
系统：Windows7旗舰版SP1
HTTP服务器：Nodejs //可选服务器,浏览器也可直接运行。
版本：.5.0f3
浏览器：火狐51.0.1 (32 位)
语言：c# javascript html
一个DEMO：
http://hecom.in/lab/webgl-chat/
实现方法：
首先发布Webgl，需要下载的支持组件，自动下载。
123.gif (90.54 KB, 下载次数: 0)
18:22 上传
安装完毕后，即可发布WebGL版本了。
我第一次发布的时候遇到了错误，没有查询到有用的资料，后来翻墙谷歌也无果。无奈，就将所有脚本剪切出项目，排除脚本，发现可以发布，于是再将脚本分批导入，排查。发现在原项目中使用了Forms控件，应该是Windows控件造成的。using System.Windows.F//控件本身没有问题，注释相关函数即可生成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: 200&&&&&&&&&&&&&&&&float:&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&.MainRight {&&&&&&&&&&&&&&&&width: 800&&&&&&&&&&&&&&&&height: 600&&&&&&&&&&&&&&&&float:&&&&&&&&&&&&}&&&&&&&&&/style&&&&&&/head&&&&&&&body&&&&&&&&&&&&&&&&&&div class="Main"&&&&&&&&&&&&&&div style="font-size: 18text-align:"&&&&&&&&&&&&&&&&&&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: 500width: 600margin: 0;padding: 0;display:"&&/canvas&&&&&&&&&&&&&&/div&&&&&&&&&&/div&&&&&&&&&&div style="font-size: 18text-align:"&&&&&&&&&&&&&&h3&By Code Sconi&/h3&&&&&&&&&&/div&&&&&&&&&&/div&&&&&&/body&&&&&&&&&&script type="text/javascript"&&&&&&&&&//按钮点击事件id为print()&&&&&&&&function print() {&&&&&&&&&&&&//获取ID名为storeID的Value的值，赋值给sID&&&&&&&&&&&&var sID = document.getElementById("storeID"). &&&&&&&&&&&&console.log(sID);&&&&&&&&&&&&//传参到U3D场景内Button挂载脚本的OnClickText函数，参数为一个字符串&&&&&&&&&&&&SendMessage("Button", "OnClickText", sID);&&&&&&&&}&&&&&/script&&&&&&&&&&script type='text/javascript'&&&&&&&&&var Module = {&&&&&&&&&&&&TOTAL_MEMORY: ,&&&&&&&&&&&&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的值。
如果不写参数，那么会直接执行指定的函数。
Html和JavaScript的教程可以到： 菜鸟教程网站获取。
接下来是U3D端的代码：
[C#] 纯文本查看 复制代码&0102030405060708091011using System.Cusing System.Collections.Gusing UnityEusing UnityEngine.UI; &public class TestClickShell : MonoBehaviour { &&&&public Text WebT&&&&public void OnClickText(string abc)&&&&{ &&&&&&&&WebText.text =& &&&&}}
这样就将abc的值传递到U3D的函数内，并执行函数了。就可以通过WEB端的按钮来控制场景的变化。
但我要做到的是要传递多个参数到U3D，所以这个方法要扩展一下，不假思索我首先尝试了这个：
[JavaScript] 纯文本查看 复制代码&SendMessage("Button", "OnClickText",abc,12);
[JavaScript] 纯文本查看 复制代码&SendMessage("Button", "OnClickText",abc+12);
[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个参数，只传递了一个参数，错误；
又试了好多方法，都不行。
如果成功就见鬼了，所以我没搞清原理，就想当然了，于是翻山越岭找到一篇美帝的博客：-communication-and-back-again/
文章说，U3D只接受一个字符串（我试了Int也行），但只接收一个。
该博文还介绍了如何用分隔符来获取多个数值，找到宝藏了，于是修改为：
Javascript的传值方法：(替换HTML内的js代码，值的获取对照复制即可) [JavaScript] 纯文本查看 复制代码&SendMessage("Button","OnClickText",abc+'~'+abc+'~'+abc);通过建立分割符来分割不同参数，用连接串将不同参数连接起来。
U3D的接收方法：U3D的c#函数只能接收一个字符串参数。通过建立数组，使用自建分隔符str.Split(‘~’); 来，获取到多个数值。
[C#] 纯文本查看 复制代码&01020304050607080910111213141516using System.Cusing System.Collections.Gusing UnityEusing 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这样，多值传递也可以了，这的确用了我几天的时间，也是非常有乐趣的几天。
这实现起来是很简单的，只是官方手册和国内资料，不够详尽，始终无法理解透彻，所以我翻山越岭总算解决了这些小问题。
这是我的第一篇，希望是个好的开端，我认为我说的一些可能不那么专业，但我尽力了。
本文已收录于以下专栏：
相关文章推荐
这里我们将描述Cult3D的脚本特征，以及如何在网页中使用脚本与Cult3D对象的交互操作，通过交互我们可以在用户选择了正确的答案后开始一段动画，或者按用户的选择改变物体的颜色，等等。当Cult3D运...
今年下半年， HTML5 和 WebGL 变成极热门词语，3D 网页来势汹汹。主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D...
在PC上和IOS上读取XML文件的方式略有差别，经测试，IOS上不支持如下方法载入XML文件：
XmlDocument xmlDoc = new XmlDocument();
此贴会持续更新，都是项目中常会遇到的问题，总结成贴，提醒自己和方便日后检查，也能帮到有需要的同学。
若各位有啥好BUG好异常好警告好崩溃可以分享的话，请多多指教。xuzhiping7#qq.co...
关于物体的移动方式，用实例的方式写下来更直观点，也方便自己以后复习。
下面列举几种方式，效果都不一样。
U3D编译Web PC IOS Android平台游戏和运行方法
一、U3D游戏编译介绍：
U3D做为一款支持多平台编译开发的游戏引擎，相比较其他的游戏开发引擎而言，不可谓不强大，而Mono是其能...
持久化数据PlayerPrefs其实说白了，就是Android里面的bundle《【Android】多个Activity之间利用bundle传递数值》（点击打开链接），其实说得更直白些，就是一个超级全...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)怎么用unity通过程序来改变一个导入其中的物体的形状，如果用unity难以实现的话，webgl呢？ - 知乎13被浏览1484分享邀请回答1添加评论分享收藏感谢收起1添加评论分享收藏感谢收起查看更多回答}