Playground — Live WebGL Code Editor · 3D Simulations

JavaScript · Three.js r160
Preview
Console
`; const blob = new Blob([html], { type: "text/html" }); const old = frame.src; if (old && old.startsWith("blob:")) URL.revokeObjectURL(old); frame.src = URL.createObjectURL(blob); addConsole("▶ Running…", "info"); } // Receive console messages from iframe window.addEventListener("message", (e) => { if (e.data && e.data.type === "console") { addConsole(e.data.msg, e.data.level); } }); // ═══════════════════════════════════════════════════════════════ // Toolbar buttons // ═══════════════════════════════════════════════════════════════ document.getElementById("run-btn").addEventListener("click", runCode); document.getElementById("reset-btn").addEventListener("click", () => { editor.setValue(SNIPPETS[currentSnippetKey] || SNIPPETS.cube); addConsole("↺ Code reset to original snippet.", "info"); }); document.getElementById("clear-btn").addEventListener("click", () => { consoleOutput.innerHTML = ""; }); document.getElementById("share-btn").addEventListener("click", () => { const code = encodeURIComponent(editor.getValue()); const maxLen = 4096; // keep URLs reasonable if (code.length > maxLen) { addConsole( "⚠ Code is too long to share via URL. Use Download instead.", "warn", ); return; } const url = location.origin + location.pathname + "?code=" + code; navigator.clipboard .writeText(url) .then(() => showToast("✓ Share URL copied to clipboard!")) .catch(() => { // Fallback: open in new tab window.open(url, "_blank", "noopener"); }); }); document.getElementById("export-btn").addEventListener("click", () => { const code = editor.getValue(); const html = ` 3DS Playground Export