Animations in React & Babylon-hooks & DomGUI

Questions
, , ,
1

I have DomGUI as a child of SceneComponent. I am attaching a function after clicking on elements from DomGUI.
My problem is that the animation works correctly if I somehow interact with Canvas before clicking the DomGUI element, otherwise the animation happens only for beta and alpha, the target only changes at the end of the animation, moving without animation. I tried doing scene.update(), but it didn’t help.
If anyone knows what the problem is, please help

 const scrollToPreviousPosition = (stepArg) => {
      if (scene) {
        const lookAt = new Vector3(126, 1.3, -27)
        const camera = scene.activeCamera

        setActiveMesh(null)
        setActiveColumbarium(null)
        setSection(0)
        camera.maxZ = 10000

        camera.upperRadiusLimit = 1000
        camera.lowerRadiusLimit = 0

        scene.meshes.forEach((mesh) => {
          if (/^(?!.*L1).*Cell.*/.test(mesh.name)) {
            mesh.setEnabled(false)
          }
          if (/(Bush|Vases|Benchs|Lanterns)/.test(mesh.name)) {
            mesh.setEnabled(true)
          }
        })

        const target = new Vector3(125, 0, -26)

        const radiusAnimation = new Animation(
          'cameraAnimation',
          'radius',
          80,
          Animation.ANIMATIONTYPE_FLOAT,
          Animation.ANIMATIONLOOPMODE_CONSTANT
        )

        const keys = []
        keys.push({
          frame: 0,
          value: camera.radius,
        })
        keys.push({
          frame: 100,
          value: 70,
        })

        radiusAnimation.setKeys(keys)

        camera.animations.push(radiusAnimation)

        const alphaAnimation = new Animation(
          'alphaAnimation',
          'alpha',
          80,
          Animation.ANIMATIONTYPE_FLOAT,
          Animation.ANIMATIONLOOPMODE_CONSTANT
        )

        const alphaKeys = []
        alphaKeys.push({
          frame: 0,
          value: camera.alpha,
        })
        alphaKeys.push({
          frame: 100,
          value: -0.6536666790342528,
        })

        alphaAnimation.setKeys(alphaKeys)
        camera.animations.push(alphaAnimation)

        const betaAnimation = new Animation(
          'betaAnimation',
          'beta',
          80,
          Animation.ANIMATIONTYPE_FLOAT,
          Animation.ANIMATIONLOOPMODE_CONSTANT
        )

        const betaKeys = []
        betaKeys.push({
          frame: 0,
          value: camera.beta,
        })
        betaKeys.push({
          frame: 100,
          value: 1.18,
        })

        betaAnimation.setKeys(betaKeys)
        camera.animations.push(betaAnimation)

        const targetAnimation = new Animation(
          'targetAnimation',
          'target',
          80,
          Animation.ANIMATIONTYPE_VECTOR3,
          Animation.ANIMATIONLOOPMODE_CONSTANT
        )

        const targetKeys = []
        targetKeys.push({
          frame: 0,
          value: camera.target.clone(),
        })
        targetKeys.push({
          frame: 100,
          value: target,
        })

        targetAnimation.setKeys(targetKeys)
        camera.animations.push(targetAnimation)

        const animationEvent = new AnimationEvent(100, () => {
          camera.upperRadiusLimit = 70
          camera.lowerRadiusLimit = 70
        })
        targetAnimation.addEvent(animationEvent)

        scene.beginAnimation(camera, 0, 100, false)
      }
    }

 <SceneComponent
        tabIndex={1}
        antialias
        onSceneReady={onSceneReady}
        onRender={onRender}
        id="my-canvas"
        hidden={isLoading}
      >
        <DomGUI />
      </SceneComponent>
2

works correctly with such clicks:
image
doesn’t work with this click
image

3

@brianzinn Can you help please?

4

hi @DarBaala - Welcome to the forum. sorry that nobody answered you for 3 days. I missed your message.

I’m not sure why that is so. I think it’s related to once you have clicked that the pointer events are being handled and the camera is working differently. If @PolygonalSun doesn’t know then if you can share how scrollToPreviousPosition method is being called? Maybe we can make a repro on codesandbox or something - it’s not entirely clear to me how to interpret the 2 screen captures that you have shared. Often we ask for a PG (Playground). I know that’s not possible with React (in babylon.js playgrounds), but likely this issue would be the same there.

2 Likes
5

Hi, @brianzinn! Thank you for your response and for supporting Babylon.js in React JS. I had four animations, and I applied them individually using BeginAnimation. The issue was resolved when I started using BeginDirectAnimation.

1 Like