BabylonJS/Babylon.js · error · Error

Invalid color type

Error message

Invalid color type

What it means

FromColor converts Color3/Color4 values to Vector3/Vector4 when a JSON pointer resolves into a color property. If the value is neither instanceof Color3 nor Color4, it throws 'Invalid color type'. This guards against values that merely look like colors (plain objects, RGBA arrays) but are not Babylon color instances.

Source

Thrown at packages/dev/core/src/FlowGraph/Blocks/Data/Transformers/flowGraphJsonPointerParserBlock.pure.ts:203

function ToColor(value: any, expectedValue: string) {
    if (value.getClassName().startsWith("Color")) {
        return value as unknown as Color3 | Color4;
    }
    if (expectedValue === "Color3") {
        return new Color3(value.x, value.y, value.z);
    } else if (expectedValue === "Color4") {
        return new Color4(value.x, value.y, value.z, value.w);
    }
    return value;
}

function FromColor(value: Color3 | Color4): Vector3 | Vector4 {
    if (value instanceof Color3) {
        return new Vector3(value.r, value.g, value.b);
    } else if (value instanceof Color4) {
        return new Vector4(value.r, value.g, value.b, value.a);
    }
    throw new Error("Invalid color type");
}

let _Registered = false;
/**
 * Register side effects for flowGraphJsonPointerParserBlock.
 * Safe to call multiple times; only the first call has an effect.
 */
export function RegisterFlowGraphJsonPointerParserBlock(): void {
    if (_Registered) {
        return;
    }
    _Registered = true;

    RegisterClass(FlowGraphBlockNames.JsonPointerParser, FlowGraphJsonPointerParserBlock);
}

View on GitHub (pinned to 0592b347b8)

Solutions

1. Reconstruct the value as Color3/Color4 (e.g. new Color3(r,g,b)) before the pointer parser reads it
2. If the value comes from JSON, convert it: Color3.FromArray or manual construction at load time
3. Extend the accessor to normalize plain {r,g,b(,a)} objects into Color3/Color4 before calling FromColor

Example fix

// before
const value = JSON.parse('{"r":1,"g":0,"b":0}'); // plain object -> throws
// after
const value = Color3.FromArray(JSON.parse('{"r":1,"g":0,"b":0}'));

if (!(value instanceof BABYLON.Color3 || value instanceof BABYLON.Color4)) value = BABYLON.Color3.FromArray(value);

const isBabylonColor = (v: unknown): v is BABYLON.Color3 | BABYLON.Color4 =>
  v instanceof BABYLON.Color3 || v instanceof BABYLON.Color4;

try { return FromColor(value); } catch (e) { if (e.message === 'Invalid color type') { return Color3.FromArray(normalizeColor(value)); } throw e; }

When it happens

Trigger: A JSON pointer resolves to an object created via JSON.parse or a plain literal {r,g,b} that is structurally a color but not a Color3/Color4 instance, so both instanceof checks fail.

Common situations: Colors loaded from serialized JSON/scene files without reconstruction; passing arrays like [1,0,0] where Color3 expected; cross-realm or duplicated-module Color3 classes defeating instanceof.

Related errors

• Cannot transform value ${a}
• Cannot slerp value ${a}
• Event id should be a number
• Variable index is not defined for variable interpolation blo
• Cannot compare ${a} and ${b}

AI-assisted analysis of BabylonJS/Babylon.js@0592b347b8 (2026-08-30). Data as JSON: /api/errors/5991c4599c032a46. Report an issue: GitHub.