fix(core): corret use of clock.getDelta()

packages/tres/src/App.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useTweakPane } from '@tresjs/cientos'
-import Shapes from '/@/components/Shapes.vue'
+import TheBasic from '/@/components/TheBasic.vue'
 
 useTweakPane()
 </script>
 
 <template>
   <Suspense>
-    <Shapes />
+    <TheBasic />
   </Suspense>
 </template>

packages/tres/src/components/TheBasic.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import {
+  sRGBEncoding,
+  LinearEncoding,
+  BasicShadowMap,
+  PCFShadowMap,
+  PCFSoftShadowMap,
+  VSMShadowMap,
+  NoToneMapping,
+  LinearToneMapping,
+  ReinhardToneMapping,
+  CineonToneMapping,
+  ACESFilmicToneMapping,
+  CustomToneMapping,
+} from 'three'
+import { reactive, ref } from 'vue'
+
+import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
+import { useRenderLoop } from '..'
+/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
+
+const state = reactive({
+  clearColor: '#201919',
+  shadows: true,
+  alpha: false,
+  physicallyCorrectLights: true,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+})
+
+const sphereRef = ref()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta, clock }) => {
+  sphereRef.value.position.y += delta * 5
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(state, 'clearColor', {
+  label: 'Background Color',
+  colorMode: 'hex',
+})
+pane.addInput(state, 'shadows', {
+  label: 'Shadows',
+})
+pane.addInput(state, 'physicallyCorrectLights', {
+  label: 'physicallyCorrectLights',
+})
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'outputEncoding',
+    options: [
+      { text: 'sRGBEncoding', value: sRGBEncoding },
+      { text: 'LinearEncoding', value: LinearEncoding },
+    ],
+    value: sRGBEncoding,
+  })
+  .on('change', ev => {
+    state.outputEncoding = ev.value
+  })
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'ShadowMap Type',
+    options: [
+      { text: 'BasicShadowMap', value: BasicShadowMap },
+      { text: 'PCFShadowMap', value: PCFShadowMap },
+      { text: 'PCFSoftShadowMap', value: PCFSoftShadowMap },
+      { text: 'VSMShadowMap', value: VSMShadowMap },
+    ],
+    value: BasicShadowMap,
+  })
+  .on('change', ev => {
+    state.shadowMapType = ev.value
+  })
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'toneMapping',
+    options: [
+      { text: 'NoToneMapping', value: NoToneMapping },
+      { text: 'LinearToneMapping', value: LinearToneMapping },
+      { text: 'ReinhardToneMapping', value: ReinhardToneMapping },
+      { text: 'CineonToneMapping', value: CineonToneMapping },
+      { text: 'ACESFilmicToneMapping', value: ACESFilmicToneMapping },
+      { text: 'CustomToneMapping', value: CustomToneMapping },
+    ],
+    value: NoToneMapping,
+  })
+  .on('change', ev => {
+    console.log(ev.value)
+    state.toneMapping = ev.value
+  })
+</script>
+<template>
+  <TresCanvas v-bind="state">
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+    <OrbitControls make-default />
+    <TresScene>
+      <TresAmbientLight :intensity="0.5" />
+      <TransformControls mode="scale" :object="sphereRef" />
+
+      <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
+        <TresSphereGeometry />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
+      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+        <TresMeshToonMaterial />
+      </TresMesh>
+      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
+    </TresScene>
+  </TresCanvas>
+</template>

packages/tres/src/core/useRenderLoop/index.ts

@@ -1,10 +1,12 @@
-import { createEventHook, EventHookOn, Fn, useRafFn } from '@vueuse/core'
+import { createEventHook, EventHookOn, Fn, useRafFn, UseRafFnCallbackArguments } from '@vueuse/core'
 import { Clock } from 'three'
 import { Ref } from 'vue'
 
 export interface RenderLoop {
   delta: number
   elapsed: number
+  clock: Clock
+  dt: number
 }
 
 export interface UseRenderLoopReturn {
@@ -22,14 +24,17 @@ const onAfterLoop = createEventHook<RenderLoop>()
 
 const clock = new Clock()
 
+let delta = 0
+
 const { pause, resume, isActive } = useRafFn(
-  () => {
+  ({ delta: dt }) => {
     const elapsed = clock.getElapsedTime()
-    const delta = clock.getDelta()
 
-    onBeforeLoop.trigger({ delta, elapsed })
-    onLoop.trigger({ delta, elapsed })
-    onAfterLoop.trigger({ delta, elapsed })
+    onBeforeLoop.trigger({ delta, elapsed, clock, dt })
+    onLoop.trigger({ delta, elapsed, clock, dt })
+    onAfterLoop.trigger({ delta, elapsed, clock, dt })
+
+    delta = clock.getDelta()
   },
   { immediate: false },
 )