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://babylonjs-playground.azurewebsites.net/#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;
};
