@threlte/xr 1.0.0-next.12 → 1.0.0-next.13

package/dist/components/internal/ScenePortal.svelte

@@ -1,15 +1,18 @@
-<script lang="ts">import { T, useThrelte } from "@threlte/core";
-import { Object3D } from "three";
-const { scene } = useThrelte();
-const proxy = new Object3D();
-proxy.add = (child) => {
-  scene.add(child);
-  return child;
-};
-proxy.remove = (child) => {
-  scene.remove(child);
-  return child;
-};
+<script lang="ts">
+  import { T, useThrelte } from '@threlte/core'
+  import { Object3D } from 'three'
+
+  const { scene } = useThrelte()
+
+  const proxy = new Object3D()
+  proxy.add = (child) => {
+    scene.add(child)
+    return child
+  }
+  proxy.remove = (child) => {
+    scene.remove(child)
+    return child
+  }
 </script>
 
 <T

package/dist/components/internal/ScenePortal.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/internal/ShortRay.svelte

@@ -1,12 +1,22 @@
-<script lang="ts">import { T } from "@threlte/core";
-import { pointerState, teleportState, teleportIntersection } from "../../internal/stores";
-let { handedness, children } = $props();
-let hovering = $derived($teleportState[handedness].hovering);
-let intersection = $derived(teleportIntersection[handedness]);
-let visible = $derived(
-  $pointerState[handedness].enabled || hovering && $intersection === void 0
-);
-const vertexShader = `
+<script lang="ts">
+  import { T } from '@threlte/core'
+  import { pointerState, teleportState, teleportIntersection } from '../../internal/stores'
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    handedness: 'left' | 'right'
+    children?: Snippet
+  }
+
+  let { handedness, children }: Props = $props()
+
+  let hovering = $derived($teleportState[handedness].hovering)
+  let intersection = $derived(teleportIntersection[handedness])
+  let visible = $derived(
+    $pointerState[handedness].enabled || (hovering && $intersection === undefined)
+  )
+
+  const vertexShader = `
     uniform mat4 modelViewMatrix;
     uniform mat4 projectionMatrix;
     attribute vec2 uv;
