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

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章