Hi, I’m just starting out using Babylon js with React. I want to do a simple thing: press a button to make my cube go up. After several attempts I decided to just post here the simple boilerplate that I started with. First, my App.js:
import React, { useState } from “react”;
import {
FreeCamera,
Vector3,
HemisphericLight,
MeshBuilder,
} from “@babylonjs/core”;
import SceneComponent from “./SceneComponent”;
import “./App.css”;
let box;
const onSceneReady = (scene) => {
var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
camera.setTarget(Vector3.Zero());
const canvas = scene.getEngine().getRenderingCanvas();
camera.attachControl(canvas, true);
var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
light.intensity = 0.7;
box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
box.position.y = 0;
};
function App() {
const [position, setPosition] = useState(0);
const handleUp = () => {
setPosition(position + 1);
};
return (
<div>
<SceneComponent
antialias
onSceneReady={onSceneReady}
id="my-canvas"
></SceneComponent>
<button onClick={handleUp}>up</button>
</div>
);
}
export default App;
Then my SceneComponent:
import { Engine, Scene } from "@babylonjs/core";
import React, { useEffect, useRef } from "react";
import "./SceneComponent.css";
export default (props) => {
const reactCanvas = useRef(null);
const {
antialias,
engineOptions,
adaptToDeviceRatio,
sceneOptions,
onRender,
onSceneReady,
...rest
} = props;
useEffect(() => {
if (reactCanvas.current) {
const engine = new Engine(
reactCanvas.current,
antialias,
engineOptions,
adaptToDeviceRatio
);
const scene = new Scene(engine, sceneOptions);
if (scene.isReady()) {
props.onSceneReady(scene);
} else {
scene.onReadyObservable.addOnce((scene) => props.onSceneReady(scene));
}
engine.runRenderLoop(() => {
if (typeof onRender === "function") {
onRender(scene);
}
scene.render();
});
const resize = () => {
scene.getEngine().resize();
};
if (window) {
window.addEventListener("resize", resize);
}
return () => {
scene.getEngine().dispose();
if (window) {
window.removeEventListener("resize", resize);
}
};
}
}, [reactCanvas]);
return <canvas className="canvas" ref={reactCanvas} {...rest} />;
};
So, how should I pass the position state so that it updates my scene?