Change camera via api just like ArcRotateCamera's default behavior

Questions
1

I just created a PG.
I looked up some source code on github and did it by changing the properties, but it didn’t work

I don’t know what to write on line 79… ^_^!!

2

It would be easier to help if you would explain in more details what you are trying to achieve.

3

I want to put a webpage on top, but when the mouse clicks on the transparent area of the webpage, it does not affect the normal behavior of the camera

4

When you overlay an HTML element in front of the canvas element that the Babylon engine is rendering to, it blocks mouse clicks from reaching the engine by default. That’s why the camera is no longer controllable in your example. This is easy to fix, though. Just add the following CSS style to your HTML element:

pointer-events: none;

If you have child elements in that top-level HTML element that you do want to receive mouse clicks (for example, HTML buttons), then you can apply the following to those elements to restore mouse clicks for just those elements:

pointer-events: inherit;

For example, in my own Babylon projects I usually have a fullscreen div which I use for any 2D UI. I have this layered in front of the Babylon canvas. Assuming this div has the ID of “uiContainer”, I would define CSS styles similar to the following:

#uiContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* Re-enable pointer events for the descendants of uiContainer. */
#uiContainer * {
  pointer-events: inherit;
}

If you use the CSS approach I describe, you don’t need any of that mouse handling code from line 55 and beyond.

1 Like
5 
|——iframe(pointer-event:none)
        |——body(pointer-event:none)
                 |——div(pointer-event:auto)

I tried it before，but the div can not be clicked.
So finally I came up with this method by exposing the mouse events of the transparent area

If canvas and div are in a frame it can be solved in your way

in fact,I also thought about handling these with transparency detection, but it didn’t work very well.

6

Hello just checking in, was your question answered? @ecojust

7

I can simulate ArcRotateCamera with targetCamera

but i wonder Is there any API that can manually control the ArcRotateCamera’s behavior as it would with a mouse

8

What do you mean by “manually control”? You can set the ArcRotateCamera’s parameters just like any other kind of camera.

9

thks,It didn’t occur to me that we could modify properties directly