feat(Lines): add docs, correct name

docs/.vitepress/config.ts

@@ -76,10 +76,12 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: 'Box', link: '/guide/shapes/box' },
+          { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
           { text: 'Circle', link: '/guide/shapes/circle' },
           { text: 'Cone', link: '/guide/shapes/cone' },
           { 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: 'Ring', link: '/guide/shapes/ring' },

docs/.vitepress/theme/components/CatmullRomCurve3Demo.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { CatmullRomCurve3, OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas v-bind="{clearColor:'#4f4f4f'}">
+    <CatmullRomCurve3
+      :points="[[-1.5,0,0],[-0.5,1,0],[0.5,0,0],[1.5,1,0]]"
+      :segments="40"
+      :line-width="10"
+      color="#fbb03b"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/Line2Demo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, Line2 } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas v-bind="{clearColor:'#4f4f4f'}">
+    <Line2
+      :points="[[-0.5, 0,0], [0.5, 0, 0] ,[0, 0.8660,0], [-0.5,0,0] ]"
+      :line-width="10"
+      color="#82dbc5"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>

docs/components.d.ts

@@ -3,12 +3,13 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export { }
+export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
     BackdropDemo: typeof import('./.vitepress/theme/components/BackdropDemo.vue')['default']
     CameraControlsDemo: typeof import('./.vitepress/theme/components/CameraControlsDemo.vue')['default']
+    CatmullRomCurve3Demo: typeof import('./.vitepress/theme/components/CatmullRomCurve3Demo.vue')['default']
     ContactShadowDemo: typeof import('./.vitepress/theme/components/ContactShadowDemo.vue')['default']
     DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
     FBXModelDemo: typeof import('./.vitepress/theme/components/FBXModelDemo.vue')['default']
@@ -19,6 +20,7 @@ declare module 'vue' {
     HtmlLaptopDemo: typeof import('./.vitepress/theme/components/HtmlLaptopDemo.vue')['default']
     HtmlOccludeDemo: typeof import('./.vitepress/theme/components/HtmlOccludeDemo.vue')['default']
     LeviosoDemo: typeof import('./.vitepress/theme/components/LeviosoDemo.vue')['default']
+    Line2Demo: typeof import('./.vitepress/theme/components/Line2Demo.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
     MapControlsDemo: typeof import('./.vitepress/theme/components/MapControlsDemo.vue')['default']
     MouseParallaxDemo: typeof import('./.vitepress/theme/components/MouseParallaxDemo.vue')['default']
@@ -30,6 +32,11 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollControlsDemo: typeof import('./.vitepress/theme/components/ScrollControlsDemo.vue')['default']
+    ScrollControlsHorizontalDemo: typeof import('./.vitepress/theme/components/ScrollControlsHorizontalDemo.vue')['default']
+    ScrollControlsPagesDemo: typeof import('./.vitepress/theme/components/ScrollControlsPagesDemo.vue')['default']
+    ScrollControlsProgressCameraDemo: typeof import('./.vitepress/theme/components/ScrollControlsProgressCameraDemo.vue')['default']
+    ScrollControlsProgressDemo: typeof import('./.vitepress/theme/components/ScrollControlsProgressDemo.vue')['default']
+    ScrollControlsSlotsDemo: typeof import('./.vitepress/theme/components/ScrollControlsSlotsDemo.vue')['default']
     SkyDemo: typeof import('./.vitepress/theme/components/SkyDemo.vue')['default']
     SmokeDemo: typeof import('./.vitepress/theme/components/SmokeDemo.vue')['default']
     StarsDemo: typeof import('./.vitepress/theme/components/StarsDemo.vue')['default']

docs/guide/shapes/catmullromcurve3.md

@@ -0,0 +1,44 @@
+# CatmullRomCurve3
+
+<DocsDemo>
+  <CatmullRomCurve3Demo />
+</DocsDemo>
+
+The `cientos` package provides a `<CatmullRomCurve3 />` component that allows you to make smooth(ish) 3D lines.
+
+`<CatmullRomCurve3 />` wraps [Three.js's `CatmullRomCurve3`](https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3) functionality, but applies it to Cientos' `<Line2 />` under the hood, meaning you can use [all the props from `<Line2 />`.](line2#props)
+
+
+## Usage
+
+```vue{3,8-13}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { CatmullRomCurve3, OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas v-bind="{clearColor:'#4f4f4f'}">
+    <CatmullRomCurve3
+      :points="[[-1.5,0,0],[-0.5,1,0],[0.5,0,0],[1.5,1,0]]"
+      :segments="40"
+      :line-width="10"
+      color="#fbb03b"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+`<CatmullRomCurve3 />` accepts [all of `<Line2 />`'s props and uses the same defaults](line2#props). In addition, it accepts the props below.
+
+| Prop         | Type      | Description                                                                   | Default        |
+| ------------ | --------- | ----------------------------------------------------------------------------- | -------------- |
+| segments     | `number`  | Number of points to insert between each pair of points in props.points        | 20             |
+| closed       | `boolean` | The curve will loop back onto itself when this is true.                       | false          |
+| curveType    | `'centripetal' \| 'chordal' \| 'catmullrom'` | Curve type                                 | 'centripetal'  |
+| tension      | `number`  | Catmullrom's tension, when curveType is 'catmullrom'                          | 0.5            |

docs/guide/shapes/line2.md

@@ -0,0 +1,56 @@
+# Line2
+
+<DocsDemo>
+  <Line2Demo />
+</DocsDemo>
+
+The `cientos` package provides a `<Line2 />` component that wraps [Three.js's `Line2`](https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js).
+
+## Usage
+
+```vue{3,8-12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Line2, OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas v-bind="{clearColor:'#888'}">
+    <Line2
+      :points="[[-0.5,0,0], [0.5,0,0] ,[0,0.8660,0], [-0.5,0,0]]"
+      :line-width="10"
+      color="#82dbc5"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop            | Type                     | Description                                                                | Default        |
+| --------------- | -------------------------|--------------------------------------------------------------------------- | -------------- |
+| points          | [See below](#points)     | Points representing the line                                               |                |
+| vertexColors    | `TresColor[]`            | Vertex colors, if using                                                    | null           |
+| color           | `TresColor`              | Color for the line – multiplies vertex colors                              | 'white'        |
+| lineWidth       | `number`                 | Width of the line – in world units with size attenuation, pixels otherwise | 1              |
+| worldUnits      | `boolean`                | Whether the line width is in world units or pixels                         | false          |
+| alphaToCoverage | `boolean`                | Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).                                                               | false          |
+| dashed          | `boolean`                | Whether the line is dashed                                                 | false          |
+| dashSize        | `number`                 | Dash size                                                                  | 1              |
+| gapSize         | `number`                 | Gap size in dashed line                                                    | 1              |
+| dashScale       | `number`                 | Scale of the dashes/gaps                                                   | 1              |
+| dashOffset      | `number`                 | Dash offset                                                                | 0              |
+
+### Points
+
+The points prop can be any of these types:
+
+| Type                         | Interpretation                                                                   |
+| ---------------------------- | -------------------------------------------------------------------------------- |
+| `Vector3[]`                  | Each Vector3 maps to a point's x, y, z.                                          |
+| <nobr>`[number, number, number][]`</nobr> | Each entry maps to [x, y, z].                                          |
+| `Vector2[]`                  | Each Vector2 maps to a point's x and y. z = 0.                                   |
+| `[number, number][]`         | Each entry maps to [x, y, 0].                                                    |
+| `number[]`                   | An array of [x, y, z, x, y, z, x ...] coordinates. Length should be a multiple of 3. Proper length is not checked. |

playground/src/pages/shapes/CatmullRomLineDemo.vue → playground/src/pages/shapes/CatmullRomCurve3Demo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { OrbitControls, CatmullRomLine } from '@tresjs/cientos'
+import { OrbitControls, CatmullRomCurve3 } from '@tresjs/cientos'
 
 const gl = {
   clearColor: '#888',
@@ -70,7 +70,7 @@ useRenderLoop().onLoop(({ elapsed }) => {
 
 <template>
   <TresCanvas v-bind="gl">
-    <CatmullRomLine
+    <CatmullRomCurve3
       :position="[0, 0, 0]"
       :points="points"
       :vertex-colors="colors"

playground/src/pages/shapes/Line2Demo.vue

@@ -69,16 +69,9 @@ useRenderLoop().onLoop(({ elapsed }) => {
 </script>
 
 <template>
-  <TresCanvas v-bind="gl">
+  <TresCanvas v-bind="{clearColor:'#888'}">
     <Line2
-      :position="[0, 0, 0]"
       :points="points"
-      :vertex-colors="colors"
-      :world-units="true"
-      :line-width="lineWidth"
-      :dashed="dashed"
-      :dash-scale="dashScaleRef"
-      :dash-offset="dashOffset"
     />
     <TresGridHelper />
     <OrbitControls />

playground/src/router/routes/shapes.ts

@@ -1,8 +1,8 @@
 export const shapesRoutes = [
   {
-    path: '/shapes/catmullromline',
-    name: 'CatmullRomLine',
-    component: () => import('../../pages/shapes/CatmullRomLineDemo.vue'),
+    path: '/shapes/catmullromcurve3',
+    name: 'CatmullRomCurve3',
+    component: () => import('../../pages/shapes/CatmullRomCurve3Demo.vue'),
   },
   {
     path: '/shapes/line2',

src/core/shapes/CatmullRomLine.vue → src/core/shapes/CatmullRomCurve3.vue

@@ -8,7 +8,7 @@ import Line2 from './Line2.vue'
 type CurveType = 'centripetal' | 'chordal' | 'catmullrom'
 type Points = Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>
 
-interface CatmullRomLineProps {
+interface CatmullRomCurve3Props {
   segments?: number
   closed?: boolean
   curveType?: CurveType
@@ -28,7 +28,7 @@ interface CatmullRomLineProps {
   worldUnits?: boolean
 }
 
-const props = withDefaults(defineProps<CatmullRomLineProps>(), {
+const props = withDefaults(defineProps<CatmullRomCurve3Props>(), {
   segments: 20,
   closed: false,
   curveType: 'centripetal',

src/core/shapes/Line2.vue

@@ -8,33 +8,33 @@ import { watch, onUnmounted, computed } from 'vue'
 import type { TresColor } from '@tresjs/core'
 import { normalizeColor, useTresContext } from '@tresjs/core'
 
-type Points = Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>
-type VertexColors = Array<TresColor | [number, number, number]>
+type Points = Vector3[] | Vector2[] | [number, number, number][] | [number, number][] | number[]
+type VertexColors = Array<TresColor>
 export interface LineProps {
   points: Points
   vertexColors?: VertexColors | null
   color?: TresColor
   lineWidth?: number
+  worldUnits?: boolean
   alphaToCoverage?: boolean
   dashed?: boolean
   dashSize?: number
+  gapSize?: number
   dashScale?: number
   dashOffset?: number
-  gapSize?: number
-  worldUnits?: boolean
 }
 
 const props = withDefaults(defineProps<LineProps>(), {
   vertexColors: null,
   color: 'white',
   lineWidth: 1,
-  alphaToCoverage: true,
+  worldUnits: false,
+  alphaToCoverage: false,
   dashed: false,
   dashSize: 1,
+  gapSize: 1,
   dashScale: 1,
   dashOffset: 0,
-  gapSize: 1,
-  worldUnits: false,
 })
 
 type PropsType = typeof props
@@ -74,16 +74,13 @@ function updateLineGeometry(geometry: LineGeometry, points: Points, vertexColors
     else if (p instanceof Vector2) {
       return [p.x, p.y, 0]
     }
-    else if (Array.isArray(p) && p.length === 3) {
-      return p
-    }
     else if (Array.isArray(p) && p.length === 2) {
       return [p[0], p[1], 0]
     }
     else {
-      return [p, 0, 0]
+      return p
     }
-  })
+  }).flat()
   geometry.setPositions(pValues.flat())
 
   const colors = getInterpolatedVertexColors(vertexColors, points.length).map(c => c.toArray()).flat()

src/core/shapes/index.ts

@@ -1,5 +1,5 @@
 import Box from './Box.vue'
-import CatmullRomLine from './CatmullRomLine.vue'
+import CatmullRomCurve3 from './CatmullRomCurve3.vue'
 import Circle from './Circle.vue'
 import Cone from './Cone.vue'
 import Dodecahedron from './Dodecahedron.vue'
@@ -16,7 +16,7 @@ import Tube from './Tube.vue'
 
 export {
   Box,
-  CatmullRomLine,
+  CatmullRomCurve3,
   Circle,
   Cone,
   Dodecahedron,