I have a canvas which is created by three.js and it is rendering a complex 3D object. Is it in any way possible to export that 3D object? Not talking about an image, I figured that out. I need the actual 3D object which is rendered inside canvas. I honestly don't even know what file format I am expecting here, anything that can be either processed or imported into another program. Here's how far I've gotten after a few hours of trying, but I just get an (almost) empty file..
function test() {
let canvas = document.querySelector("canvas");
const renderer = new THREE.WebGLRenderer({canvas});
let scene = new THREE.Scene();
renderer.render(scene, new Camera());
console.log(renderer);
console.log(scene);
let exporter = new GLTFExporter();
exporter.parse(scene, (gltf) => {
console.log("GOT GLTF");
saveLikeJSON(gltf);
}, {})
}
Here are my functions which I used to download the file:
function saveLikeJSON(json){
var dataJson = JSON.stringify(json);
downloadTextFile(dataJson,"p")
}
function downloadTextFile(text, name) {
const a = document.createElement('a');
const type = name.split(".").pop();
a.href = URL.createObjectURL( new Blob([text], { type:`text/${type === "txt" ? "plain" : type}` }) );
a.download = name;
a.click();
}
I am importing the canvas from another site using a script tag, and that's the target I want to export which contains a 3D object.