我们在日常网页开发的时候，可能想给自己的网页或者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
