diff --git a/dist/mr.js b/dist/mr.js
index ab017d90..fce3eb70 100644
--- a/dist/mr.js
+++ b/dist/mr.js
@@ -970,7 +970,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   color: () => (/* binding */ color)\n/* harmony export */ });\n/**\n * @namespace color\n * @description Useful namespace for helping with color utility functions\n */\nlet color = {};\n\n/**\n * @function\n * @memberof color\n * @param {string} hex - the hex code including \"#\" at the beginning\n * @description Converts a hex code into a usable rgba object value\n * @returns {object} - the calculated rgba value representation of the hex code\n * {\n *      r: number, // Red component (0-255)\n *      g: number, // Green component (0-255)\n *      b: number, // Blue component (0-255)\n *      a: number  // Alpha component (0-1 for transparency)\n * }\n */\ncolor.hexToRgba = function (hex) {\n    let r = 0,\n        g = 0,\n        b = 0,\n        a = 1; // Default is black\n    if (hex.startsWith('#')) {\n        hex = hex.substring(1);\n    }\n\n    if (hex.length === 3) {\n        r = parseInt(hex[0] + hex[0], 16);\n        g = parseInt(hex[1] + hex[1], 16);\n        b = parseInt(hex[2] + hex[2], 16);\n    } else if (hex.length === 6) {\n        r = parseInt(hex.substring(0, 2), 16);\n        g = parseInt(hex.substring(2, 4), 16);\n        b = parseInt(hex.substring(4, 6), 16);\n    } else if (hex.length === 4) {\n        r = parseInt(hex[0] + hex[0], 16);\n        g = parseInt(hex[1] + hex[1], 16);\n        b = parseInt(hex[2] + hex[2], 16);\n        a = parseInt(hex[3] + hex[3], 16) / 255;\n    } else if (hex.length === 8) {\n        r = parseInt(hex.substring(0, 2), 16);\n        g = parseInt(hex.substring(2, 4), 16);\n        b = parseInt(hex.substring(4, 6), 16);\n        a = parseInt(hex.substring(6, 8), 16) / 255;\n    }\n    return { r, g, b, a };\n};\n\ncolor.setObject3DColor = function (object3D, color, compStyle_opacity = '1', default_color = '#000') {\n    const setColor = (object3D, color, compStyle_opacity, default_color) => {\n        if (color.startsWith('rgba')) {\n            const rgba = color\n                .match(/rgba?\\(([^)]+)\\)/)[1]\n                .split(',')\n                .map((n) => parseFloat(n.trim()));\n            object3D.material.color.setStyle(`rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`);\n            object3D.material.transparent = rgba.length === 4 && rgba[3] < 1;\n            object3D.material.opacity = rgba.length === 4 ? rgba[3] : 1;\n            object3D.visible = !(rgba.length === 4 && rgba[3] === 0);\n        } else if (color.startsWith('rgb')) {\n            // RGB colors are treated as fully opaque\n            object3D.material.color.setStyle(color);\n            object3D.material.transparent = false;\n            object3D.visible = true;\n        } else if (color.startsWith('#')) {\n            const { r, g, b, a } = mrjsUtils.color.hexToRgba(color);\n            object3D.material.color.setStyle(`rgb(${r}, ${g}, ${b})`);\n            object3D.material.transparent = a < 1;\n            object3D.material.opacity = a;\n            object3D.visible = a !== 0;\n        } else {\n            // This assumes the color is a CSS color word or another valid CSS color value\n            object3D.material.color.setStyle(color ?? default_color);\n            object3D.material.transparent = false;\n            object3D.visible = true;\n        }\n        if (compStyle_opacity < 1) {\n            object3D.material.opacity = compStyle_opacity;\n        }\n        object3D.material.needsUpdate = true;\n    };\n\n    if (object3D.isGroup) {\n        mrjsUtils.warn.warn(\"setObject3DColor will not handle groups as expected, please use 'setEntityColor' instead.\");\n    } else {\n        setColor(object3D, color, compStyle_opacity, default_color);\n    }\n};\n\ncolor.setEntityOpacity = function (object3D, compStyle_opacity) {\n    entity.traverseObjects((object) => {\n        if (object.isMesh) {\n            mrjsUtils.color.setObject3DOpacity(object, compStyle_opacity);\n        }\n    });\n}\n\ncolor.setObject3DOpacity = function (object3D, compStyle_opacity) {\n    const setOpacity = (object3D, compStyle_opacity) => {\n        if (compStyle_opacity <= 1) {\n            object3D.material.opacity = compStyle_opacity;\n        }\n        object3D.material.needsUpdate = true;\n    };\n\n    if (object3D.isGroup) {\n        mrjsUtils.warn.warn(\"setObject3DOpacity will not handle groups as expected, please use 'setEntityOpacity' instead.\");\n    } else {\n        setOpacity(object3D, compStyle_opacity);\n    }\n}\n\ncolor.setEntityColor = function (entity, color, compStyle_opacity = '1', default_color = '#000') {\n    entity.traverseObjects((object) => {\n        if (object.isMesh) {\n            mrjsUtils.color.setObject3DColor(object, color, compStyle_opacity, default_color);\n        }\n    });\n};\n\ncolor.setTEXTObject3DColor = function (object3D, color, default_color = '#000') {\n    if (color.includes('rgba')) {\n        const rgba = color\n            .substring(5, color.length - 1)\n            .split(',')\n            .map((part) => parseFloat(part.trim()));\n        object3D.material.color.setStyle(`rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`);\n\n        object3D.material.opacity = rgba[3];\n    } else {\n        object3D.material.color.setStyle(color ?? '#000');\n    }\n    object3D.material.needsUpdate = true;\n};\n\n\n\n\n//# sourceURL=webpack://mrjs/./src/utils/Color.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   color: () => (/* binding */ color)\n/* harmony export */ });\n/**\n * @namespace color\n * @description Useful namespace for helping with color utility functions\n */\nlet color = {};\n\n/**\n * @function\n * @memberof color\n * @param {string} hex - the hex code including \"#\" at the beginning\n * @description Converts a hex code into a usable rgba object value\n * @returns {object} - the calculated rgba value representation of the hex code\n * {\n *      r: number, // Red component (0-255)\n *      g: number, // Green component (0-255)\n *      b: number, // Blue component (0-255)\n *      a: number  // Alpha component (0-1 for transparency)\n * }\n */\ncolor.hexToRgba = function (hex) {\n    let r = 0,\n        g = 0,\n        b = 0,\n        a = 1; // Default is black\n    if (hex.startsWith('#')) {\n        hex = hex.substring(1);\n    }\n\n    if (hex.length === 3) {\n        r = parseInt(hex[0] + hex[0], 16);\n        g = parseInt(hex[1] + hex[1], 16);\n        b = parseInt(hex[2] + hex[2], 16);\n    } else if (hex.length === 6) {\n        r = parseInt(hex.substring(0, 2), 16);\n        g = parseInt(hex.substring(2, 4), 16);\n        b = parseInt(hex.substring(4, 6), 16);\n    } else if (hex.length === 4) {\n        r = parseInt(hex[0] + hex[0], 16);\n        g = parseInt(hex[1] + hex[1], 16);\n        b = parseInt(hex[2] + hex[2], 16);\n        a = parseInt(hex[3] + hex[3], 16) / 255;\n    } else if (hex.length === 8) {\n        r = parseInt(hex.substring(0, 2), 16);\n        g = parseInt(hex.substring(2, 4), 16);\n        b = parseInt(hex.substring(4, 6), 16);\n        a = parseInt(hex.substring(6, 8), 16) / 255;\n    }\n    return { r, g, b, a };\n};\n\ncolor.setObject3DColor = function (object3D, color, compStyle_opacity = '1', default_color = '#000') {\n    const setColor = (object3D, color, compStyle_opacity, default_color) => {\n        if (color.startsWith('rgba')) {\n            const rgba = color\n                .match(/rgba?\\(([^)]+)\\)/)[1]\n                .split(',')\n                .map((n) => parseFloat(n.trim()));\n            object3D.material.color.setStyle(`rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`);\n            object3D.material.transparent = rgba.length === 4 && rgba[3] < 1;\n            object3D.material.opacity = rgba.length === 4 ? rgba[3] : 1;\n            object3D.visible = !(rgba.length === 4 && rgba[3] === 0);\n        } else if (color.startsWith('rgb')) {\n            // RGB colors are treated as fully opaque\n            object3D.material.color.setStyle(color);\n            object3D.material.transparent = false;\n            object3D.visible = true;\n        } else if (color.startsWith('#')) {\n            const { r, g, b, a } = mrjsUtils.color.hexToRgba(color);\n            object3D.material.color.setStyle(`rgb(${r}, ${g}, ${b})`);\n            object3D.material.transparent = a < 1;\n            object3D.material.opacity = a;\n            object3D.visible = a !== 0;\n        } else {\n            // This assumes the color is a CSS color word or another valid CSS color value\n            object3D.material.color.setStyle(color ?? default_color);\n            object3D.material.transparent = false;\n            object3D.visible = true;\n        }\n        if (compStyle_opacity < 1) {\n            object3D.material.opacity = compStyle_opacity;\n        }\n        object3D.material.needsUpdate = true;\n    };\n\n    if (object3D.isGroup) {\n        mrjsUtils.warn.warn(\"setObject3DColor will not handle groups as expected, please use 'setEntityColor' instead.\");\n    } else {\n        setColor(object3D, color, compStyle_opacity, default_color);\n    }\n};\n\ncolor.setEntityOpacity = function (object3D, compStyle_opacity) {\n    entity.traverseObjects((object) => {\n        if (object.isMesh) {\n            mrjsUtils.color.setObject3DOpacity(object, compStyle_opacity);\n        }\n    });\n};\n\ncolor.setObject3DOpacity = function (object3D, compStyle_opacity) {\n    const setOpacity = (object3D, compStyle_opacity) => {\n        if (compStyle_opacity <= 1) {\n            object3D.material.opacity = compStyle_opacity;\n        }\n        object3D.material.needsUpdate = true;\n    };\n\n    if (object3D.isGroup) {\n        mrjsUtils.warn.warn(\"setObject3DOpacity will not handle groups as expected, please use 'setEntityOpacity' instead.\");\n    } else {\n        setOpacity(object3D, compStyle_opacity);\n    }\n};\n\ncolor.setEntityColor = function (entity, color, compStyle_opacity = '1', default_color = '#000') {\n    entity.traverseObjects((object) => {\n        if (object.isMesh) {\n            mrjsUtils.color.setObject3DColor(object, color, compStyle_opacity, default_color);\n        }\n    });\n};\n\ncolor.setTEXTObject3DColor = function (object3D, color, default_color = '#000') {\n    if (color.includes('rgba')) {\n        const rgba = color\n            .substring(5, color.length - 1)\n            .split(',')\n            .map((part) => parseFloat(part.trim()));\n        object3D.material.color.setStyle(`rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`);\n\n        object3D.material.opacity = rgba[3];\n    } else {\n        object3D.material.color.setStyle(color ?? '#000');\n    }\n    object3D.material.needsUpdate = true;\n};\n\n\n\n\n//# sourceURL=webpack://mrjs/./src/utils/Color.js?");
 
 /***/ }),