Unity 3D模型展示之webGL平台展现

这篇具有很好参考价值的文章主要介绍了Unity 3D模型展示之webGL平台展现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在之前的项目基础上我们已经打包后在PC端进行展示了。这篇文章主要介绍在切换到webGL上时效果展示不出来需要进行调整,特此记录一下。
1.平台切换
选择WebGL平台切换,没有的可以进行安装,安装之后关闭IDE重新启动。选择WebGL切换,参数参照以下设置即可。
Unity 3D模型展示之webGL平台展现
2.构建WebGL项目
选择Build And Run 在对话框中设置Build目录,设置后构建。初次构建需要些时间。耐心等待。
Unity 3D模型展示之webGL平台展现
构建之后运行发现,中文汉字不显示。并且布局也出现问题。
关于中文汉字不显示的问题解决方案是修改默认字体,找一个支持中文字体进行替换就能解决。
Unity 3D模型展示之webGL平台展现
布局显示出现问题的原因是运行时分辨率过小导致的,开发设置时UI的分辨率时在1920x1080下进行布局设计的。因此在运行是全屏即可解决。
Unity 3D模型展示之webGL平台展现
找到构建文件,打开index.html在head标签添加如下代码:
Unity 3D模型展示之webGL平台展现

	<script>
	function reset(){
    var c=document.getElementById("unity-canvas");
    c.style.width="99.5vw";
    c.style.height="99.5vh";       
}
</script>

