How to make simple scene in babylon js

[@paradise_hope]

Simple Babylon.js Scene
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; display: block; }

// Get the canvas element
const canvas = document.getElementById('renderCanvas');
// Create the Babylon.js engine
const engine = new BABYLON.Engine(canvas, true);
// Create a basic scene
const createScene = function() {
// Create a new scene
const scene = new BABYLON.Scene(engine);
// Create a camera and set its position
const camera = new BABYLON.ArcRotateCamera(
'camera1',
Math.PI / 2, Math.PI / 4,
10,
BABYLON.Vector3.Zero(),
scene
);
camera.attachControl(canvas, true);
// Create a basic light
const light = new BABYLON.HemisphericLight(
'light1',
new BABYLON.Vector3(1, 1, 0),
scene
);
light.intensity = 0.7;
// Create a sphere
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);
// Set the position of the sphere
sphere.position = new BABYLON.Vector3(2, 1, 0); // x, y, z coordinates
// Create a ground plane
const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 6, height: 6 ,depth: 100}, scene);
ground.position.y = -1
// Rotate the sphere continuously
scene.registerBeforeRender(function() {
sphere.rotation.y += 0.01;
});
return scene;
};
// Create the scene
const scene = createScene();
// Render loop
engine.runRenderLoop(function() {
scene.render();
});
// Resize event handler
window.addEventListener('resize', function() {
engine.resize();
});

Simple Babylon.js Scene
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; display: block; }

// Get the canvas element
const canvas = document.getElementById('renderCanvas');
// Create the Babylon.js engine
const engine = new BABYLON.Engine(canvas, true);
// Create a basic scene
const createScene = function() {
// Create a new scene
const scene = new BABYLON.Scene(engine);
// Create a camera and set its position
const camera = new BABYLON.ArcRotateCamera(
'camera1',
Math.PI / 2, Math.PI / 4,
10,
BABYLON.Vector3.Zero(),
scene
);
camera.attachControl(canvas, true);
// Create a basic light
const light = new BABYLON.HemisphericLight(
'light1',
new BABYLON.Vector3(1, 1, 0),
scene
);
light.intensity = 0.7;
// Create a sphere
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);
// Set the position of the sphere
sphere.position = new BABYLON.Vector3(2, 1, 0); // x, y, z coordinates
// Create a ground plane
const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 6, height: 6 ,depth: 100}, scene);
ground.position.y = -1
// Rotate the sphere continuously
scene.registerBeforeRender(function() {
sphere.rotation.y += 0.01;
});
return scene;
};
// Create the scene
const scene = createScene();
// Render loop
engine.runRenderLoop(function() {
scene.render();
});
// Resize event handler
window.addEventListener('resize', function() {
engine.resize();
});