CODEWITHSUNDEEP
javascriptrenderopenjscad
Cihangir Yaman
Cihangir Yaman

Reputation: 392

JSCAD rendering objects

I am making an application that create objects according to the code given by user. I use JSCAD (OpenJscad) but I couldn't get render I get some errors this is the last error I had:

index.html?_ijt=eccib74kso9ucbd5sgsm6ojbs3:42 Uncaught TypeError: window.jscadRenderer.createRenderer is not a function
    at window.renderJSCAD (index.html?_ijt=eccib74kso9ucbd5sgsm6ojbs3:42:47)
    at HTMLButtonElement.onclick (index.html?_ijt=eccib74kso9ucbd5sgsm6ojbs3:20:33)

I am not experienced at jscad so I couldn't figured out why the app throws this error.

My code is here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSCAD Web App</title>
    <script language="javascript" src="https://unpkg.com/@jscad/modeling" id="MODELING"></script>
    <script language="javascript" src="https://unpkg.com/@jscad/regl-renderer"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            window.jscad = globalThis.jscadModeling;
            window.jscadRenderer = globalThis.jscadReglRenderer;
        });
    </script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>JSCAD Web App</h1>
<textarea id="editor">function main() { return jscad.primitives.cube({size: 10}); }</textarea>
<button onclick="renderJSCAD()">Render Model</button>
<div id="renderArea"></div>

<script>
    window.renderJSCAD = function() {
        if (!window.jscad || !window.jscadRenderer) {
            console.error("JSCAD veya Renderer kütüphanesi yüklenmedi.");
            return;
        }

        const { primitives } = window.jscad;
        const { cube } = primitives;
        const script = document.getElementById('editor').value;
        const design = new Function('return ' + script)();

        document.getElementById('renderArea').innerHTML = '';
        let viewerCanvas = document.createElement('canvas');
        viewerCanvas.width = 600;
        viewerCanvas.height = 400;
        document.getElementById('renderArea').appendChild(viewerCanvas);

        // Correct renderer initialization
        const renderer = window.jscadRenderer.createRenderer({ glOptions: { canvas: viewerCanvas } });

        // Draw the solids
        renderer.draw({ solids: [design] });
    }
</script>
</body>
</html>

I asked questions about this error to ChatGPT but it tries this createRenderer method. I think createRenderer is older function of jscad.

Upvotes: 0

Views: 49

Answers (0)

Related Questions