script.onload = () => {进行调用reset();

屏蔽代码:

  • 屏蔽div标签id为unity-footer
  • 屏蔽 var fullscreenButton = document.querySelector("#unity-fullscreen-button");
  • 屏蔽fullscreenButton的单击事件
 script.onload = () => {
      reset(); 
       createUnityInstance(canvas, config, (progress) => {
         progressBarFull.style.width = 100 * progress + "%";
       }).then((unityInstance) => {
         loadingBar.style.display = "none";
         <!-- fullscreenButton.onclick = () => {            unityInstance.SetFullscreen(1);          }; -->
       }).catch((message) => {
         alert(message);
       });
     };

3.优化WebGL项目
可以通过以下设置做一下对比。

开始进行项目优化
1.下载Unity2020.1和更高的版本用必须高于2020.1的版本开发
1.如果没有必须后台运行的必要就关闭后台运行P->Resolution and Presentation ->Run In BackGround
2.修改一个合适的加载页面(尽量小加载页能让人时间感降低)因为加载的进度条是与数据加载有关与加载到引擎时间可能不对应会感觉进度条不准.
3.如果是专业版去掉splash screen关闭启动画面会有一点点提升
4.Other Settings->Auto Graphics API根据自己需要选择webgl1.0webgl2.0或者都选毕竟还有edge浏览器只支持webgl1.0
5.Other Settings->Lightmap Encoding 选择Low光照贴图选低毕竟webgl了牺牲质量换速度
6.Other Settings->Api Compiler Configuration 选择.Net Standard 2.0
7.Other Settings->Strip Engine Code 勾选上这是剥离引擎代码把Managed stripping level>等级设成高这能尽可能剥离不使用的引擎代码.
8.Other Settings-> Optimize mesh Data勾选上这是优化网格数据
9.Other Settings-> Texture MipMap Stripping 根据自己选择勾选这个是贴图边缘模糊进行抗锯齿
10.Other Settings-> Stack Trace 全部选择None 堆栈跟踪全部不需要.
11.Publishing Settings ->Enable Excptions 选择None启用异常检测发布时间不需要
12.Publishing Settings ->Compression Format 是否压缩跟自己需要选择压缩肯定需要解压如果网络不好选择压缩.压缩尽量选择Gzip兼容好本地加载可以选择不压缩
13.Publishing Settings ->Data Caching 数据缓存这个一定要勾选二次加载提速度能不少.

Unity 3D模型展示之webGL平台展现

4.全屏展示项目

Unity 3D模型展示之webGL平台展现

发布网址http://www.btlfxx.cn/u3dtest/可以进行项目查看。第一次有点慢耐心等待下。
采煤机展示案例小demo

参照文章
Unity开发优化方案:WebGL篇:http://www.u3dc.com/archives/3716文章来源地址https://www.toymoban.com/news/detail-428389.html

到了这里,关于Unity 3D模型展示之webGL平台展现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于 H5 与 WebGL 的3D太阳系立体展示

    前言 近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达

    2024年02月20日
    浏览(44)
  • Unity3d C#快速打开萤石云监控视频流(ezopen)支持WebGL平台,替代UMP播放视频流的方案(含源码)

    Universal Media Player算是视频流播放功能常用的插件了,用到现在已经不知道躺了多少坑了,这个插件虽然是白嫖的,不过被甲方和领导吐槽的就是播放视频流的速度特别慢,可能需要几十秒来打开监控画面,等待的时间较久。还有当输出WebGL的时候视频无法播放,这个问题也一

    2024年02月14日
    浏览(58)
  • 基于 HTML5 + WebGL 的太阳系 3D 展示系统

    前言 近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达

    2024年02月20日
    浏览(36)
  • Unity小游戏-惊爆游戏(PC)3D联网大逃杀游戏 项目展示+完整项目源码

    1.类似吃鸡的小游戏,但是这里没有毒圈,武器只有炸弹,没有枪。 2.游戏开始后所有人的体力会不断下降,当体力下降到0就会死亡。 3.玩家只有吃食物增加体力才能活下去,而食物只能通过空投获取或者干掉其他玩家获取。(这就意味着你必须去干人,不能躲在一边苟活)

    2023年04月20日
    浏览(51)
  • Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码)

    之前我介绍了替代Universal?Media?PlayerUMP播放石云监控视频流(ezopen)的功能,效果还是很明显的,笔者的测试是差不多3-5秒就能打开监控画面,不过稍微遗憾的是,之前的功能是iframe打开石云提供的播放网页的形式,功能基本只有画质切换,声音开关等;具体可以移步查看(https

    2024年02月13日
    浏览(54)
  • 【Unity】实用功能开发(一)实现在UI中用RawImage实时展示3D模型(背景透明,并通过UI防止3D场景遮挡)并可以通过分层完成:游戏中的人物状态展示界面,小地图,人物实时头像状态等功能

    有时由于项目效果需要,部分功能的实现受到阻碍,这里收集一些已实现的思路和方法,每次会记录大致需求和遇到的问题,如果有更好的想法,欢迎评论区讨论!!! 目录 功能描述: 需求描述: 实现步骤: ①为需要展示的内容区分层级: ②在场景中添加一个摄像机,并

    2024年02月04日
    浏览(44)
  • Unity之webgl平台如何Quit

    Application.Quit(); 在webgl平台中无法生效:关闭当前的页面。 在js.jslib文件中添加如下代码(此文件放入Plugins文件夹下): 在MonoBehaviour中调用如下: 发布webgl的index.html,在\\\"script\\\"span对中添加如下代码:

    2024年02月12日
    浏览(40)
  • Unity3D中打包WEBGL后读取本地文件数据+网络请求

    首先上一编博主运行html之后报的错误:提示内存不足!!!! 1.首先排查一下webgl包的大小,不能超过2G。 2.F12查看具体错误,在这里博主的是:        a:本地读取StreamingAssets里的配置文件,序列化失败。        b:网络请求方法不能使用JsonConvert.SerializeObject将对象重新序列

    2024年02月08日
    浏览(52)
  • 【虚拟仿真】Unity3D打包WEBGL后播放视频(VideoPlayer组件)

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 本篇文章实现Unity3D打包WEBGL后播放视频,如下图所示: 使用了VideoPlayer组件,代码比较简单。 主要就

    2023年04月25日
    浏览(57)
  • Unity跨平台开发指南(PC/VR/Android/WebGL)

    通常我在进行不同平台的设置时会基于以下几点: 1:创建、开发、打包时我们通常针对Player和Quality设置进行质量的设定 2:在不同平台上运行时,有不同的平台包体大小,加载方式的限定,测试、打包上的区别,帧率稳定60 3:代码封装上的区别,特别针对单一项目转为不同

    2024年01月21日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包