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

歡迎轉載，轉載需帶着文章出處連接~~