Cocos Creator 3.0 演示與實現。

效果

效果預覽:

視頻預覽(視頻號[白玉無冰]):

https://www.bilibili.com/video/BV11U4y157cz

前言

開始講解前，先扯些其他的，如果大伙想看原理講解，可跳過這一節，直奔原理。

首先，感謝大家的觀看，感謝大家的點贊支持，感謝老板們的贊賞支持，非常感謝。

2021年上半年打賞

寫了這么多年的文章了，很多時候都是單向在寫東西。白玉無冰更希望的是多向的交流，碰撞出更多的火花。

• 就像3D挖洞效果那樣，qq群內集體討論出一個3D挖洞效果

• 像 Cocos Star Meeting 廣州場那樣，每個人都上臺分享自己的故事

• 亦像水排序的實現那樣，有人在群中指出動畫方案，也有人在評論討論實現中的問題

• 。。。

水排序的討論

我經常不善言表，但大家一起討論的時候，心中會蕩起一點澎湃，一點激動，一點感動。

雖然很多問題我答不上，各類平臺的sdk，native等我都不熟悉，但群里時常有人能答上。

不過，還是希望大家能多思考，利用好搜索引擎，能解決部分問題。

打印日志，斷點調試，也能解答一些疑惑。

鴉哥語錄

目前來說，白玉無冰對數學和渲染相關的比較感興趣，3D相關的也在起步研究階段，歡迎一起探討。

數學真的很重要，以向量為例，點乘判斷前后，叉乘判斷左右。

順便整理一些有關向量的實例，希望對大家有所幫助。

2D折紙
四元數與旋轉
使用 mesh 實現多邊形裁剪圖片
反復橫跳的瞄準線！
淺析射線檢測

可能上面的文章較對應的引擎版本比較老，但重要的是思路思想，希望大家融會貫通，不限于引擎，能實現自己想要的效果。

接下來進入本篇的主題吧。

實現

總體思路，細分化網格，旋轉網格點。

接下來分以下幾步走講解。

初始化平鋪網格

射線檢測確定觸摸點，觸摸軸

向量叉乘確定要旋轉的網格點

旋轉網格點

平鋪網格

只要網格點足夠細化，對網格點操作后，折痕就越光滑。

遨游引擎源碼(或d.ts)后，找到了可以細分化平面的方法。

平鋪網格//?創建網格點 this._gemotry?=?primitives.plane({?width:?10,?length:?10,?widthSegments:?99,?lengthSegments:?99?}); //?創建mesh，并轉給渲染器 this.meshRenderer.mesh?=?utils.createMesh(this._gemotry,?this._mesh);

射線檢測

從攝像機發出一條射線，檢測mesh，返回距離，再根據射線檢測起點和方向求出觸摸點。

射線檢測private?onTouchStart(touch:?Touch,?event:?EventTouch)?{//todo?坐標轉換，目前?meshRenderer?在原點const?point?=?touch.getLocation();//?從攝像機發起射線this.cameraCom.screenPointToRay(point.x,?point.y,?this._ray);//?獲取射線距離const?minDis?=?geometry.intersect.rayMesh(this._ray,?this._mesh,?deOpt)if?(minDis)?{//?求得射線的終點const?pos?=?Vec3.add(_temp_v3,?this._ray.o,?Vec3.multiplyScalar(_temp_v3,?this._ray.d,?minDis));if?(event.type?===?SystemEventType.TOUCH_START)?{this._axiStart?=?v3(pos);}?else?if?(event.type?===?SystemEventType.TOUCH_END)?{this._axiEnd?=?v3(pos);//?計算需要旋轉的點this.calculateSelected();}}? }

網格點分類

使用向量叉乘判斷網格點在觸摸軸的左邊還是右邊。

射線檢測private?calculateSelected()?{const?axiStart?=?this._axiStart;const?axiEnd?=?this._axiEnd;this._selectedPos.clear();this._gemotry.positions.forEach((v,?i,?arr)?=>?{if?(i?%?3?===?0)?{//網格點const?target?=?_temp_v3_1.set(arr[i],?arr[i?+?1],?arr[i?+?2]);//觸摸向量const?axi?=?Vec3.subtract(_temp_v3,?axiEnd,?axiStart).normalize();//待判斷向量const?targetVector?=?Vec3.subtract(_temp_v3_2,?target,?axiStart);if?(Vec3.cross(_temp_v3_3,?axi,?targetVector).y?>?0)?{//取其中一邊this._selectedPos.set(i,?[arr[i],?arr[i?+?1],?arr[i?+?2]]);}}}) }

旋轉網格點

是四元數與旋轉中繞軸旋轉的一個實例。

旋轉網格點//?單個點處理 private?rotatePos(target:?Vec3,?axiStart:?Vec3,?axiEnd:?Vec3,?rad:?number)?{//?旋轉軸const?axi?=?Vec3.subtract(_temp_v3,?axiEnd,?axiStart).normalize();//?構造起始向量const?targetVector?=?Vec3.subtract(_temp_v3_2,?target,?axiStart);//?構造四元數Quat.fromAxisAngle(_temp_quat,?axi,?rad);//?旋轉向量Vec3.transformQuat(targetVector,?targetVector,?_temp_quat);//?計算旋轉點Vec3.add(target,?axiStart,?targetVector);return?target; }

視頻整合詳解

視頻講解(視頻號白玉無冰，各位老板們走過路過點個關注，后續會錄些視頻講講一些技術點的理解):

https://www.bilibili.com/video/BV1jw411o7bL

大家幫忙在視頻號點個關注，白玉無冰想試試500個關注后，加個認證標志?。

小結

完整代碼工程：https://store.cocos.com/app/detail/2844

以上為白玉無冰使用 Cocos Creator 3.0.0 實現 "折紙3D效果!" 的技術分享。

希望大家多多討論，碰撞出新思想！

更多

漸變色文字?水排序效果?轉向行為AI?折紙效果?豎直的文本

點擊“閱讀原文”查看精選導航

“點贊“ ”在看”?鼓勵一下▼

總結

以上是生活随笔為你收集整理的3D折纸效果怎么实现？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。