Merge pull request #83 from Tresjs/bugfix/81-onloop-delta-is-always-0

fix(core): onloop delta is always 0

docs/api/composables.md

@@ -13,7 +13,7 @@ The `useRenderLoop` composable is the core of **TresJS** animations. It allows y
 ```ts
 const { onLoop, resume } = useRenderLoop()
 
-onLoop(({ delta, elapsed }) => {
+onLoop(({ delta, elapsed, clock, dt }) => {
   // I will run at every frame ~ 60FPS (depending of your monitor)
 })
 ```

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/useInstanceCreator/index.ts

@@ -86,8 +86,8 @@ export function useInstanceCreator(prefix: string) {
       // check if args prop is defined on the vnode
       let internalInstance
       if (catalogue) {
-        if (vnode.children?.default) {
-          const internal = vnode.children
+        if ((vnode.children as unknown as { default: any })?.default) {
+          const internal = (vnode.children as unknown as { default: any })
             .default()
             .map((child: TresVNode) => createInstanceFromVNode(child)) as TresInstance[]
 

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

@@ -5,6 +5,8 @@ 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 },
 )

packages/tres/src/types/index.d.ts

@@ -9,7 +9,7 @@ export type TresVNodeType = VNodeTypes & {
   __name?: string
   setup?: (props: Readonly<any>) => void
 }
-export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
+export type TresVNode = VNode & { children?: Array<VNode | { default: any }>; type: TresVNodeType }
 export type TresAttributes = Record<string, any> & { args?: number[] }
 
 export type TresColor = string | number | Color | number[]