当前位置:首页 > 每日看点 > 正文内容

unity3D 项目如何实现与网页的交互?

卡卷网11个月前 (12-20)每日看点183

Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。这项技术为在 Unity 项目中创建动态交互式元素提供了可能性,例如游戏内浏览器、菜单、聊天、内部 Wiki 或实时数据显示。

要在项目中实现此功能,您需要将 Web 视图集成到 Unity 中。DotNetBrowser 是一个单独的 .NET 库,用于加载和渲染网页,并支持 .NET Standard 2.0,因此可以集成到 Unity 中。

unity3D 项目如何实现与网页的交互?  第1张

在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。

DotNetBrowser(DotNetBrowser试用下载是一个.NET库,允许将基于Chromium的WPF和WinForms组件嵌入到.NET应用程序中,以显示使用HTML5,CSS3,JavaScript,Silverlight等构建的现代网页。

unity3D 项目如何实现与网页的交互?  第2张

基于FPS Microgame模板的项目中HTML聊天和游戏菜单。

设置 Unity 项目

首先,确保您的 Unity 环境已设置并可供使用。打开 Unity Hub 并为 Windows、macOS 或 Linux 创建一个新的 3D 项目。

安装 DotNetBrowser

要将 DotNetBrowser 依赖项作为包安装,请执行以下操作:

  • 在 Unity 编辑器顶部菜单中,单击“窗口 → 包管理器”菜单项,打开包管理器。
  • 在包管理器窗口中,点击左上角的“+”按钮,选择“从 git URL 安装包...”菜单项。
  • 粘贴下面给出的包 URL,然后按“安装”按钮。

https://github.com/TeamDev-IP/DotNetBrowser-Examples.git?path=csharp/unity3d/Dependencies

  • 等待软件包安装完成并且 DotNetBrowser 依赖项恢复。安装的软件包应如下所示:

unity3D 项目如何实现与网页的交互?  第3张

安装了 DotNetBrowser 依赖包的包管理器。

  • 关闭包管理器。您已完成此步骤。

创建材质来显示网状纹理

在将网页内容渲染到 3D 对象之前,您需要创建一种将网页显示为纹理的材质。

  • 创建新材质:
  1. 在“Assets”文件夹中单击鼠标右键,选择“创建 → 材质”,并将其命名为“WebTextureMaterial”。
  2. 设置着色器并为其添加纹理。“Unlit/Texture”着色器适合我们的任务。
  3. 将“Tiling X”设置为 -1。这是必要的,因为 Chromium 发送的是按 X 反转的像素数据。

unity3D 项目如何实现与网页的交互?  第4张

  • 创建平面:
  1. 向场景中添加一个平面。您可以通过进入顶部菜单并选择“GameObject → 3D Object → Plane”来执行此操作。
  2. 面对场景摄像机。
  3. 将材质拖到平面上。此材质将显示网页内容。

将网页内容渲染为纹理

现在,您需要将网页或 HTML 内容渲染为可应用于材质的纹理。

  1. 创建脚本来处理网页内容。创建一个新的 C# 脚本(在“Assets → Create → Empty C# Script”中单击右键并命名BrowserScript)。
  2. 编写代码以加载和渲染网页内容。以下是初始化 DotNetBrowser 以在纹理上渲染网页的示例脚本:

using DotNetBrowser.Browser; using DotNetBrowser.Browser.Widgets.Handlers; using DotNetBrowser.Engine; using DotNetBrowser.Geometry; using DotNetBrowser.Handlers; using DotNetBrowser.Ui; using UnityEngine; using Color = DotNetBrowser.Ui.Color; namespace Assets.Scripts { public class BrowserScript : MonoBehaviour { private Texture2D texture; // The URL to render. public string DefaultUrl = "https://html5test.teamdev.com"; // The default browser width. public uint Width = 1024; // The default browser height. public uint Height = 768; // The latest rendered bitmap data of the browser web page. public Bitmap Bitmap { get; private set; } // An instance of IBrowser controlled by this script. public IBrowser Browser { get; private set; } // An instance of IEngine controlled by this script. public IEngine Engine { get; private set; } public void Awake() { // Initialize the DotNetBrowser engine. EngineOptions engineOptions = new EngineOptions.Builder { LicenseKey = "your_license_key", RenderingMode = RenderingMode.OffScreen }.Build(); Engine = EngineFactory.Create(engineOptions); // Create a browser instance. Browser = Engine.CreateBrowser(); // Set the browser size and transparency. Browser.Size = new Size(Width, Height); Browser.Settings.TransparentBackgroundEnabled = true; Browser.Settings.DefaultBackgroundColor = new Color(0, 0, 0, 0); // Conp rendering the browser content // and save the rendered image. var provider = (IOffScreenRenderProvider)Browser; provider.PaintHandler = new Handler<PaintParameters>(p => Bitmap = p.View); provider.Show(); } public void OnDestroy() => Engine?.Dispose(); public void Update() { if (Bitmap == null) return; int newWidth = (int)Bitmap.Size.Width; int newHeight = (int)Bitmap.Size.Height; if (texture == null || texture.width != newWidth || texture.height != newHeight) { texture = new Texture2D(newWidth, newHeight, TextureFormat.BGRA32, true); var render = gameObject.GetComponent<MeshRenderer>(); render.material.mainTexture = texture; } texture.SetPixelData((byte[])Bitmap.Pixels, 0); texture.Apply(true); } public void Start() { Browser.Navigation.LoadUrl(DefaultUrl); } } }

分配脚本并测试

将脚本附加到您之前创建的平面。使用脚本和材质,您的平面的检查器窗格应如下所示:


unity3D 项目如何实现与网页的交互?  第5张

在 Unity 中播放场景。现在应该会在您应用于平面的材质上渲染网页内容。如果您已正确完成所有操作,则应该看到以下内容:

unity3D 项目如何实现与网页的交互?  第6张

使网页内容具有交互性

您可以进一步为网页内容添加交互性。例如,您可以让用户使用鼠标或触摸屏与网页进行交互。

您可能需要捕获用户点击、鼠标移动或触摸事件,以将其传递给 Web 内容进行交互。

在 Unity 中捕获鼠标点击的最简单方法是将OnMouseDown() 和OnMouseUp()方法添加到BrowserScript:

// Get the current mouse point in browser coordinates. private Point GetMousePoint() { // Ensure the main camera exists on the scene. if (Camera.main != null) { // Create a ray from the camera's position // through the current mouse position on the screen. var ray = Camera.main.ScreenPointToRay(Input.mousePosition); // Perform a raycast to detect collision // with objects on the scene. if (Physics.Raycast(ray, out RaycastHit hit)) { // Calculate the coordinates in the browser space. // Since "Tiling X" is -1, the X coordinate is inverted. int x = (int)(Width * (1 - hit.textureCoord.x)); int y = (int)(Height * hit.textureCoord.y); return new Point(x, y); } } // Return null if no valid point could be calculated // (e.g., no camera or no raycast hit). return null; } // OnMouseDown is called when the user presses the mouse button // while over the collider. public void OnMouseDown() { var location = GetMousePoint(); if (location == null) return; var args = new MousePressedEventArgs { Location = location, // OnMouseDown is called for the left clicks only. Button = MouseButton.Left, ClickCount = 1 }; Browser.Mouse.Pressed.Raise(args); } public void OnMouseUp() { var location = GetMousePoint(); if (location == null) return; var args = new MouseReleasedEventArgs { Location = location, Button = MouseButton.Left, ClickCount = 1 }; Browser.Mouse.Released.Raise(args); }

Unity 提供了许多用于捕获用户输入的选项,DotNetBrowser 拥有将键盘、触摸和鼠标事件传递到浏览器所需的所有 API。

优化性能

在 Unity 中渲染 Web 内容可能会占用大量资源。要优化性能,请执行以下操作:

  • 如果没有必要,请避免渲染大型浏览器图像:浏览器大小也是纹理大小,大纹理会对整体性能产生影响。
  • 优化网页内容:确保您呈现的网页针对快速加载和最少资源使用进行了优化。
  • 调整帧速率:通过防止不必要的纹理更新来限制浏览器渲染的帧速率或刷新率。例如,如果位图未由 DotNetBrowser 更新,则无需更新纹理像素。

结论

在 Unity3D 中将 Web 内容渲染到纹理上,您可以创建游戏内浏览器、基于 Web 的交互式仪表板,甚至是实时流式传输内容。使用 DotNetBrowser 等库,将 Web 内容直接集成到 Unity 项目中相对容易。按照以上步骤操作,您可以开始尝试不同的 Web 内容,将其与 Unity 集成,并为交互式 3D 应用程序开辟新的可能性。

本指南为您提供了在 Unity 中将 Web 内容显示为纹理的坚实基础。无论您是在构建虚拟现实项目、游戏还是交互式应用程序,这些技术都可以显著提升用户体验。

扫描二维码推送至手机访问。

版权声明:本文由卡卷网发布,如需转载请注明出处。

本文链接:https://www.kajuan.net/ttnews/2024/12/5027.html

分享给朋友:

相关文章

闲鱼上为什么会有人问都不问直接下单?

我去年卖一个荣耀90,挂的2200,最终成交2137.5元。对方是一个高高壮壮的西北口音,要求的自取。大概我吃过午饭,约了旁边的商场,那里有荣耀售后。见了面,先看了手机,试了好一会儿,各种测试,没问题。然后去了商场二楼的荣耀售后,让人家售后...

只有我一个人后悔升级鸿蒙next吗?

只有我一个人后悔升级鸿蒙next吗?

我有一台mate 60 pro,第一时间升级了“纯血鸿蒙”。虽然功能并不完善,甚至有些简陋,但是我非常~非常不后悔升级鸿蒙next系统。因为.... 这就是一款“大型养成系游戏“,给我平淡的生活提供了源源不断的情绪价值。我每天特别...

天涯神帖,第一神帖是什么?

天涯神帖,第一神帖是什么?

一些个人觉得比较经典的天涯神贴(更新进去了):话说1999年那会儿,中国的互联网还是个小婴儿,BAT三巨头都还在穿开裆裤呢,天涯社区就已经悄然诞生了。时光飞逝,到了2007年,这小小社区竟然已经吸引了超过2000万的注册用户,不得不说是个小...

无意中发现技术主管写的代码,大家帮忙看看什么水平?

无意中发现技术主管写的代码,大家帮忙看看什么水平?

虽然很多答主用了诸如“典范级”、“心旷神怡” 的形容, 赞美这段代码, 但这里, 出于技术讨论的动机, 我说说不同看法.栈, 如果善于利用栈来处理树结构, 那么可以写出更简洁的代码, 根本不需要 recuresiveFn 这种方法. 泛型,...

有哪些让你目瞪口呆的 Bug ?

有哪些让你目瞪口呆的 Bug ?

成都有个监狱情况比较特殊,关押的基本全是重犯,而且还都是经济犯和政治犯,他们以前都是一方大佬,在自己的一亩三分地翻手为云覆手为雨,无非是不小心中箭落马或帮老大顶锅才进监狱,所以即使进来了,他们依然保持着体面和骄傲,依从性差,虽然不至于和监狱...

用wordpress做这个网站的话,需要用到哪些插件?

一个完整成型的B2C电商独立站,如果用wordpress+woocommerce搭建,最终会用上20来个插件,而且是在经过慎重筛选,剔除不必要的插件的情况下,别问我为什么。wordpress建站,插件安装多了,速度会变慢,这是常识,但需要在...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。