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

@threlte/core

LineInstance

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.

This component lets you use any manually instantiated object that extends THREE.Line in threlte.

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Example

<script lang="ts">
  import { LineInstance } from '@threlte/core'
  import { LineBasicMaterial, Line, Vector3, BufferGeometry } from 'three'

  const points: Vector3[] = [
    new Vector3(-10, 0, 0),
    new Vector3(0, 10, 0),
    new Vector3(10, 0, 0),
    new Vector3(0, 20, 0)
  ]

  const geometry = new BufferGeometry().setFromPoints(points)
  const material = new LineBasicMaterial()
  const line = new Line(geometry, material)
</script>

<LineInstance {line} />

Properties

// required
line: THREE.Line

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

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>