Jump to content

Unable to save babylon playground when DOM manipulating


haestflod
 Share

Recommended Posts

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;
};

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...