在UGUI上显示3D模型,并限制范围的拖拽

通过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
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信