Unable to save babylon playground when DOM manipulating

[haestflod]

Edit: NEVERMIND, I checked noscript and that was blocking urls! I havn't had troubles saving before so didnt think of that!.
Here's the url if you want to see it in action!
http://playground.babylonjs.com/#NJ8S1D

Hi, I'm guessing this probably isn't a bug and is a security feature but I was creating a playground where I was projecting a world position to screenspace and then using css to position a div to make sure it was correct.

I couldn't find any information about unable to save a playground mentioning DOM manipulation.

Heres the code that is unable to save with the error  Unable to save your code. It may be too long.

var createScene = function () {

    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

    // Move the sphere upward 1/2 its height
    sphere.position.y = 1;

    // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

    var time = 0;

    var blob = document.getElementById("blobby");
    var canvasZone = document.getElementById("canvasZone");
    canvasZone.style.position = "relative";

if ( !blob ) {
    blob = document.createElement("div");
    blob.style.position = "absolute";
    blob.style.backgroundColor = "red";
    blob.style.left = "0";
    blob.style.top = "0";
    blob.style.width = "5px";
    blob.style.height = "5px";
    blob.id = "blobby";
    blob.style.zIndex = 10000000;

    canvasZone.appendChild(blob);
}    

    scene.afterRender = function() {
        time += 1 / 120;

        sphere.position.x = 0 + 20 * Math.sin( time );

        var scene = sphere.getScene();
        var cameraViewport = camera.viewport;

        let projectedVector = BABYLON.Vector3.Project(  sphere.position, 
                                                        BABYLON.Matrix.Identity(), 
                                                        //sphere.getWorldMatrix(),
                                                        scene.getTransformMatrix(), 
                                                        cameraViewport );
        
        const width = canvasZone.offsetWidth;
        const height = canvasZone.offsetHeight;

        blob.style.left = (width * projectedVector.x) + "px";
        blob.style.top = (height * projectedVector.y) + "px";
        
    }

    return scene;
};

 

[aWeirdo]

i'm unable to replicate the issue you had, but since you got it working, nvm either way  

happy coding