Upload 5 files

libs/cannon/cannon-es-debugger.js

@@ -0,0 +1,300 @@
+import { Vec3, Quaternion, Shape } from 'cannon-es';
+import { MeshBasicMaterial, SphereGeometry, BoxGeometry, PlaneGeometry, Mesh, CylinderGeometry, BufferGeometry, Float32BufferAttribute } from 'three';
+
+function CannonDebugger(scene, world, _temp) {
+  let {
+    color = 0x00ff00,
+    scale = 1,
+    onInit,
+    onUpdate
+  } = _temp === void 0 ? {} : _temp;
+  const _meshes = [];
+
+  const _material = new MeshBasicMaterial({
+    color: color != null ? color : 0x00ff00,
+    wireframe: true
+  });
+
+  const _tempVec0 = new Vec3();
+
+  const _tempVec1 = new Vec3();
+
+  const _tempVec2 = new Vec3();
+
+  const _tempQuat0 = new Quaternion();
+
+  const _sphereGeometry = new SphereGeometry(1);
+
+  const _boxGeometry = new BoxGeometry(1, 1, 1);
+
+  const _planeGeometry = new PlaneGeometry(10, 10, 10, 10); // Move the planeGeometry forward a little bit to prevent z-fighting
+
+
+  _planeGeometry.translate(0, 0, 0.0001);
+
+  function createConvexPolyhedronGeometry(shape) {
+    const geometry = new BufferGeometry(); // Add vertices
+
+    const positions = [];
+
+    for (let i = 0; i < shape.vertices.length; i++) {
+      const vertex = shape.vertices[i];
+      positions.push(vertex.x, vertex.y, vertex.z);
+    }
+
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3)); // Add faces
+
+    const indices = [];
+
+    for (let i = 0; i < shape.faces.length; i++) {
+      const face = shape.faces[i];
+      const a = face[0];
+
+      for (let j = 1; j < face.length - 1; j++) {
+        const b = face[j];
+        const c = face[j + 1];
+        indices.push(a, b, c);
+      }
+    }
+
+    geometry.setIndex(indices);
+    geometry.computeBoundingSphere();
+    geometry.computeVertexNormals();
+    return geometry;
+  }
+
+  function createTrimeshGeometry(shape) {
+    const geometry = new BufferGeometry();
+    const positions = [];
+    const v0 = _tempVec0;
+    const v1 = _tempVec1;
+    const v2 = _tempVec2;
+
+    for (let i = 0; i < shape.indices.length / 3; i++) {
+      shape.getTriangleVertices(i, v0, v1, v2);
+      positions.push(v0.x, v0.y, v0.z);
+      positions.push(v1.x, v1.y, v1.z);
+      positions.push(v2.x, v2.y, v2.z);
+    }
+
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    geometry.computeBoundingSphere();
+    geometry.computeVertexNormals();
+    return geometry;
+  }
+
+  function createHeightfieldGeometry(shape) {
+    const geometry = new BufferGeometry();
+    const s = shape.elementSize || 1; // assumes square heightfield, else i*x, j*y
+
+    const positions = shape.data.flatMap((row, i) => row.flatMap((z, j) => [i * s, j * s, z]));
+    const indices = [];
+
+    for (let xi = 0; xi < shape.data.length - 1; xi++) {
+      for (let yi = 0; yi < shape.data[xi].length - 1; yi++) {
+        const stride = shape.data[xi].length;
+        const index = xi * stride + yi;
+        indices.push(index + 1, index + stride, index + stride + 1);
+        indices.push(index + stride, index + 1, index);
+      }
+    }
+
+    geometry.setIndex(indices);
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    geometry.computeBoundingSphere();
+    geometry.computeVertexNormals();
+    return geometry;
+  }
+
+  function createMesh(shape) {
+    let mesh = new Mesh();
+    const {
+      SPHERE,
+      BOX,
+      PLANE,
+      CYLINDER,
+      CONVEXPOLYHEDRON,
+      TRIMESH,
+      HEIGHTFIELD
+    } = Shape.types;
+
+    switch (shape.type) {
+      case SPHERE:
+        {
+          mesh = new Mesh(_sphereGeometry, _material);
+          break;
+        }
+
+      case BOX:
+        {
+          mesh = new Mesh(_boxGeometry, _material);
+          break;
+        }
+
+      case PLANE:
+        {
+          mesh = new Mesh(_planeGeometry, _material);
+          break;
+        }
+
+      case CYLINDER:
+        {
+          const geometry = new CylinderGeometry(shape.radiusTop, shape.radiusBottom, shape.height, shape.numSegments);
+          mesh = new Mesh(geometry, _material);
+          shape.geometryId = geometry.id;
+          break;
+        }
+
+      case CONVEXPOLYHEDRON:
+        {
+          const geometry = createConvexPolyhedronGeometry(shape);
+          mesh = new Mesh(geometry, _material);
+          shape.geometryId = geometry.id;
+          break;
+        }
+
+      case TRIMESH:
+        {
+          const geometry = createTrimeshGeometry(shape);
+          mesh = new Mesh(geometry, _material);
+          shape.geometryId = geometry.id;
+          break;
+        }
+
+      case HEIGHTFIELD:
+        {
+          const geometry = createHeightfieldGeometry(shape);
+          mesh = new Mesh(geometry, _material);
+          shape.geometryId = geometry.id;
+          break;
+        }
+    }
+
+    scene.add(mesh);
+    return mesh;
+  }
+
+  function scaleMesh(mesh, shape) {
+    const {
+      SPHERE,
+      BOX,
+      PLANE,
+      CYLINDER,
+      CONVEXPOLYHEDRON,
+      TRIMESH,
+      HEIGHTFIELD
+    } = Shape.types;
+
+    switch (shape.type) {
+      case SPHERE:
+        {
+          const {
+            radius
+          } = shape;
+          mesh.scale.set(radius * scale, radius * scale, radius * scale);
+          break;
+        }
+
+      case BOX:
+        {
+          mesh.scale.copy(shape.halfExtents);
+          mesh.scale.multiplyScalar(2 * scale);
+          break;
+        }
+
+      case PLANE:
+        {
+          break;
+        }
+
+      case CYLINDER:
+        {
+          mesh.scale.set(1 * scale, 1 * scale, 1 * scale);
+          break;
+        }
+
+      case CONVEXPOLYHEDRON:
+        {
+          mesh.scale.set(1 * scale, 1 * scale, 1 * scale);
+          break;
+        }
+
+      case TRIMESH:
+        {
+          mesh.scale.copy(shape.scale).multiplyScalar(scale);
+          break;
+        }
+
+      case HEIGHTFIELD:
+        {
+          mesh.scale.set(1 * scale, 1 * scale, 1 * scale);
+          break;
+        }
+    }
+  }
+
+  function typeMatch(mesh, shape) {
+    if (!mesh) return false;
+    const {
+      geometry
+    } = mesh;
+    return geometry instanceof SphereGeometry && shape.type === Shape.types.SPHERE || geometry instanceof BoxGeometry && shape.type === Shape.types.BOX || geometry instanceof PlaneGeometry && shape.type === Shape.types.PLANE || geometry.id === shape.geometryId && shape.type === Shape.types.CYLINDER || geometry.id === shape.geometryId && shape.type === Shape.types.CONVEXPOLYHEDRON || geometry.id === shape.geometryId && shape.type === Shape.types.TRIMESH || geometry.id === shape.geometryId && shape.type === Shape.types.HEIGHTFIELD;
+  }
+
+  function updateMesh(index, shape) {
+    let mesh = _meshes[index];
+    let didCreateNewMesh = false;
+
+    if (!typeMatch(mesh, shape)) {
+      if (mesh) scene.remove(mesh);
+      _meshes[index] = mesh = createMesh(shape);
+      didCreateNewMesh = true;
+    }
+
+    scaleMesh(mesh, shape);
+    return didCreateNewMesh;
+  }
+
+  function update() {
+    const meshes = _meshes;
+    const shapeWorldPosition = _tempVec0;
+    const shapeWorldQuaternion = _tempQuat0;
+    let meshIndex = 0;
+
+    for (const body of world.bodies) {
+      for (let i = 0; i !== body.shapes.length; i++) {
+        const shape = body.shapes[i];
+        const didCreateNewMesh = updateMesh(meshIndex, shape);
+        const mesh = meshes[meshIndex];
+
+        if (mesh) {
+          // Get world position
+          body.quaternion.vmult(body.shapeOffsets[i], shapeWorldPosition);
+          body.position.vadd(shapeWorldPosition, shapeWorldPosition); // Get world quaternion
+
+          body.quaternion.mult(body.shapeOrientations[i], shapeWorldQuaternion); // Copy to meshes
+
+          mesh.position.copy(shapeWorldPosition);
+          mesh.quaternion.copy(shapeWorldQuaternion);
+          if (didCreateNewMesh && onInit instanceof Function) onInit(body, mesh, shape);
+          if (!didCreateNewMesh && onUpdate instanceof Function) onUpdate(body, mesh, shape);
+        }
+
+        meshIndex++;
+      }
+    }
+
+    for (let i = meshIndex; i < meshes.length; i++) {
+      const mesh = meshes[i];
+      if (mesh) scene.remove(mesh);
+    }
+
+    meshes.length = meshIndex;
+  }
+
+  return {
+    update
+  };
+}
+
+export { CannonDebugger as default };

