three.js canvas内場景生成圖檔 canvas生成圖檔

第一種最簡單的方法：

1   threeBox.render();//重點  解決拿到圖檔後為黑色
2             
3   let  src=threeBox.renderer.domElement.toDataURL();//将選中的canvas轉換為base64編碼
4   let a = document.createElement("a"); // 生成一個a元素
5   let event = new MouseEvent("click"); // 建立一個單擊事件
6   a.download = "photo"; // 設定圖檔名稱
7   a.href = src; // 将生成的URL設定為a.href屬性
8   a.dispatchEvent(event); // 觸發a的單擊事件 将圖檔下載下傳下來      

threeBox.render();

對應 three.js：

renderer = new WebGLRenderer({ antialias: true, alpha: true})；

renderer.render();

注：在截圖之前先渲染一下場景和相機，就不會實時重新整理螢幕，導緻我們截屏下來的是空白了

threeBox.renderer.domElement.toDataURL();      

對應canvas方法：canvas.toDataURL(); //得到base64編碼格式圖檔位址

注：如果是普通canvas，可直接通過canvas.toDataURL()擷取截圖

第二種方法：

      

1 renderer = new WebGLRenderer({
2  antialias: true,
3  alpha: true,
4  preserveDrawingBuffer :true 
5 })
6 
7 renderer.domElement.toDataURL();      

preserveDrawingBuffer ：      

在渲染器開啟preserveDrawingBuffer :true，即緩沖區保護-是否儲存在緩沖區手動清除或覆寫，這個預設是false。

開啟之後，緩沖區的圖像就不會被更新清除，就可以截取下來想要的圖案。

但問題也很明顯，那就是在有動畫或者後期渲染内容增加的時候，你的畫面會變得很亂，内容被不斷的疊加，

是以我是建議大家使用第一種方法，這個方法說出來，隻是為了讓大家更加了解一下。

得到的base64：

        
  
          

下載下傳下來的截圖：