WebGL平台动态修改窗口大小

1.静态设置

发布之前在Player Setting/Resolution and Presentation设置

2.动态设置

经过测试在WebGL平台打包后,Screen.SetResolution设置分辨率是不生效的

需要写js脚本

1.新建脚本WebGLResize.jslib,放在Plugins\WebGL下面

javascript 复制代码
mergeInto(LibraryManager.library, {
    ResetCanvasSize: function(width, height) {
        // 获取Unity canvas元素
        var canvas = document.querySelector("#unity-canvas");
        if (!canvas) {
            console.warn("无法找到Unity canvas元素");
            return;
        }
        
        // 设置canvas的新尺寸
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        
        // 如果存在Unity实例,通知其resize
        if (Module) {
            Module.canvas.width = width;
            Module.canvas.height = height;
            
            // 触发Unity内部的resize事件
            if (typeof Module.onResize === 'function') {
                Module.onResize(width, height);
            }
        }
        
        // 调整容器大小(如果有父容器)
        var parent = canvas.parentElement;
        if (parent) {
            parent.style.width = width + "px";
            parent.style.height = height + "px";
        }
        
        console.log("画布已调整为: " + width + "x" + height);
    }
});

2.C#调用

完整代码:

cs 复制代码
using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using TMPro;
using UnityEngine;

public class WebTest : MonoBehaviour
{
    public TextMeshProUGUI logText;

    public void Set600_960()
    {
        SetCustomCanvasSize(600, 960);
    }

    public void Set960_600()
    {
        SetCustomCanvasSize(960, 600);
    }

    public void ClearLog()
    {
        logText.text = "";
    }


#if UNITY_WEBGL && !UNITY_EDITOR
        [DllImport("__Internal")]
        private static extern void ResetCanvasSize(int width, int height);
#endif
// 设置自定义分辨率
    private void SetCustomCanvasSize(int width, int height)
    {
#if UNITY_WEBGL && !UNITY_EDITOR
            ResetCanvasSize(width, height);
#endif
        string msg = $"{width}x{height}  Screen:{Screen.width}x{Screen.height}";
        AppendLogText(msg);
        Debug.LogWarning(msg);
    }

    void AppendLogText(string msg)
    {
        logText.text = logText.text + "\n" + msg;
    }
}

3.效果展示

相关推荐
三维搬砖者4 天前
AI 解密大厂 Three.js 三维引擎开发 03|从经纬度到三维世界的坐标解码
webgl·three.js
threelab8 天前
引擎案例分析 02|GeoLayer 大厂地理可视化方案深度拆解
javascript·3d·webgl
山海鲸可视化8 天前
【山海鲸功能演示】如何设置选中按钮的时候其他按钮切换为默认样式?
webgl·可视化·数据可视化·数据表格·搜索框
kadog8 天前
GraphX:基于 WebGL 区间算术的 GPU 加速隐函数绘图器
前端·javascript·数学建模·webgl
ct9789 天前
Cesium的Primitive API
gis·webgl·cesium
sin°θ_陈12 天前
前馈式3D Gaussian Splatting 研究地图(路线二):几何优先的前馈式 3DGS——前馈式 3DGS 如何重新拥抱多视图几何
深度学习·3d·webgl·三维重建·空间计算·3dgs·空间智能
星河耀银海13 天前
3D效果:HTML5 WebGL结合AI实现智能3D场景渲染
前端·人工智能·深度学习·3d·html5·webgl
点量云实时渲染-小芹13 天前
Unity模型数字孪生虚拟仿真webgl推流卡实时云渲染推流
unity·webgl·数字孪生·实时云渲染·虚拟仿真·云推流
WebGISer_白茶乌龙桃15 天前
基于 Cesium 的 GLB 建筑模型分层分房间点击拾取技术实现
前端·javascript·vue.js·webgl·cesium
sin°θ_陈15 天前
前馈式3D Gaussian Splatting 研究地图(路线一):像素对齐高斯的起点——pixelSplat 与 latentSplat 在解决什么
python·深度学习·3d·aigc·webgl·3dgs·空间智能