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>