Bot releases are hidden (Show)
Published by grischaerbe over 2 years ago
<HTML>
component not working in productionPublished by grischaerbe over 2 years ago
<Float>
is another component ported from drei – Documentation
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.
Published by grischaerbe over 2 years ago
<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.Published by grischaerbe over 2 years ago
<GLTF>
should not bind a ThrelteGltf
Published by grischaerbe over 2 years ago
useGltfAnimations
also accepts a ThrelteGltf
.Published by grischaerbe over 2 years ago
<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" />
Published by grischaerbe over 2 years ago
v3.10.0
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!
Published by grischaerbe over 2 years ago
This is a rather big update with a lot of new features, especially the drawing of lines.
<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>
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.
Published by grischaerbe over 2 years ago
<OrbitControls>
events by @daevid66 in https://github.com/grischaerbe/threlte/pull/70
Published by grischaerbe over 2 years ago
useCursor
, see the documentation on details.use-gltf-animations
.Published by grischaerbe over 2 years ago
<GLTF>
components are now compatible with the component <Layers>
Published by grischaerbe over 2 years ago
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.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} />
Published by grischaerbe over 2 years ago
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.useParentSize
only updates the parentSize
if it has actually changed.Published by grischaerbe over 2 years ago
<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
.
Published by grischaerbe over 2 years ago
This is mainly a major documentation overhaul.
Published by grischaerbe over 2 years ago
<GLTF>
component now supports interaction:<GLTF
url="/models/helmet/DamagedHelmet.gltf"
interactive
on:click={() => {
console.log('User clicked!')
}}
/>
Published by grischaerbe over 2 years ago
<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>
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.
Published by grischaerbe over 2 years ago
load
and unload
Published by grischaerbe over 2 years ago
<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.Published by grischaerbe over 2 years ago