How can I rotate the box endlessly

Questions
1

how can I rotate the box endlessly Reactjs, babylonjs.

not working

<RotateMeshBehavior axis={Axis.Y} radians={0.01} />

bandicam 2021-01-31 20-15-54-746
bandicam 2021-01-31 20-15-54-7461092Ă—379 125 KB

how can i rotate this

2

I woulnd’t say that your question is clear, but anyway:
In order to do something “endlessly” the function should be inside some cycle.
For example - Babylon.js Playground

scene.registerBeforeRender(function () {
//Your code here
});
3

i want to do like this
not working : RotateMeshBehavior
https://brianzinn.github.io/create-react-app-babylonjs/

is there any other way to do this

4

So, as I understand, for some reasons this example doesn’t work for you?
https://brianzinn.github.io/create-react-app-babylonjs/withProps

1 Like
6

yes it doesn’t work like this example
RotateMeshBehavior was running on older versions
RotateMeshBehavior is not working now

7

I think you may ask the author @brianzinn

1 Like
8

thanks

9

@brianzinn can you help with this

10

hi @3dObject Do you get an error when it doesn’t work? I just ran it against 3.0.3 and it’s working for me.

Also, there has been a hook added useBeforeRender that is perhaps a better way to go. The <hostWithEvents /> would really only be needed if you wanted access to lifecycle events (parented, child added, unmount,…). I should probably get rid of that altogether and just add those as global props, but some internals are exposed with the whole renderer graph.

For useBeforeRender - you would go like this:

import React, { useRef } from 'react'
import { Engine, Scene, useBeforeRender } from 'react-babylonjs'
import { Color3 } from '@babylonjs/core'

const SpinningBox = (props) => {
  // access Babylon scene objects with same React hook as regular DOM elements
  const boxRef = useRef(null);
 
  // This will rotate the box on every Babylon frame.
  const rpm = 5;
  useBeforeRender((scene) => {
    if (boxRef.current) {
      // Delta time smoothes the animation.
      var deltaTimeInMillis = scene.getEngine().getDeltaTime();
      boxRef.current.rotation.y += ((rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000));
    }
  });

  return (<box name={props.name} ref={boxRef} size={2} position={props.position}>
    <standardMaterial name={`${props.name}-mat`} diffuseColor={props.Color} specularColor={Color3.Black()} />
  </box>);
}

The idea behind how the hook works is code like this:

const SpinningBox = (props) => {
  // access Babylon Scene
  const scene = useScene();
  // access refs to Babylon objects in scene like DOM nodes
  const boxRef = useRef(null);

  // this is essentially what useBeforeRender does:
  useEffect(() => {
    if (boxRef.current) {
      const handler = scene.registerBeforeRender(() => {
        let deltaTimeInMillis = scene.getEngine().getDeltaTime();
        boxRef.current.rotation[props.rotationAxis] += ((rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000))
      })
      return (() => {
        scene.unregisterBeforeRender(handler);
      })
    }
  }, [boxRef.current]);

  return (<box ref={boxRef} size={2} position={props.position}>
    <standardMaterial diffuseColor={props.color} specularColor={Color3.Black()} />
  </box>);
}

Let us know if that works out for you or if you have more questions we can create a code sandbox.

1 Like
11

@brianzinn thank you so much

1 Like