I cant zoom my babylon output using mouse

import React, { useRef, useEffect } from ‘react’;
import * as BABYLON from ‘@babylonjs/core’;

const BabylonViewer = () => {
const canvasRef = useRef(null);
let scene, camera, engine;

useEffect(() => {
engine = new BABYLON.Engine(canvasRef.current, true);
scene = new BABYLON.Scene(engine);
camera = new BABYLON.ArcRotateCamera(‘camera’, 0, Math.PI / 4, 10, BABYLON.Vector3.Zero(0,1,0), scene);
camera.attachControl(canvasRef.current, true);

camera.radius = 10; // Increase the distance from the center of the scene
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);

engine.runRenderLoop(function () {

window.addEventListener('resize', function () {

return () => {
  window.removeEventListener('resize', function () {
  // light._addToSceneRootNodes();

}, );

const handleFileChange = (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function () {
BABYLON.SceneLoader.Load(‘’, reader.result, engine, function (loadedScene) {
scene = loadedScene;
camera = scene.activeCamera;
camera.attachControl(canvasRef.current, true);

    camera.radius = 5; // Adjust the camera's radius here



return (

  <canvas ref={canvasRef} style={{ width: '100%', height: 'calc(100vh - 40px)' }} />


export default BabylonViewer

Hi @Rohith_K welcome to the community

Can you please repro in a Playground? It makes debugging much more easier. Thanks.

Hi @Cedric :smiling_face:,you know I’m just a beginner in this community
So, How can I do that (repro in playground)

As this is a react app it will be a little hard to reproduce it directly in the playground (playground.babylonjs.com), but even sharing a reproduction project will help because we will be able to debug it together with you, knowing we are working on the same codebase.

Looking at the code directly, I am not sure the canvas is available when you call “useEffect”, but again, a reproduction/shared project (with the minimum needed to reproduce the issue) would be the best to help us help you

ya may be the error you said(useEffect) is correct,do you have any idea to resolve that.
ill share the github link if you want

We try to answer questions about Babyklon.js only, as otherwise we will glide into the world of “the js eco-system” :slight_smile:

If the reference is not available, try the answers available here - reactjs - React Hooks - Ref is not available inside useEffect - Stack Overflow

Ok thankyou ,ill look that :blush:

1 Like

do you know how to connect babylon project using indexeddb.
Actually my task is to store large files upto 5gb and load into the webpage

indexedDB is a public web API. We use it internally for caching, so you can see how we do that here - Babylon.js/packages/dev/core/src/Offline/database.ts at master · BabylonJS/Babylon.js (github.com) , however you might want to implement your own abstraction on top of your app, so it really depends on your use-case and what you are trying to achieve

1 Like