Skip to content

Line2

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

Usage

vue
<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

PropTypeDescriptionDefault
pointsSee belowPoints representing the line
vertexColorsTresColor[]Vertex colors, if usingnull
colorTresColorColor for the line – multiplies vertex colors'white'
lineWidthnumberWidth of the line – in world units with size attenuation, pixels otherwise1
worldUnitsbooleanWhether the line width is in world units or pixelsfalse
alphaToCoveragebooleanEnables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).false
dashedbooleanWhether the line is dashedfalse
dashSizenumberDash size1
gapSizenumberGap size in dashed line1
dashScalenumberScale of the dashes/gaps1
dashOffsetnumberDash offset0

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 typeInterpretation
Vector3Insert the vector's x, y, z into the result array
Insert the array values into the result array
Vector2Insert the vector's x, y, then 0 into the result array
[number, number]Insert the array values, then 0 into the result array
numberInsert 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.

vue
//        ✅     ❌     ✅
:points="[[1,1], 2, 2, [3,3]]"
// result: (1,1,0) (2,2,3) (3,0,❌)
vue
//        ✅     ✅        ✅
: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.