1

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.

0 Answers0