How can I rotate the box endlessly

how can I rotate the box endlessly Reactjs, babylonjs.

not working

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

how can i rotate this

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

i want to do like this
not working : RotateMeshBehavior

is there any other way to do this

So, as I understand, for some reasons this example doesn’t work for you?

1 Like

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

I think you may ask the author @brianzinn

1 Like


@brianzinn can you help with this

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={} ref={boxRef} size={2} position={props.position}>
    <standardMaterial name={`${}-mat`} diffuseColor={props.Color} specularColor={Color3.Black()} />

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 (() => {
  }, [boxRef.current]);

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

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

1 Like

@brianzinn thank you so much

1 Like