NGUI裁剪模型和粒子

简介:



效果预览

model_scrollview

注:Cube上附着的绿色是我添加的粒子效果。

 

软件环境

NGUI 3.9.x

Unity 5.1 x64

 

相关知识

RenderTexture

       RenderTexture是一种特殊的纹理,它是在运行时创建和更新。

文档:http://www.ceeger.com/Components/class-RenderTexture.html

ScrollView

      ngui的一个滑动组件

UITexture

    ngui显示贴图组件

 

原理

用一个相机单独照射3D模型和粒子 ——> 把相机的图形映射到RenderTexture上 ——> 把RenderTexture的图形UITexture ——>通过NGUI的Clip对UITexture进行裁剪

 

步骤

1、创建一个RenderTexture,命名为ModelTexture wpsEF4C.tmp

2、创建一个新的场景,添加NGUI的2D UI

3、修改场景中的渲染模型的Camera名为:3DCamera,并把ModelTexure赋给它的Target Texture

4、添加模型和粒子,我这儿以原型替代,把它排成一横排

wpsEF5D.tmpwpsEF5E.tmp

5、修改3DCamera的size,调整模型根节点的位置,直到Camera中能全部显示出场景中的模型和粒子,我这儿把3DCamera改为2D镜头

wpsEF5F.tmpwpsEF60.tmpwpsEF61.tmp

6、在UI中创建一个ScrollView和UITexture,UIPanel的的裁剪区域,根据需要调整到合适值。

wpsEF62.tmpwpsEF72.tmp

7、把步骤1创建的ModelTexture,拖给UITexture,并修改Texture的Size为1000x1000,同时给UITexture添加BoxCollider和Drag ScrollView

wpsEF73.tmpwpsEF74.tmp

8、同时修改ModelTexture的size也修改为1000x1000

wpsEF75.tmp

9、运行,调整视觉效果

整体结构

wpsEF86.tmp

注意点

根据需要调整RenderTexture的Size和Camera的Size,达到最佳视觉效果。

源码

附件:http://files.cnblogs.com/files/zhaoqingqing/ClipModel.zip  需要手动导入NGUI3.9.x,基于Unity5.1




本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/5318857.html,如需转载请自行联系原作者

相关文章
|
图形学 开发者
3D模型如何设置凹凸贴图?
3D模型如何设置凹凸贴图?
167 0
SwiftUI—如何对图像视图进行缩放和旋转
SwiftUI—如何对图像视图进行缩放和旋转
905 0
SwiftUI—如何对图像视图进行缩放和旋转
|
5月前
|
存储 编解码 算法
第5章-着色基础-5.4-锯齿和抗锯齿
第5章-着色基础-5.4-锯齿和抗锯齿
50 1
|
7月前
|
图形学
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
126 1
|
6月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
595 0
|
6月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
118 0
|
前端开发 JavaScript
神奇的滤镜!巧妙实现内凹的平滑圆角
神奇的滤镜!巧妙实现内凹的平滑圆角
300 0
神奇的滤镜!巧妙实现内凹的平滑圆角
【Unity3D--自由观察模型】模型自动旋转+触屏旋转和缩放
展示3D模型,同时实现模型自动旋转和触屏旋转和缩放
479 0
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
315 0
|
算法 图形学
【计算机图形学】实验四:线段裁剪
【计算机图形学】实验四:线段裁剪
145 0
【计算机图形学】实验四:线段裁剪