Unity发布webgl设置占满浏览器运行

Unity发布webgl设置占满浏览器运行

在这里插入图片描述
在这里插入图片描述

Unity发布webgl的时候index.html的模板文件
模板文件路径,根据自己的需求修改。

 C:\Program Files\Unity\Hub\Editor\2021.1.18f1c1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates\Default

再桌面新建一个txt,将下面的代码拷贝进去

<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>{{{ PRODUCT_NAME }}}</title><link rel="shortcut icon" href="TemplateData/favicon.ico"><link rel="stylesheet" href="TemplateData/style.css"></head><body><div id="unity-container" class="unity-desktop" style="width: 100%; height: 100%"><canvas id="unity-canvas" style="width: 100%; height: 99.5%"></canvas><div id="unity-loading-bar"><!-- <div id="unity-logo"></div> --><div id="unity-progress-bar-empty"><div id="unity-progress-bar-full"></div></div></div><div id="unity-warning"> </div><!-- <div id="unity-footer"> --><!-- <div id="unity-webgl-logo"></div>  --><!-- <div id="unity-fullscreen-button"></div> --><!-- <div id="unity-build-title">{{{ PRODUCT_NAME }}}</div> --><!-- </div> --></div><script>var container = document.querySelector("#unity-container");var canvas = document.querySelector("#unity-canvas");var loadingBar = document.querySelector("#unity-loading-bar");var progressBarFull = document.querySelector("#unity-progress-bar-full");<!-- var fullscreenButton = document.querySelector("#unity-fullscreen-button"); -->var warningBanner = document.querySelector("#unity-warning");// Shows a temporary message banner/ribbon for a few seconds, or// a permanent error message on top of the canvas if type=='error'.// If type=='warning', a yellow highlight color is used.// Modify or remove this function to customize the visually presented// way that non-critical warnings and error messages are presented to the// user.function unityShowBanner(msg, type) {function updateBannerVisibility() {warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';}var div = document.createElement('div');div.innerHTML = msg;warningBanner.appendChild(div);if (type == 'error') div.style = 'background: red; padding: 10px;';else {if (type == 'warning') div.style = 'background: yellow; padding: 10px;';setTimeout(function() {warningBanner.removeChild(div);updateBannerVisibility();}, 5000);}updateBannerVisibility();}var buildUrl = "Build";var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";var config = {dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAMEmemoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAMEsymbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endifstreamingAssetsUrl: "StreamingAssets",companyName: "{{{ COMPANY_NAME }}}",productName: "{{{ PRODUCT_NAME }}}",productVersion: "{{{ PRODUCT_VERSION }}}",showBanner: unityShowBanner,};// By default Unity keeps WebGL canvas render target size matched with// the DOM size of the canvas element (scaled by window.devicePixelRatio)// Set this to false if you want to decouple this synchronization from// happening inside the engine, and you would instead like to size up// the canvas DOM size and WebGL render target sizes yourself.// config.matchWebGLToCanvasSize = false;if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {// Mobile device style: fill the whole browser client area with the game canvas:var meta = document.createElement('meta');meta.name = 'viewport';meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';document.getElementsByTagName('head')[0].appendChild(meta);container.className = "unity-mobile";// To lower canvas resolution on mobile devices to gain some// performance, uncomment the following line:// config.devicePixelRatio = 1;canvas.style.width = window.innerWidth + 'px';canvas.style.height = window.innerHeight + 'px';unityShowBanner('WebGL builds are not supported on mobile devices.');} else {// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:<!-- canvas.style.width = "{{{ WIDTH }}}px"; --><!-- canvas.style.height = "{{{ HEIGHT }}}px"; -->}#if BACKGROUND_FILENAMEcanvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";
#endifloadingBar.style.display = "block";var script = document.createElement("script");script.src = loaderUrl;script.onload = () => {createUnityInstance(canvas, config, (progress) => {progressBarFull.style.width = 100 * progress + "%";}).then((unityInstance) => {loadingBar.style.display = "none";<!-- fullscreenButton.onclick = () => { --><!-- unityInstance.SetFullscreen(1); --><!-- }; -->}).catch((message) => {alert(message);});};document.body.appendChild(script);</script></body>
</html>

