Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/core
  2. Line2

@threlte/core

Line2

This module is deprecated. You can still use it but it will be removed in the future. Please consider using <T>/<Three> instead. Please read the update notice.

Draw Lines using THREE.Line2.

Import

Source

Github View Source Code

Package

NPM View Package

Example

<script>
  import { Line2 } from '@threlte/core'
  import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
</script>

<Line2
  points={[
    [0, 1, 0],
    [0, 2, 1],
    [-1, 1, 4]
  ]}
  material={new LineMaterial({
    worldUnits: true,
    lineWidth: 0.2
  })}
/>

Properties

// required
material: THREE.LineMaterial
points: (THREE.Vector3 | THREE.Vector3Tuple)[] = []

// optional
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | undefined = undefined
lookAt: LookAt | undefined = undefined
viewportAware: boolean = false
castShadow: boolean | undefined = undefined
receiveShadow: boolean | undefined = undefined
frustumCulled: boolean | undefined = undefined
renderOrder: number | undefined = undefined
visible: boolean | undefined = undefined
dispose: boolean | undefined = undefined
userData: Record<string, any> | undefined = undefined
interactive: boolean = false
ignorePointer: boolean = false

Bindings

inViewport: boolean
line2: THREE.Line2

Events

viewportenter: undefined
viewportleave: undefined
click: CustomEvent<ThreltePointerEvent>
contextmenu: CustomEvent<ThreltePointerEvent>
pointerup: CustomEvent<ThreltePointerEvent>
pointerdown: CustomEvent<ThreltePointerEvent>
pointerenter: CustomEvent<ThreltePointerEvent>
pointerleave: CustomEvent<ThreltePointerEvent>
pointermove: CustomEvent<ThreltePointerEvent>