@directivegames/genesys.js 3.1.24

package/src/xr/ui/CanvasUI.ts

@@ -0,0 +1,879 @@
+import * as THREE from 'three';
+
+import { CanvasColorPicker } from './CanvasColorPicker.js';
+import { CanvasKeyboard } from './CanvasKeyboard.js';
+import { CanvasSlider } from './CanvasSlider.js';
+
+export interface Position {
+  x?: number;
+  y?: number;
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+}
+
+export interface UIElementConfig {
+  type?: 'text' | 'button' | 'image' | 'shape' | 'input-text' | 'picker' | 'slider' | 'img';
+  position?: Position;
+  width?: number;
+  height?: number;
+  overflow?: 'fit' | 'scroll' | 'hidden';
+  textAlign?: 'center' | 'left' | 'right';
+  verticalAlign?: 'top' | 'middle' | 'bottom';
+  fontSize?: number;
+  fontColor?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  padding?: number;
+  paddingTop?: number;
+  paddingLeft?: number;
+  paddingBottom?: number;
+  paddingRight?: number;
+  backgroundColor?: string;
+  borderRadius?: number;
+  clipPath?: string;
+  border?: string;
+  hover?: string;
+  active?: string;
+  display?: 'block' | 'none';
+  scrollY?: number;
+  minScrollY?: number;
+  leading?: number;
+  min?: number;
+  max?: number;
+  onSelect?: () => void;
+  onEnter?: (text: string) => void;
+  onChanged?: (text: string) => void;
+  onChange?: (value: any) => void;
+  picker?: CanvasColorPicker;
+  slider?: CanvasSlider;
+  img?: HTMLImageElement;
+}
+
+export interface BodyConfig extends UIElementConfig {
+  fontFamily?: string;
+  fontWeight?: string;
+  fontSize?: number;
+  padding?: number;
+  backgroundColor?: string;
+  fontColor?: string;
+  borderRadius?: number;
+}
+
+export interface CanvasUIConfig {
+  panelSize?: { width: number; height: number };
+  width?: number;
+  height?: number;
+  opacity?: number;
+  body?: BodyConfig;
+  scene?: THREE.Scene;
+  renderer?: THREE.WebGLRenderer;
+  [key: string]: any;
+}
+
+export interface CanvasUIContent {
+  [key: string]: any;
+}
+
+export class CanvasUI {
+  public config: CanvasUIConfig;
+  public content: CanvasUIContent;
+  public mesh!: THREE.Mesh;
+  public texture!: THREE.CanvasTexture;
+  public context!: CanvasRenderingContext2D;
+  public needsUpdate: boolean = true;
+  public keyboard?: CanvasKeyboard;
+  public scene?: THREE.Scene;
+  public renderer?: THREE.WebGLRenderer;
+  public panelSize!: { width: number; height: number };
+
+  private selectedElements: [UIElementConfig | undefined, UIElementConfig | undefined] = [undefined, undefined];
+  private selectPressed: [boolean, boolean] = [false, false];
+  private scrollData: [any, any] = [undefined, undefined];
+  private intersects: [THREE.Intersection | undefined, THREE.Intersection | undefined] = [undefined, undefined];
+  private vec3?: THREE.Vector3;
+  private mat4?: THREE.Matrix4;
+  private raycaster?: THREE.Raycaster;
+  private controller?: THREE.XRTargetRaySpace;
+  private controller1?: THREE.XRTargetRaySpace;
+  private intersectMesh?: [THREE.Mesh, THREE.Mesh];
+
+  // Static registry for all CanvasUI instances
+  private static instances: Set<CanvasUI> = new Set();
+  private blockInteractionsBehind: boolean = true;
+
+  constructor(content?: CanvasUIContent, config?: CanvasUIConfig) {
+    // Register this instance
+    CanvasUI.instances.add(this);
+
+    const defaultConfig: CanvasUIConfig = {
+      panelSize: { width: 1, height: 1 },
+      width: 512,
+      height: 512,
+      opacity: 0.7,
+      body: {
+        fontFamily: 'Arial',
+        fontSize: 30,
+        padding: 20,
+        backgroundColor: '#000',
+        fontColor: '#fff',
+        borderRadius: 6
+      }
+    };
+
+    this.config = config ?? defaultConfig;
+
+    Object.entries(this.config).forEach(([name, value]) => {
+      if (!this.isCanvasUIObjectDefinition(value, name)) return;
+
+      const pos = value.position ?? { x: 0, y: 0 };
+
+      if (pos.left !== undefined && pos.x === undefined) pos.x = pos.left;
+      if (pos.top !== undefined && pos.y === undefined) pos.y = pos.top;
+
+      const width = value.width ?? this.config.width!;
+      const height = value.height ?? this.config.height!;
+
+      if (pos.right !== undefined && pos.x === undefined) pos.x = this.config.width! - pos.right - width;
+      if (pos.bottom !== undefined && pos.y === undefined) pos.y = this.config.height! - pos.bottom - height;
+
+      pos.x ??= 0;
+      pos.y ??= 0;
+
+      value.position = pos;
+
+      value.type ??= 'text';
+    });
+
+    const canvas = this.createOffscreenCanvas(this.config.width!, this.config.height!);
+    this.context = canvas.getContext('2d')!;
+    this.context.save();
+
+    const opacity = this.config.opacity ?? 0.7;
+
+    const planeMaterial = new THREE.MeshBasicMaterial({ transparent: true, opacity });
+    this.panelSize = this.config.panelSize ?? { width: 1, height: 1 };
+    const planeGeometry = new THREE.PlaneGeometry(this.panelSize.width, this.panelSize.height);
+
+    this.mesh = new THREE.Mesh(planeGeometry, planeMaterial);
+
+    this.texture = new THREE.CanvasTexture(canvas);
+    (this.mesh.material as THREE.MeshBasicMaterial).map = this.texture;
+
+    this.scene = this.config.scene;
+
+    const inputs = Object.values(this.config).filter((value): value is UIElementConfig => {
+      return typeof value === 'object' && value.type === 'input-text';
+    });
+
+    if (inputs.length > 0 && this.config.renderer) {
+      this.keyboard = new CanvasKeyboard(this.panelSize.width, this.config.renderer, 'EN', CanvasUI);
+      const mesh = this.keyboard.mesh;
+      mesh.position.set(0, -0.3, 0.2);
+      this.mesh.add(this.keyboard.mesh);
+    }
+
+    if (content === undefined) {
+      this.content = { body: '' };
+      this.config.body!.type = 'text';
+    } else {
+      this.content = content;
+      const btns = Object.values(this.config).filter((value): value is UIElementConfig => {
+        return typeof value === 'object' && (
+          value.overflow === 'scroll' ||
+          value.type === 'button' ||
+          value.type === 'input-text' ||
+          value.type === 'picker' ||
+          value.type === 'slider'
+        );
+      });
+
+      if (btns.length > 0) {
+        if (config === undefined || config.renderer === undefined) {
+          console.warn('CanvasUI: button, scroll or input-text in the config but no renderer');
+        } else {
+          this.renderer = config.renderer;
+          this.initControllers();
+        }
+      }
+    }
+
+    this.update();
+  }
+
+  private isCanvasUIObjectDefinition(value: any, name: string): value is UIElementConfig {
+    if (typeof value !== 'object') return false;
+    if (name === 'panelSize') return false;
+    if (value instanceof THREE.WebGLRenderer) return false;
+    if (value instanceof THREE.Scene) return false;
+    return true;
+  }
+
+  private isCanvasUIMesh(elm: any, name: string): elm is UIElementConfig {
+    if (typeof elm !== 'object') return false;
+    if (name === 'panelSize') return false;
+    if (name === 'body') return false;
+    if (elm instanceof THREE.WebGLRenderer) return false;
+    if (elm instanceof THREE.Scene) return false;
+    return true;
+  }
+
+  private merge(...objects: any[]): any {
+    const isObject = (obj: any) => obj && typeof obj === 'object';
+
+    return objects.reduce((prev, obj) => {
+      Object.keys(obj).forEach(key => {
+        const pVal = prev[key];
+        const oVal = obj[key];
+
+        if (Array.isArray(pVal) && Array.isArray(oVal)) {
+          prev[key] = oVal;
+        } else if (isObject(pVal) && isObject(oVal)) {
+          prev[key] = this.merge(pVal, oVal);
+        } else {
+          prev[key] = oVal;
+        }
+      });
+
+      return prev;
+    }, {});
+  }
+
+  private getIntersectX(index: number): number {
+    const width = this.config.width ?? 512;
+    const intersect = this.intersects[index];
+    if (intersect === undefined) return 0;
+    if (intersect.uv === undefined) return 0;
+    return intersect.uv.x * width;
+  }
+
+  private getIntersectY(index: number): number {
+    const height = this.config.height ?? 512;
+    const intersect = this.intersects[index];
+    if (intersect === undefined) return 0;
+    if (intersect.uv === undefined) return 0;
+    return (1 - intersect.uv.y) * height;
+  }
+
+  private getIntersect(index: number): { x: number; y: number } {
+    const width = this.config.width ?? 512;
+    const height = this.config.height ?? 512;
+    const intersect = this.intersects[index];
+    const pt = { x: 0, y: 0 };
+    if (intersect === undefined) return pt;
+    if (intersect.uv === undefined) return pt;
+    pt.x = intersect.uv.x * width;
+    pt.y = (1 - intersect.uv.y) * height;
+    return pt;
+  }
+
+  private initControllers(): void {
+    if (!this.renderer) return;
+
+    this.vec3 = new THREE.Vector3();
+    this.mat4 = new THREE.Matrix4();
+    this.raycaster = new THREE.Raycaster();
+
+    const self = this;
+
+    const onSelect = (event: any) => {
+      const index = (event.target === self.controller) ? 0 : 1;
+      const elm = self.selectedElements[index];
+      if (elm !== undefined) {
+        if (elm.type === 'button') {
+          self.select(index);
+        } else if (elm.type === 'picker' && elm.picker) {
+          elm.picker.onSelect(self.getIntersect(index));
+          if (elm.picker.needsUpdate) {
+            self.needsUpdate = true;
+            elm.picker.needsUpdate = false;
+          }
+        } else if (elm.type === 'input-text') {
+          if (self.keyboard) {
+            if (self.keyboard.visible) {
+              self.keyboard.linkedUI = undefined;
+              self.keyboard.linkedText = undefined;
+              self.keyboard.linkedElement = undefined;
+              self.keyboard.visible = false;
+            } else {
+              self.keyboard.linkedUI = self;
+              let name: string | undefined;
+              Object.entries(self.config).forEach(([prop, value]) => {
+                if (value === elm) name = prop;
+              });
+              if (name) {
+                const y = (0.5 - ((elm.position!.y! + (elm.height ?? self.config.height!) + (self.config.body?.padding ?? 0)) / self.config.height!)) * self.panelSize.height;
+                const h = Math.max(self.panelSize.width, self.panelSize.height) / 2;
+                self.keyboard.position.set(0, -h / 1.5 - y, 0.1);
+                self.keyboard.linkedText = self.content[name];
+                self.keyboard.linkedName = name;
+                self.keyboard.linkedElement = elm;
+                self.keyboard.visible = true;
+              }
+            }
+          }
+        }
+      }
+    };
+
+    const onSelectStart = (event: any) => {
+      const index = (event.target === self.controller) ? 0 : 1;
+      self.selectPressed[index] = true;
+      if (self.selectedElements[index] !== undefined) {
+        const elm = self.selectedElements[index]!;
+        if (elm.overflow === 'scroll') {
+          self.scrollData[index] = { scrollY: elm.scrollY, rayY: self.getIntersectY(index) };
+        }
+      }
+    };
+
+    const onSelectEnd = (event: any) => {
+      const index = (event.target === self.controller) ? 0 : 1;
+      self.selectPressed[index] = false;
+      if (self.selectedElements[index] !== undefined && self.selectedElements[index]!.overflow === 'scroll') {
+        self.scrollData[index] = undefined;
+      }
+    };
+
+    this.controller = this.renderer.xr.getController(0);
+    this.controller.addEventListener('select', onSelect);
+    this.controller.addEventListener('selectstart', onSelectStart);
+    this.controller.addEventListener('selectend', onSelectEnd);
+
+    this.controller1 = this.renderer.xr.getController(1);
+    this.controller1.addEventListener('select', onSelect);
+    this.controller1.addEventListener('selectstart', onSelectStart);
+    this.controller1.addEventListener('selectend', onSelectEnd);
+
+    if (this.scene) {
+      const radius = 0.015;
+      const geometry = new THREE.IcosahedronGeometry(radius);
+      const material = new THREE.MeshBasicMaterial({ color: 0x0000aa });
+
+      const mesh1 = new THREE.Mesh(geometry, material);
+      mesh1.visible = false;
+      this.scene.add(mesh1);
+
+      const mesh2 = new THREE.Mesh(geometry, material);
+      mesh2.visible = false;
+      this.scene.add(mesh2);
+
+      this.intersectMesh = [mesh1, mesh2];
+    }
+  }
+
+  private setClip(elm: UIElementConfig): void {
+    const context = this.context;
+
+    context.restore();
+    context.save();
+
+    if (elm.clipPath !== undefined) {
+      const path = new Path2D(elm.clipPath);
+      context.clip(path);
+    } else {
+      const pos = elm.position ?? { x: 0, y: 0 };
+      const borderRadius = elm.borderRadius ?? 0;
+      const width = elm.width ?? this.config.width!;
+      const height = elm.height ?? this.config.height!;
+
+      context.beginPath();
+
+      if (borderRadius !== 0) {
+        const angle = Math.PI / 2;
+        context.moveTo(pos.x! + borderRadius, pos.y!);
+        context.arc(pos.x! + borderRadius, pos.y! + borderRadius, borderRadius, angle, angle * 2, true);
+        context.lineTo(pos.x!, pos.y! + height - borderRadius);
+        context.arc(pos.x! + borderRadius, pos.y! + height - borderRadius, borderRadius, 0, angle, true);
+        context.lineTo(pos.x! + width - borderRadius, pos.y! + height);
+        context.arc(pos.x! + width - borderRadius, pos.y! + height - borderRadius, borderRadius, angle * 3, angle * 4, true);
+        context.lineTo(pos.x! + width, pos.y! + borderRadius);
+        context.arc(pos.x! + width - borderRadius, pos.y! + borderRadius, borderRadius, angle * 2, angle * 3, true);
+        context.closePath();
+        context.clip();
+      } else {
+        context.rect(pos.x!, pos.y!, width, height);
+        context.clip();
+      }
+    }
+  }
+
+  public setPosition(x: number, y: number, z: number): void {
+    if (this.mesh === undefined) return;
+    this.mesh.position.set(x, y, z);
+  }
+
+  public setRotation(x: number, y: number, z: number): void {
+    if (this.mesh === undefined) return;
+    this.mesh.rotation.set(x, y, z);
+  }
+
+  public updateElement(name: string, content: any): void {
+    let elm = this.content[name];
+
+    if (elm === undefined) {
+      console.warn(`CanvasGUI.updateElement: No ${name} found`);
+      return;
+    }
+
+    if (typeof elm === 'object') {
+      elm.content = content;
+    } else {
+      elm = content;
+    }
+
+    this.content[name] = elm;
+    this.needsUpdate = true;
+  }
+
+  public get panel(): THREE.Mesh {
+    return this.mesh;
+  }
+
+  private getElementAtLocation(x: number, y: number): UIElementConfig | null {
+    const self = this;
+    const elms = Object.entries(this.config).filter(([name, elm]) => {
+      if (this.isCanvasUIMesh(elm, name)) {
+        const pos = elm.position!;
+        const width = elm.width ?? self.config.width!;
+        const height = elm.height ?? self.config.height!;
+        return (x >= pos.x! && x < (pos.x! + width) && y >= pos.y! && y < (pos.y! + height));
+      }
+      return false;
+    });
+    return elms.length === 0 ? null : this.config[elms[0][0]] as UIElementConfig;
+  }
+
+  public updateConfig(name: string, property: string, value: any): void {
+    const elm = this.config[name] as UIElementConfig;
+
+    if (elm === undefined) {
+      console.warn(`CanvasUI.updateconfig: No ${name} found`);
+      return;
+    }
+
+    (elm as any)[property] = value;
+    this.needsUpdate = true;
+  }
+
+  public hover(index: number = 0, uv?: THREE.Vector2): void {
+    if (uv === undefined) {
+      if (this.selectedElements[index] !== undefined) {
+        this.selectedElements[index] = undefined;
+        this.needsUpdate = true;
+      }
+    } else {
+      const x = uv.x * (this.config.width ?? 512);
+      const y = (1 - uv.y) * (this.config.height ?? 512);
+      const elm = this.getElementAtLocation(x, y);
+      if (elm === null) {
+        if (this.selectedElements[index] !== undefined) {
+          this.selectedElements[index] = undefined;
+          this.needsUpdate = true;
+        }
+      } else if (this.selectedElements[index] !== elm) {
+        this.selectedElements[index] = elm;
+        this.needsUpdate = true;
+      }
+    }
+  }
+
+  public select(index: number = 0): void {
+    if (this.selectedElements[index] !== undefined) {
+      const elm = this.selectedElements[index]!;
+      if (elm.onSelect) elm.onSelect();
+      if (elm.type === 'input-text') {
+        if (this.keyboard) this.keyboard.mesh.visible = true;
+      } else {
+        this.selectedElements[index] = undefined;
+      }
+    }
+  }
+
+  private scroll(index: number): void {
+    if (this.selectedElements[index] === undefined) {
+      if (this.intersectMesh) this.intersectMesh[index].visible = false;
+      return;
+    }
+    if (this.selectedElements[index]!.overflow !== 'scroll') return;
+
+    const elm = this.selectedElements[index]!;
+    if (this.selectPressed[index]) {
+      const scrollData = this.scrollData[index];
+      if (scrollData !== undefined) {
+        if (this.intersectMesh) {
+          this.intersectMesh[index].visible = true;
+          this.intersectMesh[index].position.copy(this.intersects[index]!.point);
+        }
+        const rayY = this.getIntersectY(index);
+        const offset = rayY - scrollData.rayY;
+        elm.scrollY = Math.min(Math.max(elm.minScrollY!, scrollData.scrollY + offset), 0);
+        this.needsUpdate = true;
+      }
+    } else {
+      if (this.intersectMesh) this.intersectMesh[index].visible = false;
+    }
+  }
+
+  private handleController(controller: THREE.XRTargetRaySpace, index: number): void {
+    if (!this.mat4 || !this.raycaster) return;
+
+    this.mat4.identity().extractRotation(controller.matrixWorld);
+
+    this.raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
+    this.raycaster.ray.direction.set(0, 0, -1).applyMatrix4(this.mat4);
+
+    // Check if interaction blocking is enabled
+    if (this.blockInteractionsBehind) {
+      // Get all CanvasUI meshes and find the closest intersection
+      const allMeshes: THREE.Mesh[] = [];
+      CanvasUI.instances.forEach(instance => {
+        if (instance.mesh && instance.blockInteractionsBehind) {
+          allMeshes.push(instance.mesh);
+        }
+      });
+
+      if (allMeshes.length > 0) {
+        const allIntersects = this.raycaster.intersectObjects(allMeshes);
+
+        // Only interact if this mesh is the closest
+        if (allIntersects.length > 0 && allIntersects[0].object === this.mesh) {
+          this.processIntersection([allIntersects[0]], index);
+        } else {
+          this.clearInteraction(index);
+        }
+      } else {
+        this.clearInteraction(index);
+      }
+    } else {
+      // Original behavior - only check this mesh
+      const intersects = this.raycaster.intersectObject(this.mesh);
+      this.processIntersection(intersects, index);
+    }
+  }
+
+  private processIntersection(intersects: THREE.Intersection[], index: number): void {
+    const elm = this.selectedElements[index];
+
+    if (intersects.length > 0) {
+      if (elm && elm.type === 'slider') {
+        if (this.selectPressed[index]) {
+          this.intersects[index] = intersects[0];
+          elm.slider!.setValueFromPos(this.getIntersectX(index));
+          this.needsUpdate = true;
+        }
+      } else {
+        this.hover(index, intersects[0].uv);
+        this.intersects[index] = intersects[0];
+        this.scroll(index);
+      }
+    } else {
+      this.clearInteraction(index);
+    }
+  }
+
+  private clearInteraction(index: number): void {
+    this.hover(index);
+    this.intersects[index] = undefined;
+    this.scroll(index);
+  }
+
+  public update(): void {
+    if (this.mesh === undefined) return;
+
+    if (this.controller) this.handleController(this.controller, 0);
+    if (this.controller1) this.handleController(this.controller1, 1);
+
+    if (this.keyboard && this.keyboard.visible) this.keyboard.update();
+
+    if (!this.needsUpdate) return;
+
+    const context = this.context;
+
+    context.clearRect(0, 0, this.config.width!, this.config.height!);
+
+    const bgColor = this.config.body?.backgroundColor ?? '#000';
+    const fontFamily = this.config.body?.fontFamily ?? 'Arial';
+    const fontColor = this.config.body?.fontColor ?? '#fff';
+    const fontSize = this.config.body?.fontSize ?? 30;
+
+    this.config.body && this.setClip(this.config.body);
+    context.fillStyle = bgColor;
+    context.fillRect(0, 0, this.config.width!, this.config.height!);
+
+    const self = this;
+
+    Object.entries(this.content).forEach(([name, content]) => {
+      const config = (self.config[name] as UIElementConfig) ?? self.config.body!;
+      const display = config.display ?? 'block';
+
+      if (display !== 'none') {
+        const pos = config.position ?? { x: 0, y: 0 };
+        const width = config.width ?? self.config.width!;
+        const height = config.height ?? self.config.height!;
+
+        if (config.type === 'button' && !content.toLowerCase().startsWith('<path>')) {
+          config.borderRadius ??= 6;
+          config.textAlign ??= 'center';
+          config.verticalAlign ??= 'middle';
+        }
+
+        self.setClip(config);
+
+        if (config.type === 'picker') {
+          if (config.picker === undefined) {
+            const col = content ?? '#ff0000';
+            config.picker = new CanvasColorPicker(pos.x!, pos.y!, width, height, col);
+            if (config.onChange) config.picker.onChange = config.onChange;
+          }
+          config.picker.update(context);
+        } else if (config.type === 'slider') {
+          if (config.slider === undefined) {
+            const val = content ?? 0;
+            const range = { min: config.min ?? 0, max: config.max ?? 1 };
+            config.slider = new CanvasSlider(pos.x!, pos.y!, width, height, range, val);
+            config.slider.canvasui = this;
+            if (config.onChange) config.slider.onChange = config.onChange;
+          }
+          config.slider.update(context);
+        } else {
+          const svgPath = content.toLowerCase().startsWith('<path>');
+          const hover = ((self.selectedElements[0] !== undefined && this.selectedElements[0] === config) ||
+            (self.selectedElements[1] !== undefined && this.selectedElements[1] === config));
+
+          if (config.backgroundColor !== undefined) {
+            if (hover && config.type === 'button' && config.hover !== undefined) {
+              context.fillStyle = config.hover;
+            } else {
+              context.fillStyle = config.backgroundColor;
+            }
+            context.fillRect(pos.x!, pos.y!, width, height);
+          }
+
+          if (config.type === 'text' || config.type === 'button' || config.type === 'input-text') {
+            let stroke = false;
+            if (hover) {
+              if (!svgPath && config.type === 'button') {
+                context.fillStyle = config.fontColor ?? fontColor;
+              } else {
+                context.fillStyle = config.hover ?? (config.fontColor ?? fontColor);
+              }
+              stroke = (config.hover === undefined);
+            } else {
+              context.fillStyle = config.fontColor ?? fontColor;
+            }
+
+            if (svgPath) {
+              const code = content.toUpperCase().substring(6, content.length - 7);
+              context.save();
+              context.translate(pos.x!, pos.y!);
+              const path = new Path2D(code);
+              context.fill(path);
+              context.restore();
+            } else {
+              self.wrapText(name, content);
+            }
+
+            if (stroke) {
+              context.beginPath();
+              context.strokeStyle = '#fff';
+              context.lineWidth = 2;
+              context.rect(pos.x!, pos.y!, width, height);
+              context.stroke();
+            }
+          } else if (config.type === 'img') {
+            if (config.img === undefined) {
+              console.log(`🖼️ Loading image: ${content}`);
+              this.loadImage(content).then(img => {
+                console.log(`✅ Image loaded successfully: ${content}`, img.width, 'x', img.height);
+                config.img = img;
+                self.needsUpdate = true;
+                self.update();
+              }).catch(err => {
+                console.error(`❌ Failed to load image: ${content}`, err);
+              });
+            } else {
+              const aspect = config.img.width / config.img.height;
+              const h = width / aspect;
+              context.drawImage(config.img, pos.x!, pos.y!, width, h);
+            }
+          }
+        }
+      }
+    });
+
+    this.needsUpdate = false;
+    this.texture.needsUpdate = true;
+  }
+
+  private loadImage(src: string): Promise<HTMLImageElement> {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.addEventListener('load', () => resolve(img));
+      img.addEventListener('error', err => reject(err));
+      img.src = src;
+    });
+  }
+
+  private createOffscreenCanvas(w: number, h: number): HTMLCanvasElement {
+    const canvas = document.createElement('canvas');
+    canvas.width = w;
+    canvas.height = h;
+    return canvas;
+  }
+
+  public fillRoundedRect(x: number, y: number, w: number, h: number, radius: number): void {
+    const ctx = this.context;
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + w - radius, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+    ctx.lineTo(x + w, y + h - radius);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+    ctx.lineTo(x + radius, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  private wrapText(name: string, txt: string): void {
+    const words = txt.split(' ');
+    let line = '';
+    const lines: string[] = [];
+    const config = (this.config[name] as UIElementConfig) ?? this.config.body!;
+    const width = config.width ?? this.config.width!;
+    const height = config.height ?? this.config.height!;
+    const pos = config.position ?? { x: 0, y: 0 };
+    const padding = config.padding ?? (this.config.body!.padding ?? 10);
+    const paddingTop = config.paddingTop ?? padding;
+    const paddingLeft = config.paddingLeft ?? padding;
+    const paddingBottom = config.paddingBottom ?? padding;
+    const paddingRight = config.paddingRight ?? padding;
+    const rect = { x: pos.x! + paddingLeft, y: pos.y! + paddingTop, width: width - paddingLeft - paddingRight, height: height - paddingTop - paddingBottom };
+    const textAlign = config.textAlign ?? (this.config.body!.textAlign ?? 'left');
+    const fontSize = config.fontSize ?? (this.config.body!.fontSize ?? 30);
+    const fontFamily = config.fontFamily ?? (this.config.body!.fontFamily ?? 'Arial');
+    const fontWeight = config.fontWeight ?? (this.config.body!.fontWeight ?? 'normal');
+    const leading = config.leading ?? (this.config.body!.leading ?? 8);
+    const lineHeight = fontSize + leading;
+
+    const context = this.context;
+
+    context.textAlign = textAlign as CanvasTextAlign;
+    context.textBaseline = 'middle';
+    context.font = `${fontWeight} ${fontSize}px '${fontFamily}'`;
+
+    // Debug font usage
+    if (fontFamily.includes('Gochi Hand')) {
+      console.log(`🎨 Using Gochi Hand font: ${context.font}`);
+    }
+
+    words.forEach((word) => {
+      const testLine = words.length > 1 ? `${line}${word} ` : word;
+      let metrics = context.measureText(testLine);
+      if (metrics.width > rect.width && word.length > 1) {
+        if (line.length === 0 && metrics.width > rect.width) {
+          // word too long
+          while (metrics.width > rect.width) {
+            let count = 0;
+            do {
+              count++;
+              const testSubLine = word.substr(0, count);
+              metrics = context.measureText(testSubLine);
+            } while (metrics.width < rect.width && count < (word.length - 1));
+            count--;
+            const testSubLine = word.substr(0, count);
+            lines.push(testSubLine);
+            word = word.substr(count);
+            if (count <= 1) break;
+            metrics = context.measureText(word);
+          }
+          if (word !== '') lines.push(word);
+        } else {
+          lines.push(line);
+          line = `${word} `;
+        }
+      } else {
+        line = testLine;
+      }
+    });
+
+    if (line !== '') lines.push(line);
+
+    const textHeight = lines.length * lineHeight;
+    let scrollY = 0;
+
+    if (textHeight > rect.height && config.overflow === 'scroll') {
+      // Show a scroll bar
+      config.scrollY ??= 0;
+      const fontColor = config.fontColor ?? this.config.body!.fontColor;
+      context.fillStyle = '#aaa';
+      this.fillRoundedRect(pos.x! + width - 12, pos.y!, 12, height, 6);
+      context.fillStyle = '#666';
+      const scale = rect.height / textHeight;
+      const thumbHeight = scale * height;
+      const thumbY = -config.scrollY * scale;
+      this.fillRoundedRect(pos.x! + width - 12, pos.y! + thumbY, 12, thumbHeight, 6);
+      context.fillStyle = fontColor!;
+      scrollY = config.scrollY;
+      config.minScrollY = rect.height - textHeight;
+    }
+
+    const verticalAlign = config.verticalAlign ?? 'top';
+    let y: number;
+    let x: number;
+
+    // Calculate vertical alignment
+    // Note: textBaseline is set to 'middle', so y position is the vertical center of the text
+    switch (verticalAlign) {
+      case 'middle':
+        y = scrollY + rect.y + rect.height / 2;
+        break;
+      case 'bottom':
+        y = scrollY + rect.y + rect.height - fontSize / 2;
+        break;
+      default: // 'top'
+        y = scrollY + rect.y + fontSize / 2;
+        break;
+    }
+
+    switch (textAlign) {
+      case 'center':
+        x = rect.x + rect.width / 2;
+        break;
+      case 'right':
+        x = rect.x + rect.width;
+        break;
+      default:
+        x = rect.x;
+        break;
+    }
+
+    lines.forEach((line) => {
+      if ((y + lineHeight) > 0) context.fillText(line, x, y);
+      y += lineHeight;
+    });
+  }
+
+  public setBlockInteractionsBehind(enable: boolean): void {
+    this.blockInteractionsBehind = enable;
+  }
+
+  public dispose(): void {
+    // Remove from registry
+    CanvasUI.instances.delete(this);
+
+    // Clean up resources
+    if (this.texture) this.texture.dispose();
+    if (this.mesh.geometry) this.mesh.geometry.dispose();
+    if (Array.isArray(this.mesh.material)) {
+      this.mesh.material.forEach(mat => mat.dispose());
+    } else if (this.mesh.material) {
+      this.mesh.material.dispose();
+    }
+  }
+}