feat(app): following player

kwaa · kwaa · commit 7b514fc960c1 · 2025-05-05T17:24:27.000+08:00
diff --git a/app/src/components/vrm/hikari-yuka.tsx b/app/src/components/vrm/hikari-yuka.tsx
@@ -2,7 +2,8 @@ import { useVRM } from '@n3p6/react-three-vrm'
 import { useEntityManager, useYuka } from '@n3p6/react-three-yuka'
 import { useFrame } from '@react-three/fiber'
 import { useEffect } from 'react'
-import { ArriveBehavior, GameEntity, Vehicle } from 'yuka'
+import { Vector3 } from 'three'
+import { ArriveBehavior, GameEntity, Vehicle, Vector3 as YukaVector3 } from 'yuka'
 
 const vrmUrl = import.meta.env.DEV
   ? '/models/Hikari_SummerDress.vrm'
@@ -15,8 +16,10 @@ export const HikariYuka = () => {
   const vrm = useVRM(vrmUrl)
   const entityManager = useEntityManager()
 
-  const [vehicleRef, vehicleEntity] = useYuka(Vehicle, { position: [0, 0, 0] })
-  const [playerRef, playerEntity] = useYuka(GameEntity, { position: [5, 0, 5] })
+  const [vehicleRef, vehicleEntity] = useYuka(Vehicle, {
+    position: [0, 0, 0],
+  })
+  const [playerRef, playerEntity] = useYuka(GameEntity)
 
   useEffect(() => {
     const arriveBehavior = new ArriveBehavior(playerEntity.position, 1.5, 0.1)
@@ -25,28 +28,28 @@ export const HikariYuka = () => {
     return () => {
       vehicleEntity.steering.remove(arriveBehavior)
     }
-  }, [playerEntity, vehicleEntity])
+  }, [vehicleEntity, playerEntity])
 
-  useFrame((_, delta) => {
+  useFrame((state, delta) => {
     // vehicle.update(delta)
     entityManager.update(delta)
     vrm.update(delta)
+
+    const position = state.camera.getWorldPosition(new Vector3())
+    playerEntity.position.copy(new YukaVector3(position.x, 0, position.z))
   })
 
   return (
     <>
-      <primitive
-        object={vrm.scene}
-        ref={vehicleRef}
-        // position={[0, 0, 0]}
-        rotation={[0, Math.PI, 0]}
-        scale={1.05}
-      />
-      <mesh ref={playerRef}>
-        <boxGeometry args={[1, 1, 1]} />
-        <meshPhysicalMaterial color="yellow" opacity={0.5} transparent />
-        <pointLight distance={4} intensity={2} position={[0, 0, 0]} />
-      </mesh>
+      <group ref={vehicleRef}>
+        <primitive
+          object={vrm.scene}
+          position={[0, 0, 0]}
+          rotation={[0, Math.PI, 0]}
+          scale={1.05}
+        />
+      </group>
+      <group ref={playerRef}></group>
     </>
   )
 }
diff --git a/app/src/components/xr/player.tsx b/app/src/components/xr/player.tsx
@@ -9,6 +9,6 @@ export const Player = () => {
   useXRControllerLocomotion(originRef)
 
   return (
-    <XROrigin position={[0, 0, 1]} ref={originRef} />
+    <XROrigin ref={originRef} />
   )
 }
diff --git a/packages/react-three-yuka/src/hooks/use-yuka.ts b/packages/react-three-yuka/src/hooks/use-yuka.ts
@@ -1,6 +1,5 @@
-import type { ThreeElement } from '@react-three/fiber'
-import type { Ref } from 'react'
-import type { Group, Quaternion, Vector3 } from 'three'
+import type { RefObject } from 'react'
+import type { Group, Object3DEventMap, Quaternion, Vector3 } from 'three'
 import type { GameEntity } from 'yuka'
 
 import { useEffect, useMemo, useRef } from 'react'
@@ -13,9 +12,9 @@ export interface UseYukaOptions {
 
 export const useYuka = <T extends typeof GameEntity>(Entity: T, options: UseYukaOptions = {
   position: [0, 0, 0],
-}): [Ref<ThreeElement<typeof Group>>, InstanceType<T>] => {
+}): [RefObject<Group<Object3DEventMap> | null>, InstanceType<T>] => {
   const entityManager = useEntityManager()
-  const ref = useRef<ThreeElement<typeof Group>>(null)
+  const ref = useRef<Group>(null)
   const entity = useMemo(() => new Entity() as InstanceType<T>, [Entity])
 
   useEffect(() => {

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,6 @@ export const Player = () => {`
`9`	`9`	`useXRControllerLocomotion(originRef)`
`10`	`10`
`11`	`11`	`return (`
`12`		`- <XROrigin position={[0, 0, 1]} ref={originRef} />`
	`12`	`+ <XROrigin ref={originRef} />`
`13`	`13`	`)`
`14`	`14`	`}`