I cant zoom my babylon output using mouse

Bugs
1

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 () {
  scene.render();
});

window.addEventListener('resize', function () {
  engine.resize();
});

return () => {
  window.removeEventListener('resize', function () {
    engine.resize();
  });
  scene.dispose();
  engine.dispose();
  // 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
    console.log(camera.radius);
  });
  
};

reader.readAsDataURL(file);

};

return (


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

);
};

export default BabylonViewer

2

Hi @Rohith_K welcome to the community

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

3

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

4

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

5

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

6

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

7

Ok thankyou ,ill look that :blush:

1 Like
8

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

9

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