Hello I am using Babylon version 5.0.0-alpha.22 with a react project
Here are the dependencies:
“@babylonjs/core”: “^5.0.0-alpha.22”,
“@babylonjs/inspector”: “^5.0.0-alpha.22”,
“@babylonjs/loaders”: “^5.0.0-alpha.22”,
I uploaded a glb model to the inspector, made some changes and downloaded the diff.json file which holds all the changes on the model.
In the project I load the same 3d model and put the json file (changes file) in the src folder
This is how my Custom.js Component looks like
import { Component } from "react";
import Helper from "./Helper";
import carChanges from "./diff.json";
var scene;
var engine;
class CustomScene extends Component {
constructor(props) {
super(props);
this.helperInstance = new Helper();
}
componentDidMount() {
this.start();
}
start = () => {
let canvas = document.getElementById("scene-canvas");
engine = this.helperInstance.createEngine(canvas);
scene = this.helperInstance.createScene(engine);
this.helperInstance.loadModel(scene, "Car.glb");
this.helperInstance.applyChanges(scene, carChanges);
// Add Events
window.addEventListener("resize", this.onWindowResize, false);
// Render Loop
engine.runRenderLoop(() => {
scene.render();
});
};
onWindowResize = (event) => {
engine.resize();
};
render() {
return (
<div>
<canvas id="scene-canvas"></canvas>
</div>
);
}
}
export default CustomScene;
Helper.js class
import { SceneLoader, Scene, Engine } from "@babylonjs/core";
import "@babylonjs/loaders"; // for models to be uploaded to the scene
import "@babylonjs/inspector"; // for scene debug layer show
import { SceneRecorder } from "@babylonjs/core/Misc/sceneRecorder";
class Helper {
createEngine(canvas) {
const engine = new Engine(canvas, true);
return engine;
}
createScene(engine) {
//Create Scene
let scene = new Scene(engine);
scene.createDefaultCameraOrLight(true, true, true);
scene.createDefaultEnvironment({ createGround: false, createSkybox: false });
scene.debugLayer.show();
return scene;
}
applyChanges(scene, changes) {
console.log("Inside the apply changes function ...");
console.log(changes);
console.log(scene);
// scene and changes are correct
SceneRecorder.ApplyDelta(changes, scene);
}
// load a glb model in a scene
loadModel(scene, model) {
SceneLoader.Append(`${process.env.PUBLIC_URL}/assets/`, model, scene, (scene) => {});
}
}
export default Helper;
When I apply the delta file in the inspector it works fine so I think the SceneRecorder feature is working
Is there a problem with my code and how I am using SceneRecorder?