Bot releases are hidden (Show)

threlte - v3.13.1

Published by grischaerbe over 2 years ago

Bugfixes

(hopefully) fixed <HTML> component not working in production

threlte - v3.13.0

Published by grischaerbe over 2 years ago

Features

<Float> is another component ported from drei – Documentation
It is now easier to use the hook useGltf together with the hook useGltfAnimations. Previously, you had to resolve a naming conflict and reassign to the THREE.GLTF store, that the hook useGltfAnimations provides. Now you can pass the store that useGltf provides as the first argument to useGltfAnimations:

const { gltf } = useGltf('/path/to/model.glb')

useGltfAnimations<'All Animations'>(gltf, ({ actions }) => {
  actions['All Animations']?.play()
})

As this is a function overload, the previous way of setting the value of the store that is being returned by the hook useGltfAnimations is still valid and not a breaking change.

threlte - v3.12.0

Published by grischaerbe over 2 years ago

Features

Added a port of pmndrs/drei's <Html> component. It's called <HTML> and allows you to tie HTML content to any object of your scene. It will be projected to the objects whereabouts automatically. Check out the documentation.

threlte - v3.11.2

Published by grischaerbe over 2 years ago

Bugfixes

<GLTF> should not bind a ThrelteGltf

threlte - v3.11.1

Published by grischaerbe over 2 years ago

Bugfixes

useGltfAnimations also accepts a ThrelteGltf.

threlte - v3.11.0

Published by grischaerbe over 2 years ago

Features

The component <GLTF> now binds materials and nodes just like its useGltf counterpart 🎉

<script>
  import { GLTF } from 'threlte'

  let materials
  $: if (materials) console.log(materials)

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

<GLTF bind:materials bind:nodes url="/model.glb" />

threlte - v3.10.0

Published by grischaerbe over 2 years ago

v3.10.0

Discord

There's finally a Discord community for threlte 🎉 https://discord.gg/EqUBCfCaGm
Feel free to get help, find a start to contribute or chat about all things threlte!

threlte - v3.9.0

Published by grischaerbe over 2 years ago

v3.9.0

This is a rather big update with a lot of new features, especially the drawing of lines.

Features

<Line>: Draw lines using THREE.Line. These lines usually can't be changed in width but are pretty cheap to draw:

<!-- provide an array of points (Vector3 or Vector3Tuple) or a geometry -->
<Line
  points={[
    [0, 1, 0],
    [0, 2, 1],
    [-1, 1, 4]
  ]}
  material={new LineBasicMaterial()}
/>

<LineSegments>: Draw lines using THREE.LineSegments. Very similar to THREE.Line but works a bit differently in terms of drawn geometry.
<Line2>: Draw lines using THREE.Line2: These lines can be configured to use a lineWidth, either in world units or in screen units.
<LineInstance>: Just as the other instance objects it takes a THREE.Line object and lets it interact with the rest of the scene.
useGltf: A hook that makes loading and reusing glTF files a breeze. The hook provides a map of all objects and materials in the loaded glTF:

<script lang="ts">
  import { Object3DInstance, Mesh } from 'threlte'
  import { useGltf } from 'threlte/extras'
  import { MeshBasicMaterial } from 'three'

  const { gltf } = useGltf('/path/to/model.glb')
</script>

