Bot releases are visible (Hide)
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Cleanup
Published by grischaerbe almost 3 years ago
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>
Published by grischaerbe almost 3 years ago
<canvas>
styles to the user.Published by grischaerbe almost 3 years ago
useTexture
Published by grischaerbe almost 3 years ago
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.
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
<Canvas>
. This is the current behaviour:<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.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<GLTF>
therefore has a new event: unload
which reflects
object
of <Object3DInstance>
and the property mesh
of <MeshInstance>
. objects and possibly parents are swapped reactively.{ z: 5 }
.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
}
WebGLRendererParameters
as the property rendererParameters
to the component <Canvas>
:<Canvas rendererParameters={{ antialias: false, premultipliedAlpha: false }}>
…
</Canvas
<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
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
I guess it's presentable not that everything is kind of working.
Expect things to break though.
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago
Published by grischaerbe almost 3 years ago