• QQ群:1040082875

大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。

一、前言

最近有小伙伴在群里问我,如何将3D模型显示在UI前面,比如这样:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_ui

我心想使用RawImage进行映射不就行了,结果变成了这样:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_unity_02

让我恨铁不成钢,所以,就总结了这篇文章,希望可以对小伙伴有些帮助。

这篇文章讲解使用两种方法实现3D模型在背景图前:

1、使用UI摄像机

2、使用RawImage

二、效果图

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_ui_03

下面是背景图,背景图上面是模型。

三、使用UI相机实现3D模型在前

第一步:新建UICamers相机

新建一个Camera,重命名为UICamera,然后设置一下参数:

​Position​​改为:​​-4000,0,0​​(拉远点就行,不挡住模型就行)

​ClearFlags​​改为:​​Don’t Clear​​(屏幕的未绘制部分是空的)

​Culling Mask​​改为:​​UI​​(只渲染UI层)

​Projection​​改为:​​Orthographic​​(正交相机,在这种投影模式下,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。)

​Clipping Planes​​改为:​​Nar:0.3,Far:100​​(摄像机照射的最近和最远距离,这个100不能改,跟UI的距离是100,这个是在 Canvas组件的Plane Distance中设置的)

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_unity_04

​Depth​​改为:​​1​​(MainCamer的Depth为-1,这样就可以保持3D模型在前了)

去掉Audio Listener组件(保留MainCamer对象上的这个组件就够了)

注意:上面的参数不想看,可以直接按照下面的图片对照修改。

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_3d_05

第二步:设置Canvas的渲染模式为Camera

Canvas的修改就简单了,将Rende4rMode改为SCreen Space -Camera,然后将UICamera拖入Render Camera卡槽中即可:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_原力计划_06

第三步:3D模型就在背景图前面了

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_原力计划_07

四、使用RawImage实现3D模型在前

第一步:创建RawImage组件爱你

在Hierarchy视图中,首先选择创建→UI→Image,设置一个背景图:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_unity_08

然后选择创建→UI→RawImage创建一个RawImage:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_原力计划_09

第二步:创建RenderTexture渲染材质

要实现将摄像机渲染画面传递给RawIamge需要创建一个RenderTexture渲染材质,在Project视图中,选择创建→RenderTexture

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_背景图_10

设置参数:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_背景图_11

第三步:将摄像机渲染画面传递给RawImage

将摄像机渲染画面给Render Texture:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_unity_12

将Render Texture渲染画面传递给RawImage:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_ui_13

效果图:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_unity_14

然后将屏幕的未绘制部分清理掉:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_3d_15

效果图:

【Unity3D日常开发】Unity3D中如何实现让3D模型显示在UI前面_背景图_16