Line2

The cientos package provides a <Line2 /> component for creating 3-D lines. It wraps Three.js's Line2.

Usage

<script setup lang="ts">
import { Line2, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</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>

Props

Prop	Type	Description	Default
points	See below	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 has the following type:

Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>

The passed array is converted to Array<number> – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:

Entry type	Interpretation
Vector3	Insert the vector's x, y, z into the result array
	Insert the array values into the result array
Vector2	Insert the vector's x, y, then 0 into the result array
[number, number]	Insert the array values, then 0 into the result array
number	Insert the number into the result array

WARNING

If you pass "bare" numbers in the points array, ensure that you pass "triplets" – groups of three numbers. Otherwise, you'll corrupt the coordinates that follow.

Wrong

//        ✅     ❌     ✅
:points="[[1,1], 2, 2, [3,3]]"
// result: (1,1,0) (2,2,3) (3,0,❌)

Right

//        ✅     ✅        ✅
:points="[[1,1], 2, 2, 0, [3,3]]"
// result: (1,1,0) (2,2,0) (3,3,0)

The component, like Three.js, will not keep you from shooting yourself in the foot.