In order to get the code for the basic page you may go to the Playground and download the zip file with all necessary HTML and JS code, and it will work with no problems.
Thanks for the quick reply, I couldnt paste the html part here for some reason and it wouldnt let me upload a file since i am a new user so i just pasted the js part…
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
// Add your code here matching the playground format
const scene = createScene(); //Call the createScene function
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
function createScene() {
var scene = new BABYLON.Scene(engine);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera("camera1",0,0,10, 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("light", new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});
// BABYLON.SceneLoader.ImportMeshAsync("", "/", "city.obj");
return scene;
};
Oh, you are creating a free camera incorrectly. It seems like you took the arc-rotate constructor and put it on top of a free camera. You can read about the universal camera (which replaced our free camera) here: Camera Introduction | Babylon.js Documentation