首页 > 其他分享 >WebGL网页带参传入遇坑记录

WebGL网页带参传入遇坑记录

时间:2024-11-15 09:48:07浏览次数:3  
标签:index gameInstance 遇坑 WebGL unity game 带参 html 参数

项目场景:

网页打开WebGL带参数传入的解决方案。然而本人并没有系统的学习过JavaScript,导致踩得坑有点多,特记录一下。


问题分析

在index.html中获取的参数,传入到unity当中去使用,试了网上的很多种办法,有用xxx.jslib的,但此方法仅限于网页打开的index.html就为最终需要打开的位置,我这边的情况有点特殊,是在index.html中通过iframe跳入到另外的game.html中,等打开unity的界面其实是game.html的内容了,所以用xxx.jslib只能获取到game.html的参数,并不能获取到index.html的参数。

<iframe id="Frame" style="Frame" src="game.html"></iframe>

解决方案:

最后的解决方案是通过index.html传入参数,然后传给game.html,最后再传给unity里面。
我这边程序的打开逻辑如下:

外部带参数传入—》index.html获取参数 —》 传入到game.html —》 unity中

以下是index.html的代码部分:

<iframe id="Frame" style="Frame" src="game.html"></iframe>
<script>
    var Frame = document.getElementById("Frame");
    Frame.onload = function () {
        //获取url的问号之后的部分:https://1.1.1.1/index.html?a=b&b=c
        // returnStr =”a=b&b=c“;
        var returnStr = window.location.search;		
        var param1 = returnStr;
        //再通过iframe的属性将内容传入到game.html;
        Frame.contentWindow.postMessage({ param1 }, "*");
    };
</script>

以下为game.html的代码部分:

	//定义unity实例
    var gameInstance;
    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
            progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
        	//在有实例后进行赋值
            gameInstance = unityInstance;
            loadingBar.style.display = "none";
        }).catch((message) => {
            alert(message);
        });
    };
    
    //这里去调用传回到unity中
    function CallUnity() {
        console.log(gameInstance == null);
        //参数分别是,游戏场景里挂载脚本的物体,脚本要被调用的方法名称,
        //需要传输的参数(得看接收到方法带不带参数);
        gameInstance.SendMessage("GameAppExtral", "Test03", param1);
        //这是不带参数的示例
        gameInstance.SendMessage("GameAppExtral", "Test02");
    }
    
	//此方法为unity端调用
    function Test01() {
        CallUnity();
    }

再接下来就是unity部分的代码:

public class TestURLPara : MonoBehaviour
{
    void Start()
    {
    	//该方法会显示已过时
        Application.ExternalCall("Test01");
    }

    public void Test02() 
    {
        Debug.Log("invole");
    }

    public void Test03(string str) 
    {
        Debug.Log(str);
    }
}

成功在html端获取到调用。在这里插入图片描述
unity场景内的格式如下:
game.html里调用的 gameInstance.SendMessage(“GameAppExtral”, “Test02”);
第一个参数则为系统场景里的没有父物体的gameobject,第二个参数则是挂载在当前物体里所包含的方法名称。
在这里插入图片描述
如果是只有单单一层的index.html,启动即可打开游戏本体,那么只需要在index.html里获取参数传入到unity中即可。

标签:index,gameInstance,遇坑,WebGL,unity,game,带参,html,参数
From: https://blog.csdn.net/huang_bi/article/details/143776197

相关文章

  • WebXR与WebGL集成开发教程_2024-07-26_15-03-25.Tex
    WebXR与WebGL集成开发教程WebXR简介WebXR的由来与优势WebXR是WebXRDeviceAPI的简称,它是一个用于在Web浏览器中创建沉浸式虚拟现实(VR)和增强现实(AR)体验的API。WebXR的设计旨在提供一个统一的接口,让开发者能够更容易地在不同的设备和平台上创建和部署XR(扩......
  • 带参数的 Python 装饰器让你的代码更优雅
    引言在上一篇文章中,我们介绍了Python装饰器的基本概念及其简单用法。前面讲到的装饰器都是不带参数的装饰器,在需要对装饰器做一些针对性的处理的时候就不太适用了,这个时候需要对装饰器传入一些参数,根据传入的参数进行不同的处理。带参数装饰器在实际开发中能够灵活地调整函数......
  • 解决pbootcms伪静态链接带参数跳转404错误页面
    检查PbootCMS后台设置检查是否有自定义的伪静态规则,确保这些规则没有冲突。检查URL参数处理如果你的链接带有参数,确保这些参数在PbootCMS中被正确处理。有时候,某些参数可能需要特殊处理或过滤。在PbootCMS的控制器或模型中,检查是否对URL参数进行了适当的处理和验证。......
  • 【ChatGPT】让ChatGPT在回答中附带参考文献与来源
    让ChatGPT在回答中附带参考文献与来源在撰写内容时,引用参考文献和来源可以增强信息的可信度和权威性。通过引导ChatGPT生成带有参考文献的回答,用户能够获取更可靠的信息和背景资料。本文将探讨如何有效地引导ChatGPT在回答中附带参考文献与来源。一、理解参考文献的重要性......
  • SpringBoot @Test 带参数的单元测试
    org.junit.jupiter.api.extension.ParameterResolutionException:NoParameterResolverregisteredforparameter[java.lang.Stringcode]inmethod[voidcom.vipsoft.admin.RoleTest.getRoleTest(java.lang.String)].@TestvoidgetRoleTest(Stringcode){SysRol......
  • WebGl 缩放矩阵
    缩放矩阵是线性代数中的一种矩阵,用于描述图形在空间中沿着各个坐标轴进行均匀缩放的变换。在3D图形编程中,缩放矩阵通常用于调整物体的大小,而不改变其形状。|x000||0y00||00z0||0001|其中,(x,y,z)是缩放向量,表示沿着x、y、z轴的缩放比......
  • WebGl 旋转矩阵
    旋转矩阵是一个正交矩阵,用于在二维或三维空间中描述一个坐标系绕原点的旋转。在三维空间中,旋转矩阵通常用于沿x轴、y轴或z轴进行旋转,或者沿任意给定轴线进行旋转。旋转矩阵具有一些重要性质,例如它们是正交的,即它们的共轭转置等于其逆矩阵,而且它们保持向量的长度和夹角不变。......
  • WebGl 实现图片平移、缩放和旋转
    1.图片平移在WebGL中实现图片平移,可以通过修改顶点着色器中的顶点位置来实现。平移的基本思想是将每个顶点的位置向量沿着指定的方向(通常是x轴和y轴)进行平移。在顶点着色器中,可以通过添加或减去一个统一的偏移量(uniformvariable)来实现这一点。例如,如果要在x轴和y轴上分别平移......
  • webGL入门(五)绘制多边形
    代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • webGL入门对于LINES_STRIP与LINE_STRIP绘制连线的不同之处
    图片对比:上图为LINE_STRIP 上图为LINES_STRIPLINE_STRIP代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0&q......