{#if $gltf}
  <Object3DInstance object={$gltf.nodes['node-name']} />
{/if}

<Edges> is an abstraction of THREE.EdgeGeometry and displayes edges of the parent mesh that exceed a defined angle.

<Mesh geometry={new BoxBufferGeometry(1, 1, 1)} material={new MeshBasicMaterial()}>
  <Edges color="black" />
</Mesh>

The docs and some examples received some love.

Bugfixes

The raycaster used for all interactions and which is available with const { raycaster } = useThrelteRoot() did not exclude child objects from raycasting. Considering this hierarchy

<Mesh … interactive >
  <Mesh … ignorePointer /> 
</Mesh>

the nested child mesh would still interfere with the raycaster as it was taking children into account. This now changed, so that every object can be explicitly excluded and included in raycasting.
As this was the intended behaviour, this is considered a bugfix and not a breaking change.

threlte - v3.8.1

Published by grischaerbe over 2 years ago

Bugfixes

Fixed wrong event type bug in <OrbitControls> events by @daevid66 in https://github.com/grischaerbe/threlte/pull/70

threlte - v3.8.0

Published by grischaerbe over 2 years ago

Features

Added the extra hook useCursor, see the documentation on details.

Docs

import error on use-gltf-animations.

threlte - v3.7.1

Published by grischaerbe over 2 years ago

Bugfixes

<GLTF> components are now compatible with the component <Layers>
Minor optimizations

threlte - v3.7.0

Published by grischaerbe over 2 years ago

Features

New export: threlte/extras will contain extra hooks and components that don't need to follow three.js as much as the core components do and extend functionality beyond svelte abstractions over three.js classes.
The first contender is the hook useGltfAnimations which makes using animations from a glTF model very convenient and straight forward:

<script lang="ts">
  import { GLTF } from 'threlte'
  import { useGltfAnimations } from 'threlte/extras'

  // "useGltfAnimations" returns stores that populate
  // when the "<GLTF>" component finished loading
  const { gltf, actions, mixer } = useGltfAnimations<'All Animations'>(({ actions, mixer }) => {
    // Either play your animations as soon as they are loaded
    mixer.timeScale = 0.5
    actions['All Animations']?.play()
  })

  // Or play them whenever you need
  export const triggerAnimation = () => {
    if ($mixer) $mixer.timeScale = 0.5
    $actions['All Animations']?.play()
  }
</script>

<!-- Bind the store "gltf" -->
<GLTF url={'/Bengal.glb'} bind:gltf={$gltf} />

threlte - v3.6.1

Published by grischaerbe over 2 years ago

Fixes

Implemented a new custom svelte store: createObjectStore which has a setter that only sets a new value if the property uuid of the object changes (i.e. if an actually new object is set). This is beneficial as some reactive statements (for example in <TransformableObject> are setting properties on the object and would rerun if an upstream assignment statement is called.
The hook useParentSize only updates the parentSize if it has actually changed.

threlte - v3.6.0

Published by grischaerbe over 2 years ago

Features

Added the component <TransformControls>:

This component can be used to transform objects in 3D space by adapting a similar interaction model of DCC tools like Blender. Unlike other controls, it is not intended to transform the scenes camera.

The component <TransformControls> needs to be a direct child of the component to be transformed.

To accommodate <OrbitControls> as well as a <TransformControls> component in the same scene, the <TransformControls> component is able automatically pause the currently active <OrbitControls> component when the user is interacting with the <TransformControls> component. You can opt out of this behaviour by setting the property autoPauseOrbitControls to false.

threlte - v3.5.0

Published by grischaerbe over 2 years ago

This is mainly a major documentation overhaul.

threlte - v3.4.0

Published by grischaerbe over 2 years ago

Features

The <GLTF> component now supports interaction:

<GLTF
  url="/models/helmet/DamagedHelmet.gltf"
  interactive
  on:click={() => {
    console.log('User clicked!')
  }}
/>

threlte - v3.3.0

Published by grischaerbe over 2 years ago

Features

<InstancedMesh> and <Instance> components now provide a property id to use multiple nested <InstancedMesh> components:

<InstancedMesh id="tree" geometry={treeGeometry} material={treeMaterial}>
  <InstancedMesh id="leaf" geometry={leafGeometry} material={leafMaterial}>
    <Group position={{ x: 1 }}>
      <Instance id="tree" /> // Instance of InstancedMesh with id="tree"
      <Instance id="leaf" /> // Instance of InstancedMesh with id="leaf"
    </Group>

    <Group position={{ x: -2 }}>
      <Instance id="tree" />
      <Instance id="leaf" />
    </Group>
  </InstancedMesh>
</InstancedMesh>

The property frameloop of the <Canvas> component can be set to never which means you must manually advance the frameloop:

import { useThrelte, Canvas } from 'threlte'

const { advance } = useThrelte()

// request a new frame
advance()

This is especially useful for debugging.

threlte - v3.2.5

Published by grischaerbe over 2 years ago

Bugfixes

component should invalidate the current frame on events load and unload

threlte - v3.2.4

Published by grischaerbe over 2 years ago

Bugfixes

As event listeners of parent component are only listening when the child component that is emitting an event has been mounted, events might go missing. That was the case for the <TransformableObject> component which would emit the event "transform" but the parent component would not listen yet. Now also the first transform event is being passed to the parent component.

threlte - v3.2.3

Published by grischaerbe over 2 years ago