Examples: add webgpu_animation_retargeting (#1248)

* Update SkeletonUtils

* Update three.js

* Add examples

* Update patch and delete examples

* Format

examples-testing/changes.patch

@@ -13142,6 +13142,59 @@ index d0255e43..c924d666 100644
 
  init();
 
+diff --git a/examples-testing/examples/webgpu_animation_retargeting.ts b/examples-testing/examples/webgpu_animation_retargeting.ts
+index 1d9c5eab..5c4fc4c5 100644
+--- a/examples-testing/examples/webgpu_animation_retargeting.ts
++++ b/examples-testing/examples/webgpu_animation_retargeting.ts
+@@ -1,20 +1,20 @@
+-import * as THREE from 'three';
++import * as THREE from 'three/webgpu';
+ import { color, viewportUV, reflector } from 'three/tsl';
+
+ import Stats from 'three/addons/libs/stats.module.js';
+
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
++import { GLTFLoader, GLTF } from 'three/addons/loaders/GLTFLoader.js';
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+ import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
+
+ const [sourceModel, targetModel] = await Promise.all([
+-    new Promise((resolve, reject) => {
++    new Promise<GLTF>((resolve, reject) => {
+         new GLTFLoader().load('./models/gltf/Michelle.glb', resolve, undefined, reject);
+     }),
+
+-    new Promise((resolve, reject) => {
++    new Promise<GLTF>((resolve, reject) => {
+         new GLTFLoader().load('./models/gltf/Soldier.glb', resolve, undefined, reject);
+     }),
+ ]);
+@@ -94,7 +94,13 @@ gui.add(helpers, 'visible').name('helpers');
+
+ //
+
+-function getSource(sourceModel) {
++interface Source {
++    clip: THREE.AnimationClip;
++    skeleton: THREE.Skeleton;
++    mixer: THREE.AnimationMixer;
++}
++
++function getSource(sourceModel: GLTF) {
+     const clip = sourceModel.animations[0];
+
+     const helper = new THREE.SkeletonHelper(sourceModel.scene);
+@@ -108,7 +114,7 @@ function getSource(sourceModel) {
+     return { clip, skeleton, mixer };
+ }
+
+-function retargetModel(sourceModel, targetModel) {
++function retargetModel(sourceModel: Source, targetModel: GLTF) {
+     const targetSkin = targetModel.scene.children[0].children[0];
+
+     const targetSkelHelper = new THREE.SkeletonHelper(targetModel.scene);
 diff --git a/examples-testing/examples/webgpu_backdrop_area.ts b/examples-testing/examples/webgpu_backdrop_area.ts
 index 97c224ce..579cb796 100644
 --- a/examples-testing/examples/webgpu_backdrop_area.ts

types/three/examples/jsm/utils/SkeletonUtils.d.ts

@@ -1,12 +1,29 @@
 import { AnimationClip, Object3D, Skeleton } from "three";
 
-export function clone(source: Object3D): Object3D;
+export interface RetargetOptions {
+    preserveBoneMatrix?: boolean | undefined;
+    preserveBonePositions?: boolean | undefined;
+    preserveHipPosition?: boolean | undefined;
+    useTargetMatrix?: boolean | undefined;
+    hip?: string | undefined;
+    scale?: number | undefined;
+    names?: { [boneName: string]: string } | undefined;
+}
 
-export function retarget(target: Object3D | Skeleton, source: Object3D | Skeleton, options: {}): void;
+declare function retarget(target: Object3D | Skeleton, source: Object3D | Skeleton, options: {}): void;
 
-export function retargetClip(
+export interface RetargetClipOptions extends RetargetOptions {
+    useFirstFramePosition?: boolean | undefined;
+    fps?: number | undefined;
+}
+
+declare function retargetClip(
     target: Skeleton | Object3D,
     source: Skeleton | Object3D,
     clip: AnimationClip,
     options: {},
 ): AnimationClip;
+
+declare function clone(source: Object3D): Object3D;
+
+export { clone, retarget, retargetClip };