使用 unity 实现一个模型展示程序

codeniu
1,936 阅读3分钟

前言

最近接到一个模型展示的需求，作为一个前端开发人员，自然而然的想到了使用 threejs 来实现。但是使用 threejs 实现了一个简单 Demo 后，所呈现的模型的效果并不是很理想。因而想到了使用 unity 来实现相关的需求。

因为是第一次使用 unity 开发项目，在实现过程中遇到一些问题，通过这篇文章记录一下，方便以后查阅，同时也希望能帮助首次接触 unity 的同学。

Unity作为一款强大的游戏引擎，被广泛应用于模型展示程序的开发中。在这个项目中，将使用Unity来实现一个模型展示程序，本项目将包括模型的导入、场景的搭建、相机的设置、光照的调整和UI的设计等方面。

效果

以下是展示程序呈现的效果。实现了旋转以及上下查看模型。

model.gif

unity 如何导入 GLB 模型？

在 unity 项目中导入 GLB 模型需要安装两个辅助插件。安装完成后将模型拖拽到项目中即可。

  • Newtonsoft Json
  • GLTFUtility

使用 unity 的包管理器安装包，步骤如下：

  1. 打开 unity 的包管理器。
Untitled.png

  1. 安装包：
Untitled 1.png

点击 Install package from git URL 分别输入上面两个地址，安装包。

安装完成后，在 package 中查看：

Untitled 2.png
  1. 项目设置

进入到如下路径进行项目设置。

Edit→project setting

Untitled 3.png

将 6 更改为 10 按回车

Untitled 4.png

从 Element 6 开始选择，Built-in下面有四个shader，将他们依次拖到6,7,8,9位置上

Untitled 5.png

将如下文件拖到指定位置

Untitled 7.png

另外一种视图下，同样如此操作。

Untitled 6.png

模型设置

导入模型之后将脚本文件附加到模型上，如图：

Untitled 8.png

步骤如下：

  1. 更改模型位置

  2. 点击 Add Component 选择脚本

Untitled 9.png
  1. 设置 Manage,如图，箭头所指文件选择我们的模型文件
Untitled 10.png

文本设置

unity 设置文本使用了 TextMeshPro对象，它可以解决文字渲染的很多问题，并且可以直接对文字加入动态特效，富文本，排版格式等。

无论在什么分辨率和UI放大的情况下，都能生产清晰的文字，并且没有额外的性能消耗。

  1. 点击如图位置，会自动导入一个资源包，等待导入完成即可

Untitled 11.png
  1. 如下图，在文字编辑框内编辑文字，复选框按钮在编辑时控制文字的显示隐藏
Untitled 12.png

控制逻辑

在了解 unity 各种对象的用法之后，操作逻辑很容易就能实现了。本项目包含的对象主要有如下几种：

  • Main Camera: 主摄像机
  • Directional Light : 两个光源（为了使模型纹理能更好的展示出来，因此放置了一上一下两个光源）
  • Canvas ： 显示 UI 信息，包含按钮，以及模型的说明
  • Manager: 控制器，在这个对象中，将操作逻辑与各个对象进行绑定

基础项目文件已经打包出来了，可以将其导入你现有的项目中。

下载地址：

avatar
文章
阅读
粉丝