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

咱们在平常网页开发的时候，可能想给本身的网页或者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

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