第一種最簡單的方法：
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：
下載下來的截圖：