然后修改后缀为html,文件名为:index.html
然后替换模板文件,替换需要使用管理员权限
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/756481.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Transformer的前世今生 day04(ELMO

ELMO 前情回顾 NNLM模型&#xff1a;主要任务是在预测下一个词&#xff0c;副产品是词向量Word2Vec模型&#xff1a;主要任务是生成词向量 CBOW&#xff1a;训练目标是根据上下文预测目标词Skip-gram&#xff1a;训练目标是根据目标词预测上下文词 ELMO模型的流程 针对Wor…

AcWing 3498. 日期差值(每日一题)

题目链接&#xff1a;3498. 日期差值 - AcWing题库 有两个日期&#xff0c;求两个日期之间的天数&#xff0c;如果两个日期是连续的我们规定他们之间的天数为两天。 输入格式 输入包含多组测试数据。 每组数据占两行&#xff0c;分别表示两个日期&#xff0c;形式为 YYYYMM…

项目投标文件两大必备检索工具

项目投标文件两大必备检索工具&#xff1a; 1.anytxt 文件内容检索工具【AnyTXT Searcher】 这款软件也是一款搜索工具&#xff0c;但是它与Everything不同的是&#xff0c;Everything是基于文件名搜索相关文件&#xff0c;而AnyTXT是基于文件内容搜索相关文件&#xff0c;两…

项目七 完成学生信息的综合查询

项目七 完成学生信息的综合查询 1&#xff0c;探究综合查询理论的必备理论知识 笛卡尔积运算原理 笛卡尔乘积是指在数学中&#xff0c;两个集合 X 和 Y 的笛卡尓积&#xff08;Cartesian product&#xff09;&#xff0c;又称直积&#xff0c;表示为 X Y。 对数据表做笛卡…

AI入门之旅:从基础知识到实战应用(六)

一、人工智能学习之路总结 人工智能学习的关键点与挑战可以总结如下&#xff1a; 关键点&#xff1a; 理论基础&#xff1a; 理解机器学习、深度学习等人工智能的基本原理和算法是学习的基础&#xff0c;包括线性代数、概率统计、微积分等数学知识&#xff0c;以及神经网络、…

想提升职场形象?收下这3种工作中常用的邮件问候语吧!

发给老板、同事或跨部门同事的第一行邮件就会为你的整封邮件定下基调。开场白揭示了你写电子邮件时的许多情绪状态&#xff1a;它们可能传达出自信&#xff0c;增强团队成员之间的信任度。或者起到反作用&#xff1a;语气上的不足可能会影响士气并造成混乱。 因此&#xff0c;…

Linux -- 常用命令积累

1、查找后台正在运行的命令&#xff0c;以shell 程序 为例 ps -ef | grep cv1.sh使用 ps 命令来获取更详细的信息&#xff0c;包括进程的完整命令行可以使用 kill 命令通过进程的 PID 来停止特定的进程 得到以下内容&#xff1a; rot 27772 5072 0 11:59 pts/8 0…

Vue3--计算属性和侦听器

计算属性 Computed 一般是对某个响应式数据进行加工处理获得新数据 侦听器 watch 监视某个响应式数据&#xff0c;如果它发生变化&#xff0c;就自动调用某个函数

MySQL的概述与安装

一、数据库的基本概念&#xff1a; 1.1 数据&#xff1a; 1&#xff09; 描述事物的符号记录称为数据&#xff08;Data&#xff09;。数字、文字、图形、图像、声音、档案记录等 都是数据。 2&#xff09;数据是以“记录”的形式按照统一的格式进行存储的&#xff0c;而不是…

个体户、个人独资企业和一人有限公司的区别

个体工商户 定义 根据《中华人民共和国民法通则》规定&#xff0c;公民在法律允许的范围内&#xff0c;依法经核准登记&#xff0c;从事工商业经营的&#xff0c;为个体工商户。个体工商户的债务&#xff0c;个人经营的&#xff0c;以个人财产承担&#xff1b;家庭经营的&…

权限维持小结

windows 1.自启动 1、自启动路径加载 C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup\ 2、自启动服务加载 (服务重启system权限) sc create ServiceTest binPath C:\xd.exe start auto sc delete ServiceTest 3、自启动注册表加载 -…

SQL语言之CREATE/DROP/ALTER 语句

CREATE/DROP/ALTER 语句&#xff0c;表的创建、删除、修改语句 文章目录 一、模式 1、定义模式 CREATE SCHEMA 2、删除模式 DROP SCHEMA 二、基本表 1、定义基本表 CREATE TABLE (1)数据类型 (2)列级完整性约束条件 (3)表级完整性约束条件 2、在模式中定义表 3、修改…

openEuler 欧拉系统nginx正向代理 http https —— 筑梦之路

正向代理 Nginx正向代理&#xff0c;通过服务器代理客户端去重定向请求访问到目标服务器的一种代理服务。对于目标服务器来说浏览器/客户端是隐藏的。Nginx 正向代理默认只支持http 协议&#xff0c;不支持 https 协议&#xff0c;需借助"ngx_http_proxy_connect_module&q…

面试算法-49-缺失的第一个正数

题目 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 解释&#xff1a;范围 [1,2] 中的数字都…

Linux docker7--私有镜像仓库registry和UI搭建及使用

一、对于开源的镜像&#xff0c;如redis&#xff0c;nginx等&#xff0c;可以通过官方仓库Docker Hub&#xff0c;或者国内的阿里云等共有仓库下载获取到镜像。但是企业内对于自己的研发产品不可能往公共仓库去发布镜像的&#xff0c;一般都会搭建私有的镜像仓库&#xff0c;保…

力扣练习题

1. 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按…

string类型的使用以及编码方式

Redis 中所有的键的类型都是字符串类型&#xff0c;⼀个字符串的最⼤值不能超过 512 MB。 由于 Redis 内部存储字符串完全是按照⼆进制流的形式保存的&#xff0c;所以 Redis 是不处理字符集编码问题的&#xff0c;客⼾端传⼊的命令中使⽤的是什么字符集编码&#xff0c;就存储…

Marin说PCB之电源完整性之直流压降仿真CST--03

本期内容主要讲解的是关于在CST软件上电源直流压降仿真VRM的一些相关参数设置&#xff0c;小编我在之前文章中有说到过如何利用CST仿真电源信号的直流压降&#xff0c;不过有一些问题我这边再去补充一些。 首先就是VRM芯片的设置了&#xff0c;小编我还是按照之前那样设置&…

智能合约 之 ERC-20介绍

什么是ERC20 ERC20全称为Ethereum Request for Comment 20&#xff0c;是一种智能合约标准&#xff0c;用于以太坊网络上的代币发行 姊妹篇 - 如何部署ERC20 ERC20的应用场景 代币化资产&#xff0c;例如&#xff1a;USDT 是一种以美元为背书的ERC20代币&#xff0c;每个USDT代…

如何解决MySQL死锁(看懂MySQL锁日志)

有时候系统在生产运行着&#xff0c;会突然爆出 [40001][1213] Deadlock found when trying to get lock; try restarting transaction 这个时候每个人都会很紧张&#xff0c;因为死锁会影响DB性能&#xff0c;严重时甚至拖垮整个系统。在实际的环境中&#xff0c;很多服务会共…