feat(Line2): allow points to be added/removed

docs/.vitepress/config.ts

@@ -75,16 +75,16 @@ 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: '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 +97,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 +120,7 @@ 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: 'MeshDiscardMaterial', link: '/guide/materials/mesh-discard-material' },
         ],
       },
       {
@@ -159,9 +160,9 @@ export default defineConfig({
           { 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' },
         ],
       },
       {

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/component-list/components.ts

@@ -17,13 +17,13 @@ export default [
       },
       { text: 'Sampler', link: '/guide/abstractions/sampler' },
       { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
-      /*       { text: 'Mask', link: '/guide/abstractions/mask' },
+      { text: 'Mask', link: '/guide/abstractions/mask' },
       { text: 'CubeCamera', link: '/guide/abstractions/cube-camera' },
       { text: 'GradientTexture', link: '/guide/abstractions/gradient-texture' },
       { 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' },
     ],
   },
   {
@@ -39,6 +39,7 @@ export default [
       { 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' },
     ],
   },
   {
@@ -66,10 +67,10 @@ export default [
         text: 'HolographicMaterial',
         link: '/guide/materials/holographic-material',
       },
-      /* {
+      {
         text: 'MeshDiscardMaterial',
         link: '/guide/materials/mesh-discard-material',
-      }, */
+      },
     ],
   },
   {
@@ -109,9 +110,9 @@ export default [
       { text: 'Sparkles', link: '/guide/staging/sparkles' },
       { text: 'Ocean', link: '/guide/staging/ocean' },
       { text: 'Fit', link: '/guide/staging/fit' },
-      /* { 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' },
     ],
   },
   {

docs/guide/controls/helper.md

@@ -0,0 +1,18 @@
+# Helper
+
+`<Helper />` handles instantiation, updates, and removal/disposal of THREE Helpers.
+
+<DocsDemo>
+  <HelperDemo />
+</DocsDemo>
+
+## Usage
+
+<<< @/.vitepress/theme/components/HelperDemo.vue
+
+## Props
+
+| Prop                | Description                                                                                   | Default     |
+| :------------------ | :-------------------------------------------------------------------------------------------- | ----------- |
+| **type**         | Helper constructor - required |       |
+| **args**         | Helper constructor args | `[]` |

playground/vue/src/pages/controls/HelperDemo.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { BoxHelper, DirectionalLightHelper } from 'three'
+import { VertexNormalsHelper } from 'three-stdlib'
+import { Helper, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+
+const hasHelpers = ref(true)
+const click = () => {
+  hasHelpers.value = !hasHelpers.value
+}
+
+const px = shallowRef(0)
+const py = shallowRef(0)
+let elapsed = 0
+setInterval(() => {
+  elapsed += 1000 / 30
+  px.value = Math.cos(elapsed * 0.001) * 10
+  py.value = Math.sin(elapsed * 0.001) * 10
+}, 1000 / 30)
+</script>
+
+<template>
+  <TresCanvas @pointerdown="click">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+
+    <TresMesh :position="[px, 2, 0]">
+      <TresSphereGeometry />
+      <TresMeshBasicMaterial />
+      <Helper v-if="hasHelpers" :type="BoxHelper" :args="['royalblue']" />
+      <Helper v-if="hasHelpers" :type="VertexNormalsHelper" :args="[1, 0xFF0000]" />
+    </TresMesh>
+
+    <TresDirectionalLight :position="[0, py, 2]">
+      <Helper v-if="hasHelpers" :type="DirectionalLightHelper" />
+    </TresDirectionalLight>
+  </TresCanvas>
+</template>