前言

最近看到一個貼花效果, 感覺不錯, 所以想自己來親自實現(xiàn)一次.

效果

Decal

思路

貼花的實現(xiàn)方式有很多, 我這里用了最常見, 也是適應性最好的一種方式.
基于點擊位置, 作立方體裁剪, 然后裁剪下來的mesh作平面投影, 最后就得到了在二維平面的UV值.
最后用裁剪后的 mesh 生成新一個 meshrenderer , 再加上得到的 UV 值, 就可以把貼花貼到對應的模型上了.

關鍵實現(xiàn)步驟

找到模型上的觸摸的位置

找模型的上觸摸點, 最主要以下這兩步, 找到從屏幕發(fā)射出去的射線, 取射線與模型的交點.

this.mainCamera?.screenPointToRay(point.x, point.y, this._ray);
const intersectCount = geometry.intersect.rayModel(this._ray, mo, this.modOpt);

以觸摸點為中心裁剪mesh

以觸摸點為中心立方體的六個面來裁剪當前的 mesh

// 其中一個面
this.decalVertexes = this.clipGeometrylByPlane(this.decalVertexes, new Vec3( 1, 0, 0 ), this.scale.x/2);

將mesh投影到平面上得到uv

然后以裁剪后的 mesh , 我們投影到面上, 再歸一化, 就可以它投影后的值當 UV 用

decalVertex.uv = new Vec2(
        0.5 + ( decalVertex.viewPos.x / this.scale.x ),
        0.5 + ( decalVertex.viewPos.y / this.scale.y )
    );

用裁剪后的mesh和uv生成新的mesh

最后我們用了新的 mesh, 同時也有了對應的 UV , 那么再加上我們要貼花的紋理, 就齊活了.

倉庫

https://github.com/hugohuang1111/fxcase/tree/master/assets/caseDecals/method2