feat: 393 lod

docs/.vitepress/config.ts

@@ -160,6 +160,7 @@ export default defineConfig({
           { text: 'StatsGl', link: '/guide/misc/stats-gl' },
           { text: 'useGLTFExporter', link: '/guide/misc/use-gltf-exporter' },
           { text: 'BakeShadows', link: '/guide/misc/bake-shadows' },
+          { text: 'LOD', link: '/guide/misc/lod' },
         ],
       },
     ],

docs/.vitepress/theme/components/LODDemo.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { LOD, OrbitControls, Sphere } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 4]" />
+    <OrbitControls :enablePan="false" :enableDamping="false" :enableRotate="false" />
+    <LOD :distance="0" name="high">
+      <Sphere name="sphere" :args="[1, 16]" :position="[-1, 0, 0]">
+        <TresMeshNormalMaterial wireframe />
+      </Sphere>
+    </LOD>
+
+    <LOD :distance="5" name="medium">
+      <Sphere name="sphere" :args="[1, 8]" :position="[-1, 0, 0]">
+        <TresMeshNormalMaterial wireframe />
+      </Sphere>
+    </LOD>
+
+    <LOD :distance="10" name="low">
+      <Sphere name="sphere" :args="[1, 4]" :position="[-1, 0, 0]">
+        <TresMeshNormalMaterial wireframe />
+      </Sphere>
+    </LOD>
+  </TresCanvas>
+</template>

docs/component-list/components.ts

@@ -108,6 +108,7 @@ export default [
       { text: 'StatsGl', link: '/guide/misc/stats-gl' },
       { text: 'useGLTFExporter', link: '/guide/misc/use-gltf-exporter' },
       { text: 'BakeShadows', link: '/guide/misc/bake-shadows' },
+      { text: 'LOD', link: '/guide/misc/lod' },
     ],
   },
   {

docs/guide/misc/lod.md

@@ -0,0 +1,30 @@
+# LOD (level of detail)
+
+<DocsDemo>
+  <LODDemo />
+</DocsDemo>
+
+**Cientos** provides a component called `LOD` (Level of Detail) which reduces or increase the resolution of the geometry based on distance from the camera. based on: [LOD](https://threejs.org/docs/index.html?q=lod#api/en/objects/LOD)
+
+Every level is associated with a group, and rendering can be switched between them at the distances specified. Typically you would create, say, three meshes:
+
+- one for far away (lesser detail)
+- one for mid-range (medium detail)
+- one for close-up (higher detail).
+
+## Basic usage
+
+When using the `<LOD >` component you need to pass a `distance` prop, then you put inside all the components that will be rendered at that distance
+
+<<< @/.vitepress/theme/components/LODDemo.vue{3,10-14,16-20,22-26}
+
+::: warning
+Due the nature of the base class on ThreeJs this component is not reactive, that's mean if you make a change you have to manually reload the page for view them.
+:::
+
+## Props
+
+| Prop          | Type     | Default | Description  |
+| :------------ | -------- | ------- | ------------ |
+| **distance** | `number` | required    | The distance at which to display this level of detail.. |
+| **hysteresis** | `number` | `0`     | Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.. |

playground/src/pages/misc/LODDemo.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { CameraControls, LOD, Sphere } from '@tresjs/cientos'
+import { shallowRef, watch } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#111',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const lodRef = shallowRef()
+
+watch(lodRef, (value) => {
+  // eslint-disable-next-line no-console
+  console.log('jaime ~ LOD LEVELS ~ value:', value.instance)
+})
+</script>
+
+<!-- <Sphere name="sphere" :args="[1, 16]" :position="[-1, 0, 0]">
+  <TresMeshNormalMaterial wireframe />
+</Sphere> -->
+<!-- -->
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <CameraControls :distance="50" />
+    <LOD ref="lodRef" :distance="0" name="high">
+      <Sphere name="sphere" :args="[1, 16]" :position="[-1, 0, 0]">
+        <TresMeshNormalMaterial wireframe />
+      </Sphere>
+      <TresMesh name="box" :position="[1, 0, 0]">
+        <TresBoxGeometry :args="[1, 1, 1, 10, 10, 10]" />
+        <TresMeshBasicMaterial wireframe :color="0xFF0000" />
+      </TresMesh>
+    </LOD>
+    <LOD :distance="15" name="medium">
+      <Sphere name="sphere" :args="[1, 8]" :position="[-1, 0, 0]">
+        <TresMeshNormalMaterial wireframe />
+      </Sphere>
+    </LOD>
+
+    <LOD :distance="30" name="low">
+      <Sphere name="sphere" :args="[1, 4]" :position="[-1, 0, 0]">
+        <TresMeshNormalMaterial wireframe />
+      </Sphere>
+      <TresMesh name="box" :position="[1, 0, 0]">
+        <TresBoxGeometry :args="[1, 1, 1]" />
+        <TresMeshBasicMaterial wireframe :color="0xFF0000" />
+      </TresMesh>
+    </LOD>
+  </TresCanvas>
+</template>

playground/vue/src/router/routes/misc.ts

@@ -29,4 +29,9 @@ export const miscRoutes = [
     name: 'GLTFExporter',
     component: () => import('../../pages/misc/GLTFExporterDemo.vue'),
   },
+  {
+    path: '/misc/LOD',
+    name: 'LOD',
+    component: () => import('../../pages/misc/LODDemo.vue'),
+  },
 ]