three.js和Canvas合作实现照片合成从而实现全景材质的制作

本人近期在研究three.js的全景制作，其中由于个人非没事专业所以对图片资源的合成出现了大量的问题，所以转向的用代码解决的方向。经过本人多方请教和查阅终于找到了通往成功的道路。

话不多说上代码

<body onload="draw();">
	<div id="ap">
		<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
       width="300" height="227">
	</div>
	
</body>

下面是实现canvas画布的绘制并转换成支持threejs材质格式（在这里我走了不少弯路）

//把要合成的照片的相對路徑存放在打他数组下，并且闯将一个空数组用于存放转化后的照片信息
var data=['images/img1.png','images/img2.png','images/img3.png','images/img4.png'],base64=[];
function drawimg(fn){
//创建一个canvas用来绘制已有的照片
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=1000;
c.height=1000;
ctx.rect(0,0,c.width,c.height);
ctx.fillStyle='#fff';
ctx.fill();
function drawing(n){
//便利照片数组把数字按顺序和相对位置绘画到canvas上
if(n<len){
var img=new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
img.src=data[n];
img.onload=function(){
//这里是排布照片位置是以canvas左上为原点
ctx.drawImage(img,parseInt(n/2)*500,(n%2)*500,500,500);
drawing(n+1);//递归
}
}else{
//保存生成作品图片
base64.push(c.toDataURL("image/jpeg",0.8));
//alert(JSON.stringify(base64));
fn();
}
}
c.id='qwe';
document.getElementById('ap').append(c);
drawing(0);

}

 drawimg(function(){
				document.getElementById('source').src=base64[0];
				var cas=document.getElementById('qwe');
				cas.onLoad=initModel();
				console.log(base64[0]);
			})

上面时调用画布并且一定要切记，要在canvas绘制完成后在加载显示，因为图片是异步加载可能图片过大，导致赋予材质的时候图片还没有加载完成。从而失败。（我也为此痛哭了还久才想到），小编是新人可能讲解的不是很好大佬们不满意的话下面有我的项目源码.......希望大家多多点评。指出我的不足。

下载地址：这是成功案例下载地址

three.js和Canvas合作实现照片合成从而实现全景材质的制作

猜你喜欢