Hello,
I’m new to babylon js. So I’m sorry if the question is nonsense. I tried to use action manager when the object is clicked. I ran it but if I try to adjust the ‘setState value’, as you can see in the video. The scene paused. If I don’t use UseState hook, there is no problem when setting the variable in the code, but as you know, if I don’t use setState or State hook, our Component won’t update.
Please forgive for my english
My code blok inside use area
useEffect(() => {
function resizeWindow() {
if (scene) {
setCanvasSizes({ width: window.innerWidth, height: window.innerHeight });
scene.getEngine().resize();
}
}
window.addEventListener("resize", resizeWindow);
return () => {
window.removeEventListener("resize", resizeWindow);
};
}, [scene]);
const [scene, setScene] = useState<Babylon.Scene>();
const [loaded, setLoaded] = useState(false);
const [canvasSizes, setCanvasSizes] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
const createCamera = (scene: Babylon.Scene, canvas: HTMLCanvasElement, paddingSensibilty?: number) => {
if (scene && canvas) {
const COT = new Babylon.TransformNode(“cameraRoot”);
const camera = new Babylon.ArcRotateCamera(“Camera”, 0, 0, 100, new Babylon.Vector3(0, 0, 0), scene);
camera.parent = COT;
// This targets the camera to scene origin
camera.setPosition(new Babylon.Vector3(50, -100, -100));
camera.setTarget(Babylon.Vector3.Zero());
camera.panningSensibility = 50;
camera.zoomOnFactor = 10;
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
//Camera Sensibility
}
};
useEffect(() => {
if (!loaded) {
setLoaded(true);
const engine = new Babylon.Engine(canvasElement.current, true);
const scene = new Babylon.Scene(engine);
createCamera(scene, canvasElement.current);
setScene(scene);
if (scene.isReady()) {
setCizim(DataParser(TESTDATA));
} else {
scene.onReadyObservable.addOnce((scene) => {
renderLoopElements(engine, scene);
});
}
renderLoopElements(engine, scene);
}
return () => {
scene?.dispose();
};
}, [canvasElement]);
function renderLoopElements(engineScene: Babylon.Engine, sceneElement: Babylon.Scene) {
if (engineScene && sceneElement) {
engineScene.runRenderLoop(() => {
sceneElement.render();
});
}
}
const [testDATA, setTestDATA] = useState({
name: “TEST”,
genislik: 10,
boy: 0,
derinlik: 0,
duzenleVisible: false,
});
useEffect(() => {
if (scene && AllElementsTrasnformNodesFirstWall && canvasElement.current) {
AllElementsTrasnformNodesFirstWall.map((item: ITransformNodes) => {
const meshes: Array<Babylon.Mesh> | any = item.node.transformNode.getChildMeshes();
meshes.map((mesh: Babylon.Mesh) => {
scene.onAfterRenderObservable.add(() => {
mesh.isPickable = true;
mesh.actionManager = new Babylon.ActionManager(scene);
mesh.actionManager.registerAction(
new Babylon.ExecuteCodeAction(Babylon.ActionManager.OnPickTrigger, function (e) {
const { x, y, z } = mesh.getAbsolutePosition();
let dataDDD = {
duzenleVisible: true,
name: mesh.name,
genislik: x,
boy: y,
derinlik: z,
};
console.log(dataDDD);
setTestDATA(dataDDD);//Error Occurred On This Line
})
);
});
});
});
}
}, [AllElementsTrasnformNodesFirstWall]);
return (
{scene && }
{scene && (
<HemisphericLight intensity={10} lightName=‘FirstLight’ position={{ x: 10, y: 10, z: 2 }} scene={scene} />
)}
{scene &&
cizim &&
AllElementsTrasnformNodesSecondWall &&
Object.values(cizim).map((collection: any, index: number) => {
if (collection[0].duvarNo === 1) {
const cizimHeader: any = Object.keys(cizim)[index];
const transformNode = (
(AllElementsTrasnformNodesSecondWall.filter((item) => item.node.name === cizimHeader)[0] || {}).node || {}
).transformNode;
return (
<SarginDrawEngine
collection={collection}
key={index + Math.random()}
scene={scene}
collectionName={Object.keys(cizim)[index]}
MainNodes={transformNode}
duvarFilter={1}
/>
);
}
})}
{scene &&
cizim &&
AllElementsTrasnformNodesFirstWall &&
Object.values(cizim).map((collection: any, index: number) => {
if (collection[0].duvarNo === 0) {
const cizimHeader: any = Object.keys(cizim)[index];
const transformNode =
(
(AllElementsTrasnformNodesFirstWall.filter((item) => item.node.name === cizimHeader)[0] || {}).node ||
{}
).transformNode || {};
return (
<SarginDrawEngine
collection={collection}
key={index + Math.random()}
scene={scene}
collectionName={Object.keys(cizim)[index]}
MainNodes={transformNode}
duvarFilter={0}
/>
);
}
})}
);
Video:
Thanks for your helping