<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>McModelViewer Render</title>

        <script src="/render/util/three.min.js"></script>
        <script src="/render/util/OrbitControls.js"></script>
        <script src="/render/util/ModelViewer.js"></script>
    </head>
    <body>
        <script>
            function getUrlParam(name) {
                const params = new URLSearchParams(window.location.search);
                return params.get(name);
            }

            const viewer = new ModelViewer(document.body);

            window.addEventListener("resize", viewer.resize);

            const modelParam = getUrlParam("model");
            const textureParam = getUrlParam("texture");

            if (modelParam && textureParam) {
                try {
                    const modelJson = JSON.parse(
                        atob(decodeURIComponent(modelParam))
                    );
                    const textures = JSON.parse(
                        atob(decodeURIComponent(textureParam))
                    );
                    const model = new JsonModel("myModel", modelJson, textures);
                    viewer.load(model);
                    viewer.showGrid();
                } catch (error) {
                    console.error("Error parsing JSON from URL:", error);
                }
            } else {
                console.error(
                    "Model or texture data is missing from the URL parameters."
                );
            }
        </script>
    </body>
</html>
