通过RenderTexture实现
显示图片
记得在用NGUI的时候,就是用这种方式实现在UI上显示模型的。
首先新建一张RenderTexture,右键点击Project窗口,Create->Render Texture;
新建一个Shader ,将刚刚新建的RenderTexture 拖入Shader中。
新建一个Cube 和一个相机名为ModelCamera,这个相机专门用来对准模型,并将刚刚新建的RenderTexture拖入相机的TargetTexture中。
新建UI,将Canvas 的 RenderMode改为Camera,将Main Camera拖入Render Camera中。
新建一个Image命名为MaskImg,并添加脚本Mask,用于遮罩,并设置Image的SourceImage为UIMask
在MaskImg新建子物体Image,用于展示模型。然后将新建的 Shader拖入Image上。如下图,此时就已经看到模型的一面在Image上显示出来了。
但是会发现,颜色不对,此时将Shader改为”UI/Default“就可以了。旋转模型会发现Image上的模型会同步旋转。
有限制的拖拽
拖拽图片,通过UGUI的OnDrag函数来获取鼠标的世界坐标,赋值给图片即可。
限制,要求Image必须在Mask中显示,拖出视野外后自动回到视野内。这就需要在Mask的上下左右设置限制位置,当图片超过限制并且松开拖拽后,计算位置自动返回到视野内。
添加限制,在MaskImg上新建子物体 Limit ,并设置Anchor
在Limit下新建四个子物体,作为上下左右的限制。Left的Anchor为Left-middle,POS为(0,0,0),其他同理,Right为Right-midle,Top为Center-Top,Bottom为center-Bottom
缩放,通过获取滚轮的滑动实现缩放,添加上下限,(注意:1.移动限制里面需要将缩放的系数也计算其中;2.如果放大后显示的模型出现模糊,把RenderTexture的Size属性调大即可)
旋转,计算鼠标滑动的X轴和Y轴,给Cube赋值旋转。
代码如下
首先添加一个UIEventListener脚本,用于监听UI的OnDrag事件
View Code
然后新建一个MoveTest代码,挂在Canvas上
View Code
通过UI和模型的位置实现
上述方法存在一个问题,就是无法直接和模型进行点击交互,因为你点击的是RenderTexture,那就需要 另外一种方法,调整UI和模型的位置,可以直接将模型放入主摄像机的视野中。
为了方便计算,先将MainCamera坐标变为(0,0,0),将Canvas的PlaneDistance变成1,把Cube放到(0,0,2)的位置。现在在Game视图中就看到了对象Cube,并不是在RenderTexture上中显示的。
其实原理就是等比,UI和Cube距离摄像机的距离等比于Img在UI上移动的距离和Cube在World上移动的距离。
所以在移动的方法里把Img移动的距离X这个比例,就可以计算Cube的移动距离并赋值了。
直接上修改后的代码。
View Code
这时候会发现一个问题,就是Cube不会被Mask遮挡住,因为Mask遮罩遮不住模型,其实只要在Mask周围添加上UI图片,挡住Cube就行了。
https://www.cnblogs.com/YDoubleC/p/9777411.html