• Moved troika-three-text from dev to regular dependencies

Minor Breaking Change

• This release includes a minor breaking change: the exported function play of the audio components now returns a Promise. This is so the AudioContext can be resumed automatically.

Features

Audio support finally landed 🎉

• <AudioListener>, <Audio> and <PositionalAudio> components make it easy to enhance a scene with audio.
• The <PositionalAudioHelper> helps in visualising the audio cone from a THREE.PositionalAudio entity.
• The new hook useThrelteAudio lets you consume the audio context.
• The new hook useAudioListener provides not only the AudioContext and THREE.AudioListener but also lets you construct e.g. filters that rely on the AudioContext.

Check out the example scene: https://threlte.xyz/docs/components/audio

Dependency Updates

• bumped packages three, @types/three & troika-three-text.

• Three.JS version bump to r140

Features

• Adding the flag interactive to indicate event handling on <Mesh> components no longer rerenders the scene by default on every frame. This means that your app can make use of an efficient unified render loop even if interactivity is used. #55 (@daevid66)
  (⚠️ This introduces a soft breaking change as you might have relied on the continuously rendering of your scene when using an interactive <Mesh> component.)

Breaking changes

• <Instance> components no longer need to be wrapped in <svelte:fragment> components and go into the default (unnamed) slot.

Features

• <Instance> components no longer need to be wrapped in <svelte:fragment> components and go into the default (unnamed) slot.
• <Instance> components can be nested in other objects and all parent transformations apply as usual:

<InstancedMesh interactive {geometry} {material}>
  <Group rotation={{ z: DEG2RAD * 180 }}>
    <Instance />

    <Group position={{ y: 2 }}>
      <Instance />
    </Group>
  </Group>
</InstancedMesh>

• <Instance> Peformance improvements
• internal component <TransformableObject> now emits event transform when a transform has been applied

Bugfixes

• <Instance> component lookAt bugfix

Website Open Graph things

Bugfix

• GitHub Actions bugfix

Features

• New <InstancedMesh> and <Instance> components to make use of THREE.InstancedMesh to render beautiful visualizations and other scenes with objects that share the geometry and material. Includes support for events, automatic instance scaling and <Instance> component that just works – no more instancedMesh.setMatrixAt 🎉
• New documentation website: threlte.xyz 🎉
• Minor optimizations

Fixes

• Type-only imports

Fixes

• pointerleave was depending on the "last" intersection. As this intersection can contain an object that is not setup for interactivity anymore, it's possible that userData.eventDispatcher is not present on the object.
• Contains some other optimizations

Features

• Added a property visible to all components inheriting from <Object3DInstance> (i.e. most of them) which is three.js' property visible.

Other Changes

• The component types now use a slightly different notation when it comes to optional properties. This should not break anything but make it easier to create objects to use as spread props on components with only a subset of the respective component properties.
• Basic type testing for component properties.

Changes

• As <SpotLight> and <DirectionalLight> share a lot of inner workings, the target mechanic of <SpotLight> has been adapted to that of <DirectionalLight>.
• A rather big change internally, for users of the library probably not that much: There are now default values on "instance components" such as <Object3DInstance>. This means that not all properties must be provided to make the IDE happy.

So this:

<Object3DInstance
  {object}
  {position}
  scale={undefined}
  rotation={undefined}
  lookAt={undefined}
  castShadow={undefined}
  receiveShadow={undefined}
  frustumCulled={undefined}
  renderOrder={undefined}
  viewportAware={false}
  inViewport={false}
/>

becomes this:

<Object3DInstance {object} {position} />

which makes things easier and less verbose.

• Also some minor cleanup

Breaking Changes

• <DirectionalLight> now accepts a property target which acts like the property lookAt: Provide either a Position ({ x: 5, z: 3 }) or another Object3D instance. In the latter case the DirectionalLight will track the provided object. This is especially useful if you want to move the area that the shadow is applied to. The property lookAt is removed, change your application accordingly.

Fixes

• Internal usages of useFrame now provide debug messages to use together with the property debugFrameloop on the <Canvas>component.
• The property shadow on the components <PointLight> and <SpotLight> would not deactivate the casting of shadows when going from true to false.
• Some cleanup

Features

• Optionally provide a debugFrameloopMessage to useFrame (to be used together with debugFrameloop on the <Canvas> component)
• <Pass> automatically invalidates the current frame

Fixes

• A default RenderPass is added to the EffectComposer, closes #9 (thanks @connercsbn)

Docs

• Added comment about SvelteKit + vite, closes #8

Dependencies

• bumped three (0.137.0) + types

Features

• useTexture now exposes the native THREE.TextureLoader events onLoad, onProgress and onError as properties of an option parameter.