替换自己的WebGL模板
- Assets文件夹下创建WebGLTemplates文件夹
- 在该文件夹下创建自己的模板文件夹(多个模板就创建多个文件夹)
在projectsetting中可以看到自己创建的模板,打包时勾选对应模板即可
自定义模板相关
官方文档 注意模板内的html部分路径是根据打包生成的,如果写死会造成打不开,用相对于的js宏更改,打包后可自动替换。 我看20版本的宏变成了三个花括号的了 记录下老版的:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 1920px; height: 1080px"></div>
</div>
</body>
</html>
JS调用unity函数
简便方式:
unity准备
- 在unity场景里最上层新建一个空物体"newGameObject"
- 在该物体上挂载脚本"CallFuncScript"
- 在脚本中写public函数"MyFunc1",例如:注意函数参数目前好像只能有一个,多个会调用失败。所以下边是解析字符串来获取参数了。
public void ScrollByAngle(string cmd)
{
string[] spl = cmd.Split('/');
float angle;
float time;
float.TryParse(spl[0], out angle);
float.TryParse(spl[1], out time);
if (dotww != null)
{
dotww.Complete();
}
Vector3 euler = obj.localRotation.eulerAngles;
euler.z += angle;
dotww = obj.DOLocalRotate(Quaternion.Euler(euler).eulerAngles, time);
}
js调用
以默认模板为例:
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/test_1.json", {onProgress: UnityProgress});
</script>
实例命名为unityInstance 调用方式:注意和unity端命名对应一下
unityInstance.SendMessage("newGameObject", "MyFunc1", "90/2");
发布的WebGL背景透明
注意:
透明后不能使用后处理效果,异常
方式
var LibraryGLClear = {
glClear: function(mask)
{
if (mask == 0x00004000)
{
var v = GLctx.getParameter(GLctx.COLOR_WRITEMASK);
if (!v[0] && !v[1] && !v[2] && v[3])
return;
}
GLctx.clear(mask);
}
};
mergeInto(LibraryManager.library, LibraryGLClear);
- 将后缀txt修改为jslib
- 将该文件拖入项目的Assets文件夹下的Plugins文件夹中(没有就创建一个)
- 相机设置:相机模式设置成纯色(solid color),背景色透明度设置0
- 打包
- 打包后的html中将unity的canvas的background 设置为transparent
|