【threeJS】获取渲染结果

下载当前时刻的渲染画布

renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true});//将每一帧缓存到renderer.domElement中
//获取画布
var canvas=window.renderer.domElement;
//下载
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download ="IMG"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件

获取画布上的某个像素值

function getPixel(renderer,i,j){
    var canvas=renderer.domElement;
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');
    newCanvas.width = canvas.width;
    newCanvas.height = canvas.height;
    context.drawImage(canvas, 0, 0);
    return context.getImageData( i, j, 1, 1);
}

获取资源列表

//关闭抗锯齿、存储渲染结果
renderer = new WebGLRendererEx({
      antialias: false,//抗锯齿
      preserveDrawingBuffer: true,//每帧进行缓存
      alpha:false//透明渲染
});
//设置材质标签
var newMaterial=[]
for(i=0;i<myMeshEx2.material.length;i++){
	var material=new MeshBasicMaterial({color:meshIndex})
	material.color.convertSRGBToLinear();
	newMaterial.push(material)
}
myMeshEx2.material=newMaterial
//分析渲染结果
function analysis(){
    var canvas=renderer.domElement;
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');
    newCanvas.width = canvas.width;
    newCanvas.height = canvas.height;
    context.drawImage(canvas, 0, 0);

    var data=context.getImageData( 0, 0, canvas.width, canvas.height).data
    var result={}
    for(var i=0;i<data.length/4;i++){
      var r=data[4*i]
      var g=data[4*i+1]
      var b=data[4*i+2]
      var id=(r*256+g)*256+b
      if(result[id])result[id]++
      else result[id]=1
    }
    return result;
}