libs/mixamo/loadMixamoAnimation.js

@@ -0,0 +1,95 @@
+import * as THREE from 'three';
+import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
+import { mixamoVRMRigMap } from './mixamoVRMRigMap.js';
+
+/**
+ * Load Mixamo animation, convert for three-vrm use, and return it.
+ *
+ * @param {string} url A url of mixamo animation data
+ * @param {VRM} vrm A target VRM
+ * @returns {Promise<THREE.AnimationClip>} The converted AnimationClip
+ */
+export function loadMixamoAnimation( url, vrm ) {
+
+	const loader = new FBXLoader(); // A loader which loads FBX
+	return loader.loadAsync( url ).then( ( asset ) => {
+
+		const clip = THREE.AnimationClip.findByName( asset.animations, 'mixamo.com' ); // extract the AnimationClip
+
+		const tracks = []; // KeyframeTracks compatible with VRM will be added here
+
+		const restRotationInverse = new THREE.Quaternion();
+		const parentRestWorldRotation = new THREE.Quaternion();
+		const _quatA = new THREE.Quaternion();
+		const _vec3 = new THREE.Vector3();
+
+		// Adjust with reference to hips height.
+		const motionHipsHeight = asset.getObjectByName( 'mixamorigHips' ).position.y;
+		const vrmHipsHeight = vrm.humanoid.normalizedRestPose.hips.position[ 1 ];
+		const hipsPositionScale = vrmHipsHeight / motionHipsHeight;
+
+		clip.tracks.forEach( ( track ) => {
+
+			// Convert each tracks for VRM use, and push to `tracks`
+			const trackSplitted = track.name.split( '.' );
+			const mixamoRigName = trackSplitted[ 0 ];
+			const vrmBoneName = mixamoVRMRigMap[ mixamoRigName ];
+			const vrmNodeName = vrm.humanoid?.getNormalizedBoneNode( vrmBoneName )?.name;
+			const mixamoRigNode = asset.getObjectByName( mixamoRigName );
+
+			if ( vrmNodeName != null ) {
+
+				const propertyName = trackSplitted[ 1 ];
+
+				// Store rotations of rest-pose.
+				mixamoRigNode.getWorldQuaternion( restRotationInverse ).invert();
+				mixamoRigNode.parent.getWorldQuaternion( parentRestWorldRotation );
+
+				if ( track instanceof THREE.QuaternionKeyframeTrack ) {
+
+					// Retarget rotation of mixamoRig to NormalizedBone.
+					for ( let i = 0; i < track.values.length; i += 4 ) {
+
+						const flatQuaternion = track.values.slice( i, i + 4 );
+
+						_quatA.fromArray( flatQuaternion );
+
+						// 親のレスト時ワールド回転 * トラックの回転 * レスト時ワールド回転の逆
+						_quatA
+							.premultiply( parentRestWorldRotation )
+							.multiply( restRotationInverse );
+
+						_quatA.toArray( flatQuaternion );
+
+						flatQuaternion.forEach( ( v, index ) => {
+
+							track.values[ index + i ] = v;
+
+						} );
+
+					}
+
+					tracks.push(
+						new THREE.QuaternionKeyframeTrack(
+							`${vrmNodeName}.${propertyName}`,
+							track.times,
+							track.values.map( ( v, i ) => ( vrm.meta?.metaVersion === '0' && i % 2 === 0 ? - v : v ) ),
+						),
+					);
+
+				} else if ( track instanceof THREE.VectorKeyframeTrack ) {
+
+					const value = track.values.map( ( v, i ) => ( vrm.meta?.metaVersion === '0' && i % 3 !== 1 ? - v : v ) * hipsPositionScale );
+					tracks.push( new THREE.VectorKeyframeTrack( `${vrmNodeName}.${propertyName}`, track.times, value ) );
+
+				}
+
+			}
+
+		} );
+
+		return new THREE.AnimationClip( 'vrmAnimation', clip.duration, tracks );
+
+	} );
+
+}

