Sometimes you want to attach stuff to the head: An <Audio

I'm currently brute-forcing it like this: <div class="highlight highlight-source-s

Completed with <a class="issue-link js-issue-link" data-error-text="Failed to load tit

[xr] Provide `<Head>` component,about threlte/threlte

Comments (4)

michealparks commented on May 27, 2024

Yes!

Any thoughts about calling it <Headset>? I'm brainwashed by the DOM to think this as the native <head> tag

I had originally considered adding a hook, useHeadset(), because I was thinking about triggering events when users look in a particular direction. Do you think both the hook and the component should be added?

from threlte.

michealparks commented on May 27, 2024

I'm also not sure - and need to read deeper into - if it's better / worse / equivalent to return the viewer pose or to use the method described here

from threlte.

grischaerbe commented on May 27, 2024

I'm currently brute-forcing it like this:

<script lang="ts">
	import { T, useFrame, useThrelte } from '@threlte/core'
	import { Portal } from '@threlte/extras'
	import { Group, Quaternion, Vector3 } from 'three'

	const { renderer, scene } = useThrelte()
	const camera = renderer.xr.getCamera()

	const group = new Group()

	const worldPosition = new Vector3()
	const worldQuaternion = new Quaternion()
	const worldScale = new Vector3()

	useFrame(() => {
		camera.getWorldPosition(worldPosition)
		camera.getWorldQuaternion(worldQuaternion)
		camera.getWorldScale(worldScale)

		group.position.copy(worldPosition)
		group.quaternion.copy(worldQuaternion)
		group.scale.copy(worldScale)
	})
</script>

<Portal object={scene}>
	<T is={group}>
		<slot />
	</T>
</Portal>