feat: 158 stats

docs/.vitepress/config.ts

@@ -97,7 +97,10 @@ export default defineConfig({
       },
       {
         text: 'Misc',
-        items: [{ text: 'useTweakpane', link: '/guide/misc/use-tweakpane' }],
+        items: [
+          { text: 'useTweakpane', link: '/guide/misc/use-tweakpane' },
+          { text: 'Stats', link: '/guide/misc/stats' },
+        ],
       },
     ],
 

docs/guide/misc/stats.md

@@ -0,0 +1,24 @@
+# Stats
+
+[Stats.js](https://github.com/mrdoob/stats.js/) is a JavaScript performance monitor, made by [mrdoop](https://github.com/mrdoob). Stats.js provides a simple info box that will help you monitor your code performance.
+
+- FPS Frames rendered in the last second. The higher the number the better.
+- MS Milliseconds needed to render a frame. The lower the number the better.
+- MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)
+- CUSTOM User-defined panel support.
+
+**TresJS** provides a function called `stats` that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.
+
+## Basic usage
+
+```ts
+import { stats } from '@tresjs/cientos'
+
+stats()
+```
+
+## Options
+
+| Name          | Type     | Default | Description          |
+| :------------ | -------- | ------- | -------------------- |
+| **showPanel** | `number` | `0`     | The initial monitor. |

package.json

@@ -77,6 +77,7 @@
     "vitepress": "1.0.0-rc.4"
   },
   "dependencies": {
+    "stats.js": "^0.17.0",
     "@tresjs/core": "3.1.1",
     "@vueuse/core": "^10.3.0",
     "camera-controls": "^2.7.1",

playground/src/pages/FirstPersonControlsDemo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping } from 'three'
-import { PointerLockControls, KeyboardControls } from '@tresjs/cientos'
+import { PointerLockControls, KeyboardControls, stats } from '@tresjs/cientos'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -11,6 +11,8 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
+stats(0)
+
 const isActive = (state: boolean) => console.log(state)
 </script>
 
@@ -27,3 +29,4 @@ const isActive = (state: boolean) => console.log(state)
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>
+

src/core/misc/Stats.ts

@@ -0,0 +1,31 @@
+import { onUnmounted, onMounted } from 'vue'
+import { useRenderLoop } from '@tresjs/core'
+import StatsImpl from 'stats.js'
+
+export /**
+ * Initialize stats with a specific panel.
+ *
+ * @param {number} [showPanel=0]
+ * @return {*}
+ */
+const stats = (showPanel = 0) => {
+  const stats = new StatsImpl()
+
+  if (stats) {
+    const node = document.body
+    stats.showPanel(showPanel)
+    node?.appendChild(stats.dom)
+
+    onMounted(() => {
+      const { onBeforeLoop, onAfterLoop, resume } = useRenderLoop()
+      resume()
+      onBeforeLoop(() => stats.begin())
+      onAfterLoop(() => stats.end())
+    })
+    onUnmounted(() => {
+      node?.removeChild(stats.dom)
+    })
+  }
+
+  return null
+}

src/core/misc/index.ts

@@ -1,3 +1,4 @@
 import { useTweakPane } from './useTweakPane'
+import { stats } from './Stats'
 
-export { useTweakPane }
+export { useTweakPane, stats }