Plugins

import { injectPlugin } from '@threlte/core'

injectPlugin('plugin-name', ({ ref, props }) => {
  console.log(ref, props)
})

import { injectPlugin } from '@threlte/core'
import type { Object3D } from 'three'

const refIsObject3D = (ref: any): ref is Object3D => ref.isObject3D

injectPlugin('raycast-plugin', ({ ref, props }) => {
  if (!refIsObject3D(ref) || !props.raycast) return
})

import { injectPlugin } from '@threlte/core'
import { onMount } from 'svelte'

injectPlugin('plugin-name', () => {
  // Use lifecycle hooks as if it would run inside a <T> component.
  onMount(() => {
    console.log('onMount')
  })

  return {
    // This is called when the ref changes and on initialization.
    onRefChange(ref) {
      console.log(ref)

      // You can return a cleanup function that will be called when the ref
      // changes again or when the component is destroyed.
      return () => {
        console.log('cleanup')
      }
    },

    // This is called when the props change and on initialization. This includes
    // props like "args", "manual" and other base props of <T> but also
    // props that are not part of the base props.
    onPropsChange(props) {
      console.log(props)
    },

    // This is called when the props change that are not part of the <T>
    // components base props and on initialization.
    onRestPropsChange(restProps) {
      console.log(restProps)
    }
  }
})

import { injectPlugin } from '@threlte/core'

injectPlugin('ecs', () => {
  return {
    // without claiming the property "position", <T> would apply the
    // property to the object
    pluginProps: ['entity', 'health', 'velocity', 'position']
  }
})

import { injectPlugin } from '@threlte/core'

// this overrides the plugin with the name "plugin-name" for all child components.
injectPlugin('plugin-name', () => {})

import { createPlugin } from '@threlte/core'

export const layersPlugin = createPlugin('layers', () => {
  // ... Plugin Code
})

// somewhere else, e.g. in a component

import { injectPlugin } from '@threlte/core'
import { layersPlugin } from '$plugins'

injectPlugin(layersPlugin)

<script lang="ts">
  import { injectPlugin } from '@threlte/core'
  import type { BufferGeometry, Mesh } from 'three'
  import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh'

  const isBufferGeometry = (ref: any): ref is BufferGeometry => {
    return ref.isBufferGeometry
  }

  const isMesh = (ref: any): ref is Mesh => {
    return ref.isMesh
  }

  injectPlugin('bvh-raycast', () => {
    return {
      onRefChange(ref) {
        if (isBufferGeometry(ref)) {
          ;(ref as any).computeBoundsTree = computeBoundsTree
          ;(ref as any).disposeBoundsTree = disposeBoundsTree
          ;(ref as any).computeBoundsTree()
        }
        if (isMesh(ref)) {
          ;(ref as any).raycast = acceleratedRaycast
        }
        return () => {
          if (isBufferGeometry(ref)) {
            ;(ref as any).disposeBoundsTree()
          }
        }
      }
    }
  })
</script>

<slot />

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import BvhRaycast from './plugins/BvhRaycast.svelte'
  import Scene from './Scene.svelte'
</script>

<Canvas>
  <BvhRaycast>
    <Scene />
  </BvhRaycast>
</Canvas>

<script lang="ts">
  import { Object3D } from 'three'
  import { injectPlugin, useFrame } from '@threlte/core'

  const isObject3D = (obj: any): obj is Object3D => {
    return obj.isObject3D
  }

  const propKeysRequiringMatrixUpdate = [
    'position',
    'position.x',
    'position.y',
    'position.z',
    'rotation',
    'rotation.x',
    'rotation.y',
    'rotation.z',
    'rotation.order',
    'quaternion',
    'quaternion.x',
    'quaternion.y',
    'quaternion.z',
    'quaternion.w',
    'scale',
    'scale.x',
    'scale.y',
    'scale.z'
  ]

  const objectsToUpdate: Set<Object3D> = new Set()

  type MatrixPluginProps = {
    matrixAutoUpdate?: boolean
  }

  injectPlugin<MatrixPluginProps>('matrix-update', ({ ref, props }) => {
    if (!isObject3D(ref)) return
    if (props.matrixAutoUpdate) return
    ref.matrixAutoUpdate = false

    const checkForMatrixUpdate = (props: Record<string, any>) => {
      if (Object.keys(props).some((key) => propKeysRequiringMatrixUpdate.includes(key))) {
        objectsToUpdate.add(ref)
      }
    }
    checkForMatrixUpdate(props)

    return {
      pluginProps: ['matrixAutoUpdate'],
      onRestPropsChange(restProps) {
        checkForMatrixUpdate(restProps)
      }
    }
  })

  useFrame(
    ({ invalidate }) => {
      if (!objectsToUpdate.size) return
      objectsToUpdate.forEach((obj) => obj.updateMatrix())
      objectsToUpdate.clear()
      invalidate()
    },
    {
      order: -Infinity,
      invalidate: false
    }
  )
</script>

<slot />

<T.PerspectiveCamera
  matrixAutoUpdate
  makeDefault
>
  <OrbitControls />
</T.PerspectiveCamera>