怎么改版网站,网站优化主要内容,网站建设的缺点,软环境建设办公室网站推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群#xff1a;398291828小红书小破站 大家好#xff0c;我是佛系工程师☆恬静的小魔龙☆#xff0c;不定时更新Unity开发技巧#xff0c;觉得有用记得一键三连哦。
一、前言
Unity3D发布的WEBGL程序是不支持直接的I/O操… 推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群398291828小红书小破站 大家好我是佛系工程师☆恬静的小魔龙☆不定时更新Unity开发技巧觉得有用记得一键三连哦。
一、前言
Unity3D发布的WEBGL程序是不支持直接的I/O操作所以也就不能直接访问用户电脑的文件。
但是也是有办法去访问电脑中的文件打开文件的。
比如情况一如果知道电脑文件在什么位置、什么名字。
可以参考这篇文章 【Unity3D小技巧】Unity3D中打包WEBGL后读取本地文件数据
情况二知道要上传什么类型的文件但是需要弹出窗口来选择文件并打开。
这篇文章就来讨论一下WEBGL打开Window文件对话框并打开文件后上传文件显示图片/文本。
二、实现过程
先来看一下效果
2-1、实现分析
既然Unity3D没办法直接进行I/O操作但是JavaScript可以进行I/O操作那是不是就可以让Unity跟JS进行通信来进行操作。
JavaScript打开文件的代码很简单
input typefile //input那么就可以用Unity的按钮去调用这个组件从这个组件中获取到文件流。
OK理论存在实践开始。
2-2、Unity3D中做的准备
1在Unity的工程中新建Plugins文件夹 2在里面新建WebGl.jslib文件编辑代码这个文件是JS与WEBGL交互用的。
详情参照Unity官网https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html
文件里面的内容如下
mergeInto(LibraryManager.library, {clickSelectFileBtn:function () {console.log(Enter);clickSelectFileBtn();},
});3搭建Unity程序 一个Button用来响应Js函数一个Image用来显示图片Text用来显示文本内容。
3在Hierarchy视图新建一个Scripts对象名字需要跟我一样因为后面要跟js脚本挂载脚本脚本名随意
using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.Networking;
using UnityEngine.UI;public class ReceiveDataHandle : MonoBehaviour
{public Button BtnLoad;public Image showImg;public Text showText;[DllImport(__Internal)]private static extern void clickSelectFileBtn();/// summary/// 点击Open按钮/// /summarypublic static void BtnLoadEvent(){clickSelectFileBtn();}void Start(){BtnLoad.onClick.AddListener(BtnLoadEvent);}/// summary/// 接收base64字符串/// /summary/// param namebase64Str/parampublic void GetBase64(string base64Str){Debug.Log(base64Str);string[] split base64Str.Split(|);if (split[0].Contains(jpg)){StartCoroutine(ReadTexture(split[1], LoadImg));}else if (split[0].Contains(txt)){StartCoroutine(ReadData(split[1], LoadText));}else{Debug.Log(文件格式错误);return;}}/// summary/// 读取图片/// /summary/// param namepath/param/// param nameaction/param/// returns/returnsIEnumerator ReadTexture(string path,UnityActionTexture action){Debug.Log(path);UnityWebRequest request UnityWebRequestTexture.GetTexture(path);yield return request.SendWebRequest();if (request.isNetworkError || request.isHttpError){Debug.Log(request.error);}else{byte[] imgdata request.downloadHandler.data;action(DownloadHandlerTexture.GetContent(request));}}/// summary/// 加载图片/// /summary/// param nametexture/paramvoid LoadImg(Texture texture){Sprite ImgSprite Sprite.Create((Texture2D)texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0.5f, 0.5f));showImg.sprite ImgSprite;}/// summary/// 读取文本/// /summary/// param namepath/param/// param nameaction/param/// returns/returnsIEnumerator ReadData(string path, UnityActionstring action){Debug.Log(path);UnityWebRequest request UnityWebRequest.Get(path);yield return request.SendWebRequest();if (request.isNetworkError || request.isHttpError){Debug.Log(request.error);}else{Debug.Log(request.downloadHandler.text);action(request.downloadHandler.text);}}/// summary/// 加载文本/// /summary/// param nametext/paramvoid LoadText(string text){showText.text text;}
}注意 clickSelectFileBtn函数用来调用Js函数GetBase64函数用来接收数据。
2-3、打包WEBGL后修改
注意我用的Unity2019.4.9f1版本。高版本打包出来的index.html以及Build里面的文件跟我的不一致这个后面有空再说如何匹配高版本吧先用2019版本演示。
打包之后 修改index.html文件
!DOCTYPE html
html langen-usheadmeta charsetutf-8meta http-equivContent-Type contenttext/html; charsetutf-8titleUnity WebGL Player | Demo_WEBGLLoadFile/titlelink relshortcut icon hrefTemplateData/favicon.icolink relstylesheet hrefTemplateData/style.cssscript srcTemplateData/UnityProgress.js/scriptscript srcBuild/UnityLoader.js/scriptscriptvar unityInstance UnityLoader.instantiate(unityContainer, Build/WEBGL_LoadFile.json, {onProgress: UnityProgress});function clickSelectFileBtn() {var tempFileLayout document.getElementById(files);tempFileLayout.click();}function fileImport() {//获取读取我文件的File对象var selectedFile document.getElementById(files).files[0];if (selectedFile ! null) {var reader new FileReader();reader.readAsDataURL(selectedFile);reader.onload function (e) {var base64Str e.currentTarget.result.substring(e.currentTarget.result.indexOf(,) 1);sendMessageToUnity(base64Str);}}}function sendMessageToUnity(s) {//发送给unityvar filedocument.getElementById(files).files[0];SetFileUrlByDragEnd(file);}function SelectFile(){var filedocument.getElementById(files).files[0];SetFileUrlByDragEnd(file);}function SetFileUrlByDragEnd(file) {unityInstance.SendMessage(Scripts, GetBase64, file.name|URL.createObjectURL(file));}/script/headbodyinput typefile idfiles styledisplay:none onchangefileImport()div classwebgl-contentdiv idunityContainer stylewidth: 960px; height: 600px/divdiv classfooterdiv classwebgl-logo/divdiv classfullscreen onclickunityInstance.SetFullscreen(1)/divdiv classtitleDemo_WEBGLLoadFile/div/div/div/body
/html代码解释一下 1首先是加了一个input typefile idfiles styledisplay:none onchangefileImport()用来响应打开文件的操作。
2然后用Unity程序的Button响应clickSelectFileBtn函数去触发这个组件。
3添加fileImport去处理打开的文件得到文件流。
4获得文件名和文件路径通过unityInstance.SendMessage(Scripts, GetBase64, file.name|URL.createObjectURL(file));传给Unity。
5URL.createObjectURL(file)可以获得本地文件的缓存url直接发给Unity然后Unity用来加载。
2-4、效果演示 三、后记
如果觉得本篇文章有用别忘了点个关注关注不迷路持续分享更多Unity干货文章。 你的点赞就是对博主的支持有问题记得留言
博主主页有联系方式。
博主还有跟多宝藏文章等待你的发掘哦
专栏方向简介Unity3D开发小游戏小游戏开发教程分享一些使用Unity3D引擎开发的小游戏分享一些制作小游戏的教程。Unity3D从入门到进阶入门从自学Unity中获取灵感总结从零开始学习Unity的路线有C#和Unity的知识。Unity3D之UGUIUGUIUnity的UI系统UGUI全解析从UGUI的基础控件开始讲起然后将UGUI的原理UGUI的使用全面教学。Unity3D之读取数据文件读取使用Unity3D读取txt文档、json文档、xml文档、csv文档、Excel文档。Unity3D之数据集合数据集合数组集合数组、List、字典、堆栈、链表等数据集合知识分享。Unity3D之VR/AR虚拟仿真开发虚拟仿真总结博主工作常见的虚拟仿真需求进行案例讲解。Unity3D之插件插件主要分享在Unity开发中用到的一些插件使用方法插件介绍等Unity3D之日常开发日常记录主要是博主日常开发中用到的用到的方法技巧开发思路代码分享等Unity3D之日常BUG日常记录记录在使用Unity3D编辑器开发项目过程中遇到的BUG和坑让后来人可以有些参考。
