How to have different camera alpha values

Bugs
1

Hi there.

  1. I have mesh with texture.
  2. I have 3 default camera functions with different alpha value each with function name handleRight(), handleLeft(), handleCenter(). All 3 functions have different default camera with different alpha values.
  3. I have one button with onclick event called “handleCount()”. handleCount function calls functions based on count value.
  4. If count value is 0 then call handleCenter();
    If count value is 1 then call handleLeft(); handleRight();
    If count value is 2 then call handleCenter(); handleLeft(); handleRight();

But im not able to call 3 functions on click of button one after another.

Here is codesandbox link : gifted-stonebraker-d17zwj - CodeSandbox

What im trying to achive is : Onclick of button show 3 different view of mesh. if count value is 0 then show one angle view, if count value is 1 then show two views on click, if count value is 2 then show left right and center view of mesh.

trying to achive Somethings like this.

one1
one1596×548 22.1 KB

three3
three3645×503 18.5 KB

two2
two2593×543 21.5 KB

Any suggestions please

2

@PolygonalSun can you have a look ?

1 Like
3

I just want to preface this with the fact that I don’t know too much about React. Anyway, from what I’m seeing, I suspect that the handleLeft/Right/Center functions don’t have the context for the scene, so those functions are unable to get the camera and do anything with it. This might be related to how you’re assigning the instantiating your engine. In that code sandbox, I saw the following error (ModelComponent.js, line 67):

Assignments to the 'engine' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.

It looks like as soon as your useEffect resolves, the engine reference will be lost.

Additionally, inside of your handle functions, you shouldn’t use createDefaultCameraOrLight more than once because it doesn’t do anything if you’ve already created a default light or camera. If you’ve already created a camera, you can just pull the reference scene.activeCamera or manually create a new camera (if you need one though I wouldn’t recommend it for what you want to do). From there you could just change the alpha/beta values:

const handleLeft = () => {
    const camera1 = scene.activeCamera;
    camera1.upperBetaLimit = BABYLON.Tools.ToRadians(90);
    camera1.lowerBetaLimit = BABYLON.Tools.ToRadians(90);
    camera1.beta = -2.0;
    camera1.alpha = -2.0;
    camera1.radius = 0.25;
  };

If I’m misunderstanding anything about your context, please let me know.

2 Likes