TroisJS

Render loop

TroisJS launch a requestAnimationFrame loop to render the scene, you can use onBeforeRender() to execute your code before each frame.

WARNING

The render loop usually runs at 60fps, don't use reactivity to update troisjs components, you should directly update ThreeJS objects.

Please see why here : proxy setter benchmark.

<template>
  <Renderer ref="renderer">
    <Camera :position="{ z: 10 }" />
    <Scene>
      <PointLight :position="{ y: 50, z: 50 }" />
      <Box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
        <LambertMaterial />
      </Box>
    </Scene>
  </Renderer>
</template>

<script>
export default {
  mounted() {
    const renderer = this.$refs.renderer;
    const box = this.$refs.box.mesh;
    renderer.onBeforeRender(() => {
      box.rotation.x += 0.01;
    });
  },
};
</script>