I am executing the playground given below and it works well in the editor. However when I download the project and then run it in my local server, I get “time is not defined” error. What am I missing here?
Well we need to see the project with the problem 
yes ofc sorry, here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Babylon.js</title>
<!-- Babylon.js -->
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/libktx.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://cdn.babylonjs.com/loaders/"></script>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = null;
var scene = null;
var sceneToRender = null;
var camera;
var createDefaultEngine = function ()
{
return new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true
});
};
var Overlay = "false";
class Playground
{
static CreateScene(engine, canvas)
{
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
// This creates and positions a free camera (non-mesh)
camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 600, BABYLON.Vector3.Zero(), scene);
//var camera = new BABYLON.ArcRotateCamera("Camera", 0.7, 0.7, 300, BABYLON.Vector3.Zero(), 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 = 3.0;
//Create dynamic texture
var textureResolution = 512;
var textureGround = new BABYLON.DynamicTexture("dynamic texture", textureResolution, scene);
var textureContext = textureGround.getContext();
var x = 150;
var y = 150;
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
// ground.material = materialGround;
//Draw on canvas
function loop() {
time = new Date();
h = time.getHours();
m = time.getMinutes();
s = time.getSeconds();
textureContext.beginPath();
textureContext.fillStyle = "ivory";
textureContext.arc(x, y, 140, 0, Math.PI * 2, true);
textureContext.fill();
textureContext.strokeStyle = "crimson";
textureContext.lineWidth = 10;
textureContext.stroke();
drawNumber();
drawPointer(360 * (h / 12) + (m / 60) * 30 - 90, 70, "black", 10);
drawPointer(360 * (m / 60) + (s / 60) * 6 - 90, 100, "darkslategrey", 10);
drawPointer(360 * (s / 60) + x - 90, 120, "red", 2);
}
function drawNumber() {
for (n = 0; n < 12; n++) {
d = -60;
num = new Number(n + 1);
str = num.toString();
dd = Math.PI / 180 * (d + n * 30);
tx = Math.cos(dd) * 120 + 140;
ty = Math.sin(dd) * 120 + 160;
textureContext.font = "30px Tahoma";
textureContext.fillStyle = "indigo";
textureContext.fillText(str, tx, ty);
}
}
function drawPointer(deg, len, color, w) {
rad = (Math.PI / 180 * deg);
x1 = x + Math.cos(rad) * len;
y1 = y + Math.sin(rad) * len;
textureContext.beginPath();
textureContext.strokeStyle = color;
textureContext.lineWidth = w;
textureContext.moveTo(x, y);
textureContext.lineTo(x1, y1);
textureContext.stroke();
textureGround.update(); // Don't forget about it :)
}
setInterval(loop, 500);
materialGround.diffuseTexture.uOffset -=0.2;
materialGround.diffuseTexture.vOffset +=0.2;
var plane = BABYLON.Mesh.CreatePlane("Plane1", 10.0, scene);
// Move the sphere upward 1/2 its height
plane.position.y = 3;
plane.material = materialGround;
return scene;
}
}
createScene = function ()
{
return Playground.CreateScene(engine, engine.getRenderingCanvas());
}
var engine;
try
{
engine = createDefaultEngine();
} catch (e)
{
console.log("the available createEngine function failed. Creating the default engine instead");
engine = createDefaultEngine();
}
if (!engine) throw 'engine should not be null.';
scene = createScene();
sceneToRender = scene;
scene.executeWhenReady(() =>
{
engine.runRenderLoop(function ()
{
if (sceneToRender)
{
sceneToRender.render();
}
});
});
// Resize
window.addEventListener("resize", function ()
{
engine.resize();
});
</script>
</body>
</html>you must be trying to access “time” variable somewhere it isn’t available, your shared code doesn’t reflect this… you don’t declare it properly, but it should still work
No not really I am not accessing the variable at all. Only change is that I am adding all the code inside:
class Playground
{
static CreateScene(engine, canvas)
{
....
Oh right, i’m fairly sure in this case it will be in strict mode?
so it will not allow undeclared variables,
e.g.
time = new Date()
should be
var time = new Date()
and so on for the rest of your variables aswell
Edit
Classes - JavaScript | MDN .
The body of a class is executed in strict mode, i.e., code written here is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript
1 Like