是否可以使用Three.js將3D模型導出為PNG圖像

Question

我想用Three.js創建一個3D車輛模型的網頁，從中可以選擇視角。 之后，您應該能夠從該角度下載具有透明背景的該車輛的PNG圖像。

Three.js部分沒有問題。 但是下載圖像是一個問題

Answer 1

您可以訪問Three.js在其中渲染3D場景的canvas元素，並使用它來創建其內容的下載。 已經有一個關於此問題的Stackoverflow帖子 。

Answer 2

three.js是一個webgl庫，它繪制<canvas> 。

<canvas>可以隨時作為圖像保存。

將three.js WebGLRenderer prepareDrawingBuffer設置為true：

const renderer = new THREE.WebGLRenderer({alpha: true,preserveDrawingBuffer: true });

將畫布另存為圖像：

<button id="save"> save image</button>

document.getElementById('save').onclick=()=>{
  saveImage()
}

function saveImage() {
  const canvas =  document.getElementsByTagName("canvas")[0]
  const image = canvas.toDataURL("image/png");
  const a = document.createElement("a");
  a.href = image.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
  a.download="image.png"
  a.click();
}

codepen鏈接： https ://codepen.io/alwxkxk/pen/JjPMyNW