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

最新推荐文章于 2023-08-21 08:56:37 发布

火辣辣-

最新推荐文章于 2023-08-21 08:56:37 发布

阅读量671

点赞数

分类专栏：学习笔记文章标签： three.js js水印

本文链接：https://blog.csdn.net/weixin_39559449/article/details/89312050

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

一静态html页面添加水印

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

pointer-events: none;//指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

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

		.water-mark{
			position: absolute;
			top: 0;
			height: 0;
			width: 50vw;
			height: 50vh;
			border: #DFDFDF 1px solid;
			background-image: url(img/watermark.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: initial;
			pointer-events: none;
			z-index: 2;
		}

二 three.js场景中添加水印

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

 var wmGeometry=new THREE.PlaneBufferGeometry(2,2);
var texture=new THREE.TextureLoader().load('./img/watermark.png');
var wmMaterial=new THREE.MeshBasicMaterial({map:texture});
var wmPlane=new THREE.Mesh(wmGeometry,wmMaterial);
scene.add( wmPlane );

三总结

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

github代码：004-waterMark

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