fix(core) correct delta value and clock on state

packages/tres/src/components/TheBasic.vue

@@ -15,7 +15,7 @@ import {
 } from 'three'
 import { reactive, ref } from 'vue'
 
-import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
+import { OrbitControls, TransformControls } from '@tresjs/cientos'
 import { useRenderLoop } from '..'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
@@ -33,71 +33,9 @@ const sphereRef = ref()
 
 const { onLoop } = useRenderLoop()
 
-onLoop(({ delta, clock }) => {
-  sphereRef.value.position.y += delta * 5
+onLoop(({ delta, elapsed, state }) => {
+  sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1
 })
-
-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">

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

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

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

@@ -16,6 +16,7 @@ import {
   WebGLRenderer,
   ShadowMapType,
   PCFShadowMap,
+  Clock,
 } from 'three'
 import type { TextureEncoding, ToneMapping } from 'three'
 import { useRenderLoop, useTres } from '/@/core/'
@@ -188,7 +189,7 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
 
     const { setState } = useTres()
     setState('renderer', renderer.value)
-
+    setState('clock', new Clock())
     updateRendererOptions()
     updateRendererSize()
     resume()