added skybox

package.json

@@ -19,6 +19,7 @@
   "homepage": "https://github.com/99-Knots/EditorDemo#readme",
   "devDependencies": {
     "@babylonjs/core": "^7.8.2",
+    "@babylonjs/materials": "^7.8.2",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",

src/index.ts

@@ -1,4 +1,5 @@
-import * as BABYLON from '@babylonjs/core'
+import * as BABYLON from '@babylonjs/core'; 
+import { SkyMaterial } from '@babylonjs/materials'
 
 const canvas = document.createElement('canvas');
 canvas.id = "render-canvas";
@@ -9,9 +10,16 @@ document.body.appendChild(canvas);
 const engine = new BABYLON.Engine(canvas, true);
 const scene = new BABYLON.Scene(engine);
 
-const camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 10, BABYLON.Vector3.Zero(), scene);
+const camera = new BABYLON.ArcRotateCamera('camera1', 0.5, 0.9, 10, BABYLON.Vector3.Zero(), scene);
 camera.attachControl(canvas, true);
 
+const skyMaterial = new SkyMaterial("skyMaterial", scene);
+skyMaterial.backFaceCulling = false;
+skyMaterial.inclination = 0.3;
+
+const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
+skybox.material = skyMaterial;
+
 const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0), scene);
 
 const cube = BABYLON.MeshBuilder.CreateBox('box', {}, scene);