1. @threlte/core
  2. Line

@threlte/core

Line

Draw Lines using THREE.Line. Due to limitations of the OpenGL Core Profile with the THREE.WebGLRenderer on most platforms the line width will always be 1 regardless of the value lineWidth of the used Material.

Provide either points or a geometry to draw lines.

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Example

<script>
  import { Line } from '@threlte/core'
  import { LineBasicMaterial } from 'three'
</script>

<Line
  points={[
    [0, 1, 0],
    [0, 2, 1],
    [-1, 1, 4]
  ]}
  material={new LineBasicMaterial()}
/>

Properties

// required
material: THREE.Material | THREE.Material[]

// optional
geometry: THREE.BufferGeometry | undefined = undefined
points: (THREE.Vector3 | THREE.Vector3Tuple)[] = []

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
line: THREE.Line

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>