I want to make a webpage for a 3D vehicle model with Three.js where you can choose the perspective from where you can look at it. After you should be able to download a PNG image of this vehicle from that perspective with a transparent background.
The Three.js part is no problem. But downloading the image is an issue
three.js is a library of webgl which draw in <canvas>.
<canvas> can sava as image whenever you want.
set three.js WebGLRenderer preserveDrawingBuffer as true:
const renderer = new THREE.WebGLRenderer({alpha: true,preserveDrawingBuffer: true });
save canvas as image:
<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 link :https://codepen.io/alwxkxk/pen/JjPMyNW
You can access the canvas element in which Three.js renders the 3D scene, and use it to create a download of its content. There is already a Stackoverflow post concerning this issue.
