mrdoob/three.js · error

THREE.KeyframeTrack: Unsupported typeName: ${typeName}

Error message

THREE.KeyframeTrack: Unsupported typeName: ${typeName}

What it means

Thrown by AnimationUtils/AnimationClip.getTrackTypeForValueTypeName() when parsing an AnimationClip from JSON: each track's 'type' field (compared case-insensitively) must be one of the recognized value-type names — scalar/double/float/number/integer, vector/vector2-4, color, quaternion, bool/boolean, string. Any other value has no KeyframeTrack subclass to map to and aborts clip parsing.

Source

Thrown at src/animation/AnimationClip.js:450

			return ColorKeyframeTrack;

		case 'quaternion':

			return QuaternionKeyframeTrack;

		case 'bool':
		case 'boolean':

			return BooleanKeyframeTrack;

		case 'string':

			return StringKeyframeTrack;

	}

	throw new Error( 'THREE.KeyframeTrack: Unsupported typeName: ' + typeName );

}

function parseKeyframeTrack( json ) {

	if ( json.type === undefined ) {

		throw new Error( 'THREE.KeyframeTrack: track type undefined, can not parse' );

	}

	const trackType = getTrackTypeForValueTypeName( json.type );

	if ( json.times === undefined ) {

		const times = [], values = [];

		AnimationUtils.flattenJSON( json.keys, times, values, 'value' );

View on GitHub (pinned to da05705fa3)

Solutions

1. Inspect each track.type in the failing clip JSON and correct it to a supported value-type name (scalar, vector3, quaternion, color, bool, string, etc.).
2. If the type is genuinely new to your pipeline, map it to the closest existing KeyframeTrack subclass (or register a custom track and extend getTrackTypeForValueTypeName).
3. Re-export the animation from a three.js version matching the runtime library to avoid vocabulary drift.

Example fix

// before — clip JSON track
{ "name": "arm.rotation", "type": "euler", "times": [...], "values": [...] }
// -> 'Unsupported typeName: euler'

// after — map to a supported value type
{ "name": "arm.rotation", "type": "quaternion", "times": [...], "values": [...] }

const VALUE_TYPES = new Set( [ 'scalar', 'double', 'float', 'number', 'integer', 'vector', 'vector2', 'vector3', 'vector4', 'color', 'quaternion', 'bool', 'boolean', 'string' ] );
function validateClipTypes( clipJson ) {
  for ( const t of clipJson.tracks || [] ) {
    if ( ! t.type || ! VALUE_TYPES.has( String( t.type ).toLowerCase() ) ) {
      throw new Error( `track '${t.name}' has unsupported type: ${t.type}` );
    }
  }
}

const VALUE_TYPES = new Set( [ 'scalar', 'double', 'float', 'number', 'integer', 'vector', 'vector2', 'vector3', 'vector4', 'color', 'quaternion', 'bool', 'boolean', 'string' ] );
function isSupportedValueType( type ) {
  return typeof type === 'string' && VALUE_TYPES.has( type.toLowerCase() );
}

try {
  clip = AnimationClip.parse( json );
} catch ( err ) {
  if ( /Unsupported typeName/.test( err.message ) ) {
    console.error( 'Animation clip has an unsupported track type; skipping clip.', json );
    clip = null;
  } else throw err;
}

When it happens

Trigger: Loading a glTF/JSON animation where a track's .type is a custom or misspelled string. Hand-built AnimationClip JSON whose type field uses a different vocabulary (e.g. 'matrix', 'euler', 'angle'). A version skew where a newer exporter writes a type name this build of three.js does not know.

Common situations: Interchanging animation JSON between three.js versions or between three.js and another tool's exporter. Typo in a serialized clip (e.g. 'Vectr3'). Custom track types from an in-house pipeline.

Related errors

• THREE.KeyframeTrack: track type undefined, can not parse
• unsupported shape type: ${type}
• THREE.KeyframeTrack: track name is undefined
• unsupported interpolation for ${this.ValueTypeName} keyframe
• THREE.PropertyBinding: Cannot parse trackName: ${trackName}

AI-assisted analysis of mrdoob/three.js@da05705fa3 (2026-08-12). Data as JSON: /api/errors/0890cd7a29138546. Report an issue: GitHub.