js添加网页水印和three.js场景中加水印

我们在日常网页开发的时候,可能想给自己的网页或者canvas里面添加水印,增添个人标记,我这里分为普通静态html页面和threejs中3d场景里面添加水印功能。

一 静态html页面添加水印

html

你只需要在你的页面添加一个图片遮罩,通过绝对定位和z-index层级控制,就可以覆盖在你的内容上面,但是一个很重要的点是要设置

既取消水印层的鼠标事件,实现事件穿透,这样水印层只起到一个遮罩标记功能,不会影响到其他层级的事件。

二 three.js场景中添加水印

canvas

three.js场景其实是渲染在一个canvas中,第一种方法图片覆盖依然适用,但是对于scene场景,我们可以添加一个PlaneBufferGeometry,通过设置z轴坐标,这样就直接添加到场景中

三 总结

其实水印说起来感觉很高大上,本质就是一层图画的遮罩,理解了这个本质,就有很多方式可以实现了。

github代码:004-waterMark

欢迎转载,转载需带着文章出处链接~~

 

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据