Features

• Component <GLTF> is now exposing more properties from gltf as bindings.

Fixes

• Interactivity bug where pointerleave and pointerenter events would trigger also if the pointer would not be over the canvas

Enhancements

• Performance improvements

Cleanup

Features

• The properties geometry and material on component <Mesh> are now reactive:

<script lang="ts">
  import { Color, MeshBasicMaterial, SphereBufferGeometry } from 'three'
  import { Mesh, Canvas } from 'threlte'

  let material = new MeshBasicMaterial({ color: 'black' })

  const onClick = () => {
    material.color = new Color('blue')
  }
</script>

<button on:click={onClick}> Change to blue </button>

<Canvas>
  <Mesh 
    geometry={new SphereBufferGeometry(1, 40, 40)}
    {material}
  />
</Canvas>

Fixes

• Part of the new resizing behaviour: leave <canvas> styles to the user.

Fixes

• color management of useTexture

This update introduces some breaking changes, so I bumped the major version. Note that threlte is still in development and you should expect breaking changes. I will however try to make them as clear as possible in the release notes.

Breaking changes

• Some context properties are now stores, readonly or writable. These are the new types:

type ThrelteContext = {
  size: Readable<Size>  // → reactively get
  pointer: Writable<Vector2>  // → reactively get
  pointerOverCanvas: Writable<boolean>  // → reactively get
  clock: Clock
  camera: Writable<Camera>  // → reactively get
  scene: Scene
  renderer?: WebGLRenderer
  composer?: EffectComposer
  invalidate: (reason?: string) => void
}

type ThrelteRootContext = {
  setCamera: (camera: Camera) => void
  linear: Writable<boolean>  // → reactively set/get, can also be set as a prop of <Canvas>
  flat: Writable<boolean>  // → reactively set/get, can also be set as a prop of <Canvas>
  dpr: Writable<number>  // → reactively set/get, can also be set as a prop of <Canvas>
  addPass: (pass: Pass) => void
  removePass: (pass: Pass) => void
  addRaycastableObject: (obj: Object3D) => void
  removeRaycastableObject: (obj: Object3D) => void
  addInteractiveObject: (obj: Object3D) => void
  removeInteractiveObject: (obj: Object3D) => void
  interactiveObjects: Set<Object3D>
  raycastableObjects: Set<Object3D>
  raycaster: Raycaster
  lastIntersection: Intersection<Object3D<Event>> | null
}

closes #1

• Resizing: In favour of more control over resizing the canvas, the resizeOptions have been removed from the properties of <Canvas>. This is the current behaviour:
  The Size of the <canvas> element is derived from the property size and the parent element of the <Canvas> component: If size is set, it's driving the <canvas> element size, if not, the size is determined by the parent element of the <Canvas> component.

Enhancements

• The property url of the component <GLTF> is now reactive. If a new url is provided, the contents will be swapped as soon as loading is finished. closes #4
• the component <GLTF> therefore has a new event: unload which reflects
  • old content has been unloaded and disposed and new content is loaded
  • old content has been unloaded and disposed and new content failed loading
• The reactivity model was updated, so that it can also handle changes to the property object of <Object3DInstance> and the property mesh of <MeshInstance>. objects and possibly parents are swapped reactively.
• A default camera was added. It's located at { z: 5 }.
• The events click, contextmenu, pointerup, pointerdown and pointermove now include the underlying DOM pointer events as well as the three.js intersection:

// this type is now exported
type ThreltePointerEvent = {
  distance: number
  distanceToRay?: number | undefined
  point: Vector3
  index?: number | undefined
  face?: Face | null | undefined
  faceIndex?: number | undefined
  object: Object3D<Event>
  uv?: Vector2 | undefined
  instanceId?: number | undefined
  event?: MouseEvent | PointerEvent
}

• You may pass additional WebGLRendererParameters as the property rendererParameters to the component <Canvas>:

<Canvas rendererParameters={{ antialias: false, premultipliedAlpha: false }}>
  …
</Canvas

• Use the new component <ContextBridge> to consume the contexts outside the <Canvas>component:

<script>
  import { Canvas, ContextBridge } from 'threlte'

  let ctx
  $: console.log(ctx)
</script>

<Canvas>
  <ContextBridge bind:ctx />
</Canvas>

closes #2

Fixes

• The order of the Frameloop Callbacks is now correct: low to high.

I guess it's presentable not that everything is kind of working.
Expect things to break though.