libs/mixamo/mixamoVRMRigMap.js

@@ -0,0 +1,57 @@
+/**
+ * A map from Mixamo rig name to VRM Humanoid bone name
+ */
+export const mixamoVRMRigMap = {
+	mixamorigHips: 'hips',
+	mixamorigSpine: 'spine',
+	mixamorigSpine1: 'chest',
+	mixamorigSpine2: 'upperChest',
+	mixamorigNeck: 'neck',
+	mixamorigHead: 'head',
+	mixamorigLeftShoulder: 'leftShoulder',
+	mixamorigLeftArm: 'leftUpperArm',
+	mixamorigLeftForeArm: 'leftLowerArm',
+	mixamorigLeftHand: 'leftHand',
+	mixamorigLeftHandThumb1: 'leftThumbMetacarpal',
+	mixamorigLeftHandThumb2: 'leftThumbProximal',
+	mixamorigLeftHandThumb3: 'leftThumbDistal',
+	mixamorigLeftHandIndex1: 'leftIndexProximal',
+	mixamorigLeftHandIndex2: 'leftIndexIntermediate',
+	mixamorigLeftHandIndex3: 'leftIndexDistal',
+	mixamorigLeftHandMiddle1: 'leftMiddleProximal',
+	mixamorigLeftHandMiddle2: 'leftMiddleIntermediate',
+	mixamorigLeftHandMiddle3: 'leftMiddleDistal',
+	mixamorigLeftHandRing1: 'leftRingProximal',
+	mixamorigLeftHandRing2: 'leftRingIntermediate',
+	mixamorigLeftHandRing3: 'leftRingDistal',
+	mixamorigLeftHandPinky1: 'leftLittleProximal',
+	mixamorigLeftHandPinky2: 'leftLittleIntermediate',
+	mixamorigLeftHandPinky3: 'leftLittleDistal',
+	mixamorigRightShoulder: 'rightShoulder',
+	mixamorigRightArm: 'rightUpperArm',
+	mixamorigRightForeArm: 'rightLowerArm',
+	mixamorigRightHand: 'rightHand',
+	mixamorigRightHandPinky1: 'rightLittleProximal',
+	mixamorigRightHandPinky2: 'rightLittleIntermediate',
+	mixamorigRightHandPinky3: 'rightLittleDistal',
+	mixamorigRightHandRing1: 'rightRingProximal',
+	mixamorigRightHandRing2: 'rightRingIntermediate',
+	mixamorigRightHandRing3: 'rightRingDistal',
+	mixamorigRightHandMiddle1: 'rightMiddleProximal',
+	mixamorigRightHandMiddle2: 'rightMiddleIntermediate',
+	mixamorigRightHandMiddle3: 'rightMiddleDistal',
+	mixamorigRightHandIndex1: 'rightIndexProximal',
+	mixamorigRightHandIndex2: 'rightIndexIntermediate',
+	mixamorigRightHandIndex3: 'rightIndexDistal',
+	mixamorigRightHandThumb1: 'rightThumbMetacarpal',
+	mixamorigRightHandThumb2: 'rightThumbProximal',
+	mixamorigRightHandThumb3: 'rightThumbDistal',
+	mixamorigLeftUpLeg: 'leftUpperLeg',
+	mixamorigLeftLeg: 'leftLowerLeg',
+	mixamorigLeftFoot: 'leftFoot',
+	mixamorigLeftToeBase: 'leftToes',
+	mixamorigRightUpLeg: 'rightUpperLeg',
+	mixamorigRightLeg: 'rightLowerLeg',
+	mixamorigRightFoot: 'rightFoot',
+	mixamorigRightToeBase: 'rightToes',
+};