feat(TextTroika): add component, demo, docs

docs/.vitepress/config.ts

@@ -65,6 +65,7 @@ export default defineConfig({
         text: 'Abstractions',
         items: [
           { text: 'Text3D', link: '/guide/abstractions/text-3d' },
+          { text: 'TextTroika', link: '/guide/abstractions/text-troika' },
           { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
           { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
           { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },
@@ -75,16 +76,17 @@ export default defineConfig({
           { text: 'useFBO', link: '/guide/abstractions/use-fbo' },
           { text: 'useSurfaceSampler', link: '/guide/abstractions/use-surface-sampler' },
           { text: 'Sampler', link: '/guide/abstractions/sampler' },
-          /* { text: 'Edges', link: '/guide/abstractions/edges' }, */
+          { text: 'Edges', link: '/guide/abstractions/edges' },
           { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
           { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
-          /*           { text: 'Mask', link: '/guide/abstractions/mask' },
+          { text: 'MarchingCubes', link: '/guide/abstractions/marching-cubes' },
+          { text: 'Mask', link: '/guide/abstractions/mask' },
           { text: 'CubeCamera', link: '/guide/abstractions/cube-camera' },
           { text: 'ScreenSizer', link: '/guide/abstractions/screen-sizer' },
           { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
           { text: 'Outline', link: '/guide/abstractions/outline' },
           { text: 'Image', link: '/guide/abstractions/image' },
-          { text: 'Billboard', link: '/guide/abstractions/billboard' }, */
+          { text: 'Billboard', link: '/guide/abstractions/billboard' },
         ],
       },
       {
@@ -97,6 +99,7 @@ export default defineConfig({
           { text: 'KeyboardControls', link: '/guide/controls/keyboard-controls' },
           { text: 'ScrollControls', link: '/guide/controls/scroll-controls' },
           { text: 'MapControls', link: '/guide/controls/map-controls' },
+          { text: 'Helper', link: '/guide/controls/helper' },
         ],
       },
       {
@@ -119,7 +122,8 @@ export default defineConfig({
           { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
           { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
           { text: 'MeshReflectionMaterial', link: '/guide/materials/mesh-reflection-material' },
-          /*           { text: 'MeshDiscardMaterial', link: '/guide/materials/mesh-discard-material' }, */
+          { text: 'PointMaterial', link: '/guide/materials/point-material' },
+          { text: 'MeshDiscardMaterial', link: '/guide/materials/mesh-discard-material' },
         ],
       },
       {
@@ -130,14 +134,17 @@ export default defineConfig({
           { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
           { text: 'Circle', link: '/guide/shapes/circle' },
           { text: 'Cone', link: '/guide/shapes/cone' },
+          { text: 'CubicBezierLine', link: '/guide/shapes/cubic-bezier-line' },
           { text: 'Cylinder', link: '/guide/shapes/cylinder' },
           { text: 'Dodecahedron', link: '/guide/shapes/dodecahedron' },
           { text: 'Icosahedron', link: '/guide/shapes/icosahedron' },
           { text: 'Line2', link: '/guide/shapes/line2' },
           { text: 'Octahedron', link: '/guide/shapes/octahedron' },
           { text: 'Plane', link: '/guide/shapes/plane' },
+          { text: 'QuadraticBezierLine', link: '/guide/shapes/quadratic-bezier-line' },
           { text: 'Ring', link: '/guide/shapes/ring' },
           { text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
+          { text: 'ScreenQuad', link: '/guide/shapes/screen-quad' },
           { text: 'Sphere', link: '/guide/shapes/sphere' },
           { text: 'Superformula', link: '/guide/shapes/superformula' },
           { text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
@@ -155,13 +162,19 @@ export default defineConfig({
           { text: 'Sky', link: '/guide/staging/sky' },
           { text: 'Stars', link: '/guide/staging/stars' },
           { text: 'Smoke', link: '/guide/staging/smoke' },
+          { text: 'AccumulativeShadows', link: '/guide/staging/accumulative-shadows' },
           { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
           { text: 'Precipitation', link: '/guide/staging/precipitation' },
           { text: 'Sparkles', link: '/guide/staging/sparkles' },
           { text: 'Ocean', link: '/guide/staging/ocean' },
-          /*           { text: 'Align', link: '/guide/staging/align' },
+          { text: 'Align', link: '/guide/staging/align' },
           { text: 'SoftShadows', link: '/guide/staging/soft-shadows' },
-          { text: 'Grid', link: '/guide/staging/grid' }, */
+          { text: 'Grid', link: '/guide/staging/grid' },
+          { text: 'CircleShadow', link: '/guide/staging/circle-shadow' },
+          { text: 'Bounds', link: '/guide/staging/bounds' },
+          { text: 'RandomizedLights', link: '/guide/staging/randomized-lights' },
+          { text: 'Bounds', link: '/guide/staging/bounds' },
+          { text: 'Stage', link: '/guide/staging/stage' },
         ],
       },
       {
@@ -173,6 +186,8 @@ 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: 'useIntersect', link: '/guide/misc/use-intersect' },
+          { text: 'LOD', link: '/guide/misc/lod' },
         ],
       },
     ],

docs/.vitepress/theme/components/AccumulativeShadowsDemo.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { AccumulativeShadows, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#fbb03b" :shadows="true">
+    <OrbitControls />
+    <TresMesh :position-y="0.3" :scale="0.4" :cast-shadow="true">
+      <TresTorusKnotGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <AccumulativeShadows
+      :blend="100"
+      color="#fbb03b"
+      once
+      :position-y="-0.4"
+    />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/BoundsDemo.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Bounds, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { Vector3 } from 'three'
+import { shallowRef } from 'vue'
+
+const { sin, cos, PI } = Math
+const positions = Array.from(
+  { length: 8 },
+  (_, i) => new Vector3(cos(i * PI / 4) * 4, sin(i * PI / 4) * 4, 0),
+)
+
+const b = shallowRef()
+</script>
+
+<template>
+  <TresCanvas clear-color="#4f4f4f">
+    <TresPerspectiveCamera :position="[0, 0, -15]" />
+    <OrbitControls make-default />
+    <Bounds ref="b" clip use-mounted :offset="0.75">
+      <TresMesh
+        v-for="p, i of positions"
+        :key="i"
+        :position="p"
+        @click="(e) => b.instance.lookAt(e.object)"
+      >
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </Bounds>
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/CircleShadowDemo.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { CircleShadow, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <TresGroup :position-y="-0.5">
+      <TresMesh :position-y="1">
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+      <CircleShadow :scale="1.5" />
+    </TresGroup>
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/CubicBezierLineDemo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { CubicBezierLine, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#4f4f4f">
+    <TresPerspectiveCamera :position="[0, 4, 0]" />
+    <CubicBezierLine
+      :start="[-1, 0, 0]"
+      :end="[1, 0, 0]"
+      :midA="[-1, 2, -2]"
+      :midB="[1, 2, 2]"
+      :line-width="10"
+      color="#82dbc5"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/HelperDemo.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { BoxHelper, PointLightHelper } from 'three'
+import { VertexNormalsHelper } from 'three-stdlib'
+import { Helper, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#222">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+
+    <TresPointLight :position="[5, 5, -5]">
+      <Helper :type="PointLightHelper" :args="[0.5]" />
+    </TresPointLight>
+
+    <TresGroup>
+      <Helper :type="BoxHelper" :args="['royalblue']" />
+
+      <TresMesh :position="[-2, 2, -1]">
+        <TresSphereGeometry />
+        <TresMeshBasicMaterial />
+        <Helper :type="BoxHelper" :args="['red']" />
+      </TresMesh>
+
+      <TresMesh :position="[2, -2, 1]">
+        <TresBoxGeometry />
+        <TresMeshBasicMaterial />
+        <Helper :type="VertexNormalsHelper" :args="[1, 'red']" />
+      </TresMesh>
+    </TresGroup>
+  </TresCanvas>
+</template>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { LOD } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BoxGeometry, IcosahedronGeometry, MeshBasicMaterial, Vector3 } from 'three'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const COUNT = 1000
+const positions = Array.from({ length: COUNT }).fill(0).map((_, i) => {
+  return new Vector3(
+    Math.cos(i) * 1000,
+    Math.sin(i) * 1000,
+    8000 * (2 * i / COUNT - 1),
+  )
+})
+
+const geometries = [
+  new IcosahedronGeometry(100, 4),
+  new IcosahedronGeometry(100, 0),
+  new BoxGeometry(100, 100, 100),
+]
+
+const materials = [
+  new MeshBasicMaterial({ color: '#fbb03b', wireframe: true }),
+  new MeshBasicMaterial({ color: '#82dbc5', wireframe: true }),
+  new MeshBasicMaterial({ color: '#4f4f4f', wireframe: true }),
+]
+
+const z = ref(0)
+let intervalId: ReturnType<typeof setInterval>
+let elapsed = 0
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    elapsed += 0.005
+    z.value = Math.cos(elapsed) * 5000
+  }, 1000 / 30)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="gray">
+    <TresPerspectiveCamera :near="1" :far="25000" :position="[0, 0, 0]" />
+    <TresGroup :position-z="z">
+      <LOD v-for="position, i of positions" :key="i" :levels="[1500, 3000, 4000]" :position="position">
+        <TresMesh :geometry="geometries[0]" :material="materials[0]" />
+        <TresMesh :geometry="geometries[1]" :material="materials[1]" />
+        <TresMesh :geometry="geometries[2]" :material="materials[2]" />
+      </LOD>
+    </TresGroup>
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/MarchingCubesDemo.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping, Vector3 } from 'three'
+
+const rand = () => (Math.random() - 0.5) * 1.25
+const positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))
+</script>
+
+<template>
+  <TresCanvas clear-color="#222" :tone-mapping="NoToneMapping">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <MarchingCubes :resolution="40" :max-poly-count="40000">
+      <MarchingPlane plane-type="y" />
+      <MarchingCube
+        v-for="position, i of positions"
+        :key="i"
+        :position="position"
+      />
+      <TresMeshPhongMaterial specular="#111111" :shininess="30" color="#049ef4" :reflectivity="1" />
+    </MarchingCubes>
+
+    <TresAxesHelper />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/PointMaterialDemo.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { MathUtils, NoToneMapping } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, PointMaterial } from '@tresjs/cientos'
+
+const positions = new Float32Array(Array.from({ length: 100 }, () => [
+  MathUtils.randFloatSpread(8),
+  MathUtils.randFloatSpread(8),
+  MathUtils.randFloatSpread(8),
+]).flat())
+</script>
+
+<template>
+  <TresCanvas :tone-mapping="NoToneMapping" clear-color="#4F4F4F" :raycaster="{ params: { Points: { threshold: 0.2 } } }">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+    <TresPoints :limit="positions.length">
+      <PointMaterial
+        color="#82dbc5"
+        :transparent="true"
+        :size="10"
+        :size-attenuation="false"
+        :depth-test="false"
+        :tone-mapped="false"
+      />
+      <TresBufferGeometry>
+        <TresBufferAttribute :args="[positions, 3]" attach="attributes-position" />
+      </TresBufferGeometry>
+    </TresPoints>
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/QuadraticBezierLineDemo.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OrbitControls, QuadraticBezierLine } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#4f4f4f">
+    <QuadraticBezierLine
+      :start="[-1, 0, 0]"
+      :end="[1, 2, 0]"
+      :line-width="10"
+      color="#fbb03b"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/ScreenQuadDemo.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { ScreenQuad } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresOrthographicCamera :args="[-1, 1, 1, -1, 0, 1000]" :position="[0, 0, 1]" :manual="true" />
+    <ScreenQuad>
+      <TresMeshBasicMaterial color="red" />
+    </ScreenQuad>
+  </TresCanvas>
+</template>