@@ -15,13 +25,14 @@ const vertexShader = `
     void main() {
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }`;
-const fragmentShader = `
+    }`
+
+  const fragmentShader = `
     precision mediump float;
     varying vec2 vUv;
     void main() {
       gl_FragColor = vec4(1.0, 1.0, 1.0, pow(vUv.y - 1.0, 2.0));
-    }`;
+    }`
 </script>
 
 <T.Group {visible}>

package/dist/components/internal/ShortRay.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 declare const ShortRay: import("svelte").Component<{
-    handedness: 'left' | 'right';
-    children?: Snippet<[]> | undefined;
+    handedness: "left" | "right";
+    children?: Snippet;
 }, {}, "">;
 export default ShortRay;

package/dist/components/internal/TeleportCursor.svelte

@@ -1,41 +1,55 @@
-<script lang="ts">import { spring } from "svelte/motion";
-import { Group, Matrix3, Vector3 } from "three";
-import { T, useTask } from "@threlte/core";
-import { teleportIntersection } from "../../internal/stores";
-import Cursor from "./Cursor.svelte";
-let { handedness, children } = $props();
-const ref = new Group();
-const vec3 = new Vector3();
-const normalMatrix = new Matrix3();
-const worldNormal = new Vector3();
-let intersection = $derived(teleportIntersection[handedness]);
-const { start, stop } = useTask(
-  () => {
-    if (intersection.current === void 0)
-      return;
-    const { point, face, object } = intersection.current;
-    ref.position.lerp(point, 0.4);
-    if (face) {
-      normalMatrix.getNormalMatrix(object.matrixWorld);
-      worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize();
-      ref.lookAt(vec3.addVectors(point, worldNormal));
-    }
-  },
-  {
-    autoStart: false
-  }
-);
-const size = spring(0.1, { stiffness: 0.2 });
-$effect.pre(() => {
-  if ($intersection === void 0) {
-    size.set(0.1);
-    stop();
-  } else {
-    size.set(1);
-    ref.position.copy($intersection.point);
-    start();
+<script lang="ts">
+  import { spring } from 'svelte/motion'
+  import { Group, Matrix3, Vector3 } from 'three'
+  import { T, useTask } from '@threlte/core'
+  import { teleportIntersection } from '../../internal/stores'
+  import Cursor from './Cursor.svelte'
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    handedness: 'left' | 'right'
+    children?: Snippet
   }
-});
+
+  let { handedness, children }: Props = $props()
+
+  const ref = new Group()
+  const vec3 = new Vector3()
+  const normalMatrix = new Matrix3()
+  const worldNormal = new Vector3()
+
+  let intersection = $derived(teleportIntersection[handedness])
+
+  const { start, stop } = useTask(
+    () => {
+      if (intersection.current === undefined) return
+
+      const { point, face, object } = intersection.current
+      ref.position.lerp(point, 0.4)
+
+      if (face) {
+        normalMatrix.getNormalMatrix(object.matrixWorld)
+        worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
+        ref.lookAt(vec3.addVectors(point, worldNormal))
+      }
+    },
+    {
+      autoStart: false
+    }
+  )
+
+  const size = spring(0.1, { stiffness: 0.2 })
+
+  $effect.pre(() => {
+    if ($intersection === undefined) {
+      size.set(0.1)
+      stop()
+    } else {
+      size.set(1)
+      ref.position.copy($intersection.point)
+      start()
+    }
+  })
 </script>
 
 <T

package/dist/components/internal/TeleportCursor.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 declare const TeleportCursor: import("svelte").Component<{
-    handedness: 'left' | 'right';
-    children?: Snippet<[]> | undefined;
+    handedness: "left" | "right";
+    children?: Snippet;
 }, {}, "">;
 export default TeleportCursor;

package/dist/components/internal/TeleportRay.svelte

@@ -1,58 +1,81 @@
-<script lang="ts">import { Vector3, QuadraticBezierCurve3, Vector2 } from "three";
-import { Line2 } from "three/examples/jsm/lines/Line2.js";
-import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
-import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
-import { T, useTask } from "@threlte/core";
-import { teleportIntersection } from "../../internal/stores";
-let { handedness, targetRay, children } = $props();
-let lineGeometry = new LineGeometry();
-const rayStart = new Vector3();
-const rayMidpoint = new Vector3();
-const curve = new QuadraticBezierCurve3();
-const rayDivisions = 40;
-const positions = new Float32Array(rayDivisions * 3);
-const vec3 = new Vector3();
-const v2_1 = new Vector2();
-const v2_2 = new Vector2();
-let intersection = $derived(teleportIntersection[handedness]);
-const setCurvePoints = (alpha = 0.3) => {
-  if (intersection.current === void 0)
-    return;
-  const rayEnd = intersection.current.point;
-  targetRay.getWorldPosition(rayStart);
-  rayMidpoint.x = (rayStart.x + rayEnd.x) / 2;
-  rayMidpoint.y = (rayStart.y + rayEnd.y) / 2;
-  rayMidpoint.z = (rayStart.z + rayEnd.z) / 2;
-  const arc = Math.log1p(
-    v2_1.set(rayStart.x, rayStart.z).distanceTo(v2_2.set(rayEnd.x, rayEnd.z))
-  );
-  rayMidpoint.y += arc;
-  curve.v0.lerp(rayStart, alpha);
-  curve.v1.lerp(rayMidpoint, alpha);
-  curve.v2.lerp(rayEnd, alpha);
-  for (let i = 0, j = 0; i < rayDivisions; i += 1, j += 3) {
-    const t = i / rayDivisions;
-    curve.getPoint(t, vec3);
-    positions[j + 0] = vec3.x;
-    positions[j + 1] = vec3.y;
-    positions[j + 2] = vec3.z;
+<script lang="ts">
+  import { Vector3, QuadraticBezierCurve3, type XRTargetRaySpace, Vector2 } from 'three'
+  import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+  import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+  import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+  import { T, useTask } from '@threlte/core'
+  import { teleportIntersection } from '../../internal/stores'
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    handedness: 'left' | 'right'
+    targetRay: XRTargetRaySpace
+    children?: Snippet
   }
-  lineGeometry.setPositions(positions);
-};
-const { start, stop } = useTask(
-  () => {
-    setCurvePoints();
-  },
-  { autoStart: false }
-);
-$effect.pre(() => {
-  if ($intersection === void 0) {
-    stop();
-  } else {
-    setCurvePoints(1);
-    start();
+
+  let { handedness, targetRay, children }: Props = $props()
+
+  let lineGeometry = new LineGeometry()
+
+  const rayStart = new Vector3()
+  const rayMidpoint = new Vector3()
+  const curve = new QuadraticBezierCurve3()
+  const rayDivisions = 40
+  const positions = new Float32Array(rayDivisions * 3)
+  const vec3 = new Vector3()
+
+  const v2_1 = new Vector2()
+  const v2_2 = new Vector2()
+
+  let intersection = $derived(teleportIntersection[handedness])
+
+  const setCurvePoints = (alpha = 0.3) => {
+    if (intersection.current === undefined) return
+
+    const rayEnd = intersection.current.point
+    targetRay.getWorldPosition(rayStart)
+
+    rayMidpoint.x = (rayStart.x + rayEnd.x) / 2
+    rayMidpoint.y = (rayStart.y + rayEnd.y) / 2
+    rayMidpoint.z = (rayStart.z + rayEnd.z) / 2
+
+    const arc = Math.log1p(
+      v2_1.set(rayStart.x, rayStart.z).distanceTo(v2_2.set(rayEnd.x, rayEnd.z))
+    )
+
+    // Create an arc
+    rayMidpoint.y += arc
+
+    curve.v0.lerp(rayStart, alpha)
+    curve.v1.lerp(rayMidpoint, alpha)
+    curve.v2.lerp(rayEnd, alpha)
+
+    for (let i = 0, j = 0; i < rayDivisions; i += 1, j += 3) {
+      const t = i / rayDivisions
+      curve.getPoint(t, vec3)
+      positions[j + 0] = vec3.x
+      positions[j + 1] = vec3.y
+      positions[j + 2] = vec3.z
+    }
+
+    lineGeometry.setPositions(positions)
   }
-});
+
+  const { start, stop } = useTask(
+    () => {
+      setCurvePoints()
+    },
+    { autoStart: false }
+  )
+
+  $effect.pre(() => {
+    if ($intersection === undefined) {
+      stop()
+    } else {
+      setCurvePoints(1)
+      start()
+    }
+  })
 </script>
 
 {#if children}

package/dist/components/internal/TeleportRay.svelte.d.ts

@@ -1,8 +1,8 @@
 import { type XRTargetRaySpace } from 'three';
 import type { Snippet } from 'svelte';
 declare const TeleportRay: import("svelte").Component<{
-    handedness: 'left' | 'right';
+    handedness: "left" | "right";
     targetRay: XRTargetRaySpace;
-    children?: Snippet<[]> | undefined;
+    children?: Snippet;
 }, {}, "">;
 export default TeleportRay;

package/dist/hooks/useController.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="webxr" />
 import { type CurrentWritable } from '@threlte/core';
 import type { XRController } from '../types';
 export declare const left: CurrentWritable<XRController | undefined>;

package/dist/hooks/useHand.d.ts

@@ -5,4 +5,4 @@ export declare const right: CurrentWritable<XRHand | undefined>;
 /**
  * Provides a reference to a current XRHand, filtered by handedness.
  */
-export declare const useHand: (handedness: 'left' | 'right') => CurrentWritable<undefined | XRHand>;
+export declare const useHand: (handedness: "left" | "right") => CurrentWritable<undefined | XRHand>;

package/dist/hooks/useHandJoint.d.ts

@@ -3,4 +3,4 @@ import type { HandJoints } from '../lib/handJoints';
 /**
  * Provides a reference to a requested hand joint, once available.
  */
-export declare const useHandJoint: (handedness: 'left' | 'right', joint: HandJoints) => import("@threlte/core").CurrentWritable<XRJointSpace | undefined>;
+export declare const useHandJoint: (handedness: "left" | "right", joint: HandJoints) => import("@threlte/core").CurrentWritable<XRJointSpace | undefined>;

package/dist/hooks/useHitTest.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="webxr" />
 import { Matrix4 } from 'three';
 export type HitTestCallback = (hitMatrix: Matrix4, hit: XRHitTestResult | undefined) => void;
 export type UseHitTestOptions = {

package/dist/hooks/useXR.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="webxr" />
 import type { CurrentWritable } from '@threlte/core';
 /**
  * Provides access to context related to `<XR />`.

package/dist/internal/stores.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="webxr" />
 import type { WebXRManager, Intersection } from 'three';
 import type { XRControllerEvents, XRHandEvents } from '../types';
 export declare const isPresenting: import("@threlte/core").CurrentWritable<boolean>;

package/dist/lib/getXRSessionOptions.d.ts

@@ -1,2 +1 @@
-/// <reference types="webxr" />
 export declare const getXRSessionOptions: (referenceSpaceType: XRReferenceSpaceType | undefined, sessionInit: XRSessionInit | undefined) => XRSessionInit | undefined;

package/dist/lib/getXRSupportState.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="webxr" />
 /**
  * Gets the support state of requested session mode.
  * @param mode Session mode: 'inline' | 'immersive-vr' | 'immersive-ar'
  * @returns The current support state
  */
-export declare const getXRSupportState: (mode: XRSessionMode) => Promise<'unsupported' | 'insecure' | 'blocked' | 'supported'>;
+export declare const getXRSupportState: (mode: XRSessionMode) => Promise<"unsupported" | "insecure" | "blocked" | "supported">;

package/dist/lib/toggleXRSession.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="webxr" />
 /**
  * Starts / ends an XR session.
  *
@@ -11,4 +10,4 @@ export declare const toggleXRSession: (sessionMode: XRSessionMode, sessionInit?:
     domOverlay?: {
         root: HTMLElement;
     } | undefined;
-}) | undefined, force?: 'enter' | 'exit') => Promise<XRSession | undefined>;
+}) | undefined, force?: "enter" | "exit") => Promise<XRSession | undefined>;

package/dist/plugins/pointerControls/context.d.ts

@@ -1,7 +1,7 @@
 import type { Object3D } from 'three';
 import type { ControlsContext, HandContext } from './types';
-export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
-export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;
+export declare const getHandContext: (hand: "left" | "right") => HandContext;
+export declare const setHandContext: (hand: "left" | "right", context: HandContext) => void;
 export declare const getControlsContext: () => ControlsContext;
 export declare const setControlsContext: (context: ControlsContext) => void;
 interface InternalContext {

package/dist/plugins/pointerControls/index.d.ts

@@ -21,7 +21,7 @@ export type PointerControlsOptions = {
      */
     fixedStep?: number;
 };
-export declare const pointerControls: (handedness: 'left' | 'right', options?: PointerControlsOptions) => {
+export declare const pointerControls: (handedness: "left" | "right", options?: PointerControlsOptions) => {
     enabled: import("@threlte/core").CurrentWritable<boolean>;
     hovered: Map<string, import("./types").IntersectionEvent>;
 };

package/dist/plugins/teleportControls/context.d.ts

@@ -21,7 +21,7 @@ export interface HandContext {
     active: CurrentWritable<boolean>;
     hovered: CurrentWritable<Intersection | undefined>;
 }
-export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
-export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;
+export declare const getHandContext: (hand: "left" | "right") => HandContext;
+export declare const setHandContext: (hand: "left" | "right", context: HandContext) => void;
 export declare const useTeleportControls: () => Context;
-export declare const createTeleportContext: (compute: TeleportControlsOptions['compute']) => Context;
+export declare const createTeleportContext: (compute: TeleportControlsOptions["compute"]) => Context;

package/dist/plugins/teleportControls/index.d.ts

@@ -12,7 +12,7 @@ export interface TeleportControlsOptions {
      */
     fixedStep?: number;
 }
-export declare const teleportControls: (handedness: 'left' | 'right', options?: TeleportControlsOptions) => {
+export declare const teleportControls: (handedness: "left" | "right", options?: TeleportControlsOptions) => {
     enabled: import("@threlte/core").CurrentWritable<boolean>;
     hovered: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
     active: import("@threlte/core").CurrentWritable<boolean>;

package/dist/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="webxr" />
 import type { Event, Group, XRTargetRaySpace, XRGripSpace, XRHandSpace } from 'three';
 import type { XRControllerModel } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
 import type { XRHandModel } from 'three/examples/jsm/webxr/XRHandModelFactory.js';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.0-next.12",
+  "version": "1.0.0-next.13",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.2.0",
-    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.7.7",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/three": "^0.169.0",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
@@ -17,14 +17,14 @@
     "eslint-plugin-svelte": "^2.36.0",
     "postcss": "^8.4.38",
     "publint": "^0.2.7",
-    "svelte": "^5.1.6",
+    "svelte": "^5.1.10",
     "svelte-check": "^3.6.9",
-    "three": "^0.169.0",
+    "three": "^0.170.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
     "vite": "^5.2.8",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.0.0-next.23"
+    "@threlte/core": "8.0.0-next.28"
   },
   "peerDependencies": {
     "svelte": ">=5",