canvas作為紋理來貼圖遇到的一些問題總結
阿新 • • 發佈：2018-11-01
將canvas作為紋理來貼圖，方法如下：var texture = new THREE.Texture(canvas);
但是如果我用了一些shadow之類的，貼過去後效果會改變，變得很醜，於是，我將canvas轉化為圖片先。
方法如下：
var type = 'image/png';
//將canvas元素中的影象轉變為DataURL
var dataurl = canvas.toDataURL(type);
//抽取DataURL中的資料部分，從Base64格式轉換為二進位制格式
var bin = atob(dataurl.split(',')[1]);
//建立空的Uint8Array
var buffer = new Uint8Array(bin.length);
//將影象資料逐位元組放入Uint8Array中
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
//利用Uint8Array建立Blob物件
var blob = new Blob([buffer.buffer], {type: type});
var url = window.URL.createObjectURL(blob);
var texture = new THREE.TextureLoader().load(url); 但是這裡也會有些許問題，就是canvas的背景色沒有被轉過去，導致紋理變成了透明背景的。還有幾十如果用jpeg的格式，背景是黑色的。
var texture = new THREE.TextureLoader().load(url); 但是這裡也會有些許問題，就是canvas的背景色沒有被轉過去，導致紋理變成了透明背景的。還有幾十如果用jpeg的格式，背景是黑色的。