Both the Editor and Toolkit look really good. And offer valuable items. Are they supposed to be used together?
I do see main.ts - which instantiates the App on loaded:
E:\Dev\Repos\r2d2Proton\BabylonTest\src\main.ts
import './style.css';
import { App } from './App';
// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
const app = new App();
app.init();
});
App has a lot of imports { Scene } and { Engine } and { HavokPlugin } and HavokPhysics. My first attempt is to comment out the loadScene and create an inline replacement. But I suspect this can be created better than that. Hence my question. Follow the natural progress of the Editor Sample flow. At some point move the assets under my test project folder too. Still learning about the setup though.
E:\Dev\Repos\r2d2Proton\BabylonTest\src\App.ts
import "@babylonjs/core/Physics";
import { loadScene } from "babylonjs-editor-tools";
import { scriptsMap } from "./scripts";
export class App {
private _canvas: HTMLCanvasElement;
private _engine: Engine | null = null;
private _scene: Scene | null = null;
constructor() {
const canvasElement = document.getElementById('canvas') as HTMLCanvasElement;
if (!canvasElement) {
throw new Error('Canvas element not found');
}
this._canvas = canvasElement;
}
public async init(): Promise<void> {
this._engine = new Engine(this._canvas, true, {
stencil: true,
antialias: true,
audioEngine: true,
adaptToDeviceRatio: true,
disableWebGL2Support: false,
useHighPrecisionFloats: true,
powerPreference: "high-performance",
failIfMajorPerformanceCaveat: false,
});
this._scene = new Scene(this._engine);
await this._handleLoad();
// Handle window resize
const handleResize = () => {
this._engine?.resize();
};
window.addEventListener("resize", handleResize);
// Start render loop
this._engine.runRenderLoop(() => {
this._scene?.render();
});
}
private async _handleLoad(): Promise<void> {
if (!this._engine || !this._scene) {return;}
//const havok = await HavokPhysics();
//this._scene.enablePhysics(new Vector3(0, -981, 0), new HavokPlugin(true, havok));
//SceneLoaderFlags.ForceFullSceneLoadingForIncremental = true;
//await loadScene("/scene/", "example.babylon", this._scene, scriptsMap, {
// quality: "high",
//});
//
//if (this._scene.activeCamera) {
// this._scene.activeCamera.attachControl();
//}
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
await DemoScene.Load(scene);
}
public dispose(): void {
this._scene?.dispose();
this._engine?.dispose();
}
}
class DemoScene {
private static ScriptBundleUrl:string = TOOLKIT.SceneManager.PlaygroundCdn + "default.playground.js";
public static async Load(scene:BABYLON.Scene): Promise<void> {
await TOOLKIT.SceneManager.InitializePlayground(scene.getEngine(), { showDefaultLoadingScreen: true, hideLoadingUIWithEngine: false });
globalThis.SCRIPTBUNDLE_JS = globalThis.SCRIPTBUNDLE_JS || await BABYLON.Tools.LoadScriptAsync(DemoScene.ScriptBundleUrl);
// @ts-ignore - This initializes fresh physics for this scene
globalThis.HK = await HavokPhysics();
globalThis.HKP = new BABYLON.HavokPlugin(false);
scene.enablePhysics(new BABYLON.Vector3(0,-9.81,0), globalThis.HKP);
// This cleans up globals when the scene is disposed
const cleanupGlobals = () => {
if (globalThis["HKP"]) delete globalThis["HKP"];
if (globalThis["HK"]) delete globalThis["HK"];
};
scene.onDisposeObservable.addOnce(cleanupGlobals);
const assetsManager = new BABYLON.AssetsManager(scene);
assetsManager.addMeshTask("samplescene", null, TOOLKIT.SceneManager.PlaygroundRepo, "samplescene.gltf");
assetsManager.addMeshTask("playerarmature", null, TOOLKIT.SceneManager.PlaygroundRepo, "playerarmature.gltf");
await TOOLKIT.SceneManager.LoadRuntimeAssets(assetsManager, ["samplescene.gltf", "playerarmature.gltf"], ()=> {
try {
const player = scene.getNodeByName("PlayerArmature") as BABYLON.TransformNode;
if (player != null) {
const controller = new PROJECT.ThirdPersonPlayerController(player, scene, { arrowKeyRotation: true, smoothMotionSpeed:true, smoothChangeRate: 25.0 });
controller.enableInput = true;
controller.attachCamera = true;
controller.moveSpeed = 5.335;
controller.walkSpeed = 2.0;
controller.jumpSpeed = 12.0;
}
} catch (e) {
console.error("Failed to attach player controller", e);
} finally {
TOOLKIT.SceneManager.HideLoadingScreen(scene.getEngine());
TOOLKIT.SceneManager.FocusRenderCanvas(scene);
}
});
}
}
Are there Toolkit samples/starter-kits that are configured for the Editor?
Or how to properly modify the Toolkit Sample to match the Editor Sample?
