3DUI Cocos Creator 独家

(资料图片仅供参考)

分享一个小组件，实现3DUI~

效果

使用效果、步骤、原理见视频^[1]

环境

Cocos Creator 3.7.1

原理

UI相机生成一张RT，动态计算UV生成四方形网格

步骤层级相机材质组件代码

import{_decorator,Component,Node,Camera,RenderTexture,view,UITransform,MeshRenderer,primitives,utils,log}from"cc";const{ccclass,property,executeInEditMode}=_decorator;@ccclass("UIQuadProfile")exportdefaultclassUIQuadProfile{@property(Node)targetNode:Node=null!;@property(MeshRenderer)quad:MeshRenderer=null!}@ccclass("UIQuad")@executeInEditModeexportclassUIQuadextendsComponent{@property(Camera)copyCamera:Camera=null!;@property([UIQuadProfile])UIQuadProfiles:UIQuadProfile[]=[]rt:RenderTexturestart(){log("欢迎关注微信公众号【白玉无冰】https://mp.weixin.qq.com/s/4WwCjWBtZNnONh8hZ7JVDA")}onEnable(){if(!this.copyCamera)returnthis.copyCamera.node.active=true;this.rt=newRenderTexture();this.rt.reset({width:view.getVisibleSize().width,height:view.getVisibleSize().height,})this.copyCamera.targetTexture=this.rt;this.copyRenderTex();}onDisable(){if(!this.copyCamera)returnthis.copyCamera.node.active=false;this.copyCamera.targetTexture=nullthis.rt?.destroy()}privatecopyRenderTex(){this.UIQuadProfiles.forEach((v,i)=>{consttargetNode=v.targetNodeconstquad=v.quadif(!targetNode||!quad)returnquad.material.setProperty("mainTexture",this.rt);constwidth=targetNode.getComponent(UITransform).width;constheight=targetNode.getComponent(UITransform).height;constanchorPoint=targetNode.getComponent(UITransform).anchorPointconstrtwidth=this.rt.width;constrtheight=this.rt.height;constworldPos=targetNode.getWorldPosition();worldPos.x-=width*anchorPoint.xworldPos.y-=height*anchorPoint.xconstgeometryQuad=primitives.quad();constuv_l=worldPos.x/rtwidthconstuv_b=worldPos.y/rtheightconstuv_r=(worldPos.x+width)/rtwidthconstuv_t=(worldPos.y+height)/rtheightgeometryQuad.uvs=[uv_l,uv_b,uv_l,uv_t,uv_r,uv_t,uv_r,uv_b]quad.mesh=utils.MeshUtils.createMesh(geometryQuad,quad.mesh)})}}

更多三渲二 Cocos Creator零代码实现面片效果(UV滚动,帧动画) Cocos Creator如何快速升级 Cocos Shader 版本，以简易水shader为例游戏开发资料合集，2022年版参考资料[1]

使用效果、步骤、原理见视频: https://www.bilibili.com/video/BV1UM411s751

点击“阅读原文”查看精选导航

“点赞“ ”在看”鼓励一下▼

关键词：