fix(three-mmd): fixed the use functions

examples/playground/src/pages/debug/ammo.tsx

@@ -42,10 +42,11 @@ const DebugAmmo = () => {
 
   // Helpers
   const ikHelper = useMemo(() => ikSolver.createHelper(), [ikSolver])
-  const physicsHelper = useMMDPhysics(mmd, MMDAmmoPhysics)
+  const physicsHelper = useMMDPhysics(mmd, MMDAmmoPhysics, editingScale)
 
   // Play the animation on mount
   useEffect(() => {
+    mmd.physics?.reset()
     actions.dance?.play()
 
     return () => {
@@ -82,7 +83,7 @@ const DebugAmmo = () => {
       />
       {showIK && <primitive object={ikHelper} />}
       {showSkeleton && <skeletonHelper args={[mmd.mesh]} />}
-      {showPhysics && (Boolean(physicsHelper)) && <primitive object={physicsHelper} />}
+      {showPhysics && physicsHelper && <primitive object={physicsHelper} />}
     </>
 
   )

examples/playground/src/pages/debug/refactor-test.tsx

@@ -52,7 +52,7 @@ const DebugRefactorTest = () => {
 
   // Helpers
   const ikHelper = useMemo(() => ikSolver.createHelper(), [ikSolver])
-  const { colliderHelpers, jointHelpers } = useMMDPhysics(mmd, MMDSpringBonePhysics)
+  const helpers = useMMDPhysics(mmd, MMDSpringBonePhysics)
 
   // Play the animation on mount
   useEffect(() => {
@@ -100,9 +100,9 @@ const DebugRefactorTest = () => {
       {showIK && <primitive object={ikHelper} />}
       {showSkeleton && <skeletonHelper args={[mmd.mesh]} />}
       {/* eslint-disable-next-line react/no-array-index-key */}
-      {showColliders && colliderHelpers.map((h, i) => <primitive key={i} object={h} />)}
+      {showColliders && helpers?.colliderHelpers.map((h, i) => <primitive key={i} object={h} />)}
       {/* eslint-disable-next-line react/no-array-index-key */}
-      {showJoints && jointHelpers.map((h, i) => <primitive key={i} object={h} />)}
+      {showJoints && helpers?.jointHelpers.map((h, i) => <primitive key={i} object={h} />)}
     </>
 
   )

packages/three-mmd-physics-ammo/src/index.ts

@@ -11,10 +11,11 @@ export const MMDAmmoPhysics: PhysicsFactory<MMDPhysicsHelper> = (mmd) => {
     mmd.pmx.joints,
   )
 
-  // physics.warmup(60)
+  physics.warmup(60)
 
   return {
     createHelper: () => physics.createHelper(),
+    reset: () => physics.reset(),
     update: (delta: number) => physics.update(delta),
   }
 }

packages/three-mmd-r3f/src/hooks/use-mmd-animation.ts

@@ -2,19 +2,23 @@ import type { Camera } from '@react-three/fiber'
 import type { AnimationClip, SkinnedMesh } from 'three'
 
 import { buildAnimation, buildCameraAnimation } from '@moeru/three-mmd'
+import { useMemo } from 'react'
 
 import { useVMD } from './use-vmd'
 
 const useMMDAnimation = (vmdPath: string, object: Camera | SkinnedMesh, name?: string): AnimationClip => {
   const vmd = useVMD(vmdPath)
-  const clip = ('isCamera' in object && object.isCamera)
-    ? buildCameraAnimation(vmd)
-    : buildAnimation(vmd, object as SkinnedMesh)
 
-  if (name != null)
-    clip.name = name
+  return useMemo(() => {
+    const c = ('isCamera' in object && object.isCamera)
+      ? buildCameraAnimation(vmd)
+      : buildAnimation(vmd, object as SkinnedMesh)
 
-  return clip
+    if (name != null)
+      c.name = name
+
+    return c
+  }, [vmd, object, name])
 }
 
 // eslint-disable-next-line @masknet/no-top-level

packages/three-mmd-r3f/src/hooks/use-mmd-animations.ts

@@ -27,7 +27,7 @@
 
   const mixer = useMemo(() => new AnimationMixer(root), [root])
 
   // TODO: remove fallback
   const ikSolver = useMemo(() => new CCDIKSolver(root, iks ?? (root.geometry.userData.MMD as { iks: IK[] }).iks), [root, iks])
   // const ikSolver = useMemo(() => new CCDIKSolver(root, iks), [root, iks])
   const grantSolver = useMemo(() => new GrantSolver(root, grants ?? (root.geometry.userData.MMD as { grants: Grant[] }).grants), [root, grants])
@@ -63,7 +63,7 @@
     ikSolver.update(delta)
 
     grantSolver.update()
-  })
+  }, -1)
 
   useEffect(() => {
     return () => {

packages/three-mmd-r3f/src/hooks/use-mmd-physics.ts

@@ -1,14 +1,27 @@
 import type { MMD, PhysicsFactory } from '@moeru/three-mmd'
 
 import { useFrame } from '@react-three/fiber'
-import { useEffect, useMemo } from 'react'
+import { useEffect, useState } from 'react'
 
-export const useMMDPhysics = <T>(mmd: MMD, createPhysics: PhysicsFactory<T>): T => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => mmd.setPhysics(createPhysics), [createPhysics])
+export const useMMDPhysics = <T>(mmd: MMD, createPhysics: PhysicsFactory<T>, paused = false): T | undefined => {
+  const [helper, setHelper] = useState<T>()
 
-  useFrame((_, delta) => mmd.update(delta))
+  useEffect(() => {
+    mmd.setPhysics(createPhysics)
+    const h = mmd.createHelper() as T
+    setHelper(h)
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => mmd.createHelper() as T, [createPhysics])
+    return () => {
+      mmd.physics?.dispose?.()
+    }
+  }, [createPhysics])
+
+  useFrame((_, delta) => {
+    if (paused)
+      return
+    // Only update physics calculation after the scale setting was done
+    mmd.update(delta)
+  })
+
+  return helper
 }

packages/three-mmd/src/physics/physics-service.ts

@@ -5,6 +5,7 @@ export type PhysicsFactory<T> = (mmd: MMD) => PhysicsService<T>
 export interface PhysicsService<T = unknown> {
   createHelper?: () => T
   dispose?: () => void
+  reset: () => void
   setScalar?: (scale: number) => void
   update: (delta: number) => void
 }