@vectojs/three 0.1.0

package/dist/index.mjs

@@ -0,0 +1,675 @@
+// src/ThreeRenderer.ts
+import { parseColorToRGBA } from "@vectojs/core";
+import * as THREE from "three";
+var WebGLGradient = class {
+  constructor(x0, y0, x1, y1, colorStops) {
+    this.x0 = x0;
+    this.y0 = y0;
+    this.x1 = x1;
+    this.y1 = y1;
+    this.colorStops = colorStops;
+  }
+  x0;
+  y0;
+  x1;
+  y1;
+  colorStops;
+  type = "linear";
+};
+var ThreePath = class {
+  shapes = [];
+  currentShape = null;
+  constructor() {
+    this.moveTo(0, 0);
+  }
+  getShape() {
+    if (!this.currentShape) {
+      this.currentShape = new THREE.Shape();
+      this.shapes.push(this.currentShape);
+    }
+    return this.currentShape;
+  }
+  moveTo(x, y) {
+    if (this.currentShape && this.currentShape.curves.length > 0) {
+      this.currentShape = new THREE.Shape();
+      this.shapes.push(this.currentShape);
+    }
+    this.getShape().moveTo(x, y);
+  }
+  lineTo(x, y) {
+    this.getShape().lineTo(x, y);
+  }
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.getShape().bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+  }
+  closePath() {
+    this.currentShape?.closePath();
+  }
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.getShape().absarc(x, y, radius, startAngle, endAngle, counterclockwise);
+  }
+  toShapes() {
+    return this.shapes;
+  }
+  getPoints() {
+    const allPoints = [];
+    for (const shape of this.shapes) {
+      allPoints.push(...shape.getPoints());
+    }
+    return allPoints;
+  }
+};
+var ThreeRenderer = class {
+  scene;
+  camera;
+  renderer;
+  width;
+  height;
+  matrix;
+  stack = [];
+  globalAlpha = 1;
+  alphaStack = [];
+  currentPath = null;
+  activeObjects = [];
+  scissorStack = [];
+  constructor(canvas) {
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.OrthographicCamera(0, this.width, 0, this.height, 0.1, 1e3);
+    this.camera.position.z = 1;
+    this.renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
+    this.renderer.setSize(this.width, this.height);
+    this.renderer.setPixelRatio(window.devicePixelRatio || 1);
+    this.matrix = new THREE.Matrix4().identity();
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.renderer.setSize(width, height);
+    this.camera.right = width;
+    this.camera.bottom = height;
+    this.camera.updateProjectionMatrix();
+  }
+  clear() {
+    for (const obj of this.activeObjects) {
+      this.scene.remove(obj);
+      if (obj instanceof THREE.Mesh || obj instanceof THREE.Line) {
+        obj.geometry.dispose();
+        if (Array.isArray(obj.material)) {
+          for (const mat of obj.material) {
+            mat.dispose();
+            if (mat.map) mat.map.dispose();
+          }
+        } else {
+          obj.material.dispose();
+          if (obj.material.map) {
+            obj.material.map.dispose();
+          }
+        }
+      }
+    }
+    this.activeObjects = [];
+    this.renderer.clear();
+    this.renderer.setScissorTest(false);
+  }
+  save() {
+    this.stack.push(this.matrix.clone());
+    this.alphaStack.push(this.globalAlpha);
+    const box = new THREE.Vector4();
+    this.renderer.getScissor(box);
+    this.scissorStack.push({
+      enabled: this.renderer.getScissorTest(),
+      box
+    });
+  }
+  restore() {
+    if (this.stack.length > 0) this.matrix.copy(this.stack.pop());
+    if (this.alphaStack.length > 0) this.globalAlpha = this.alphaStack.pop();
+    if (this.scissorStack.length > 0) {
+      const state = this.scissorStack.pop();
+      this.renderer.setScissorTest(state.enabled);
+      this.renderer.setScissor(state.box);
+    }
+  }
+  translate(x, y) {
+    const m = new THREE.Matrix4().makeTranslation(x, y, 0);
+    this.matrix.multiply(m);
+  }
+  scale(x, y) {
+    const m = new THREE.Matrix4().makeScale(x, y, 1);
+    this.matrix.multiply(m);
+  }
+  rotate(angle) {
+    const m = new THREE.Matrix4().makeRotationZ(angle);
+    this.matrix.multiply(m);
+  }
+  setGlobalAlpha(alpha) {
+    this.globalAlpha = alpha;
+  }
+  clip(x, y, width, height) {
+    const pos = new THREE.Vector3(x, y, 0).applyMatrix4(this.matrix);
+    const size = new THREE.Vector3(width, height, 0).applyMatrix4(this.matrix).sub(new THREE.Vector3(0, 0, 0).applyMatrix4(this.matrix));
+    const dpr = window.devicePixelRatio || 1;
+    const canvasHeight = this.renderer.domElement.height / dpr;
+    this.renderer.setScissor(
+      pos.x * dpr,
+      (canvasHeight - (pos.y + size.y)) * dpr,
+      size.x * dpr,
+      size.y * dpr
+    );
+    this.renderer.setScissorTest(true);
+  }
+  beginPath() {
+    this.currentPath = new ThreePath();
+  }
+  moveTo(x, y) {
+    this.currentPath?.moveTo(x, y);
+  }
+  lineTo(x, y) {
+    this.currentPath?.lineTo(x, y);
+  }
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.currentPath?.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+  }
+  closePath() {
+    this.currentPath?.closePath();
+  }
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.currentPath?.arc(x, y, radius, startAngle, endAngle, counterclockwise);
+  }
+  roundRect(x, y, width, height, radii) {
+    if (!this.currentPath) return;
+    if (width < 0) {
+      x += width;
+      width = -width;
+    }
+    if (height < 0) {
+      y += height;
+      height = -height;
+    }
+    let r_tl = 0, r_tr = 0, r_br = 0, r_bl = 0;
+    if (typeof radii === "number") {
+      r_tl = r_tr = r_br = r_bl = radii;
+    } else if (Array.isArray(radii)) {
+      if (radii.length === 1) {
+        r_tl = r_tr = r_br = r_bl = radii[0];
+      } else if (radii.length === 2) {
+        r_tl = r_br = radii[0];
+        r_tr = r_bl = radii[1];
+      } else if (radii.length === 3) {
+        r_tl = radii[0];
+        r_tr = r_bl = radii[1];
+        r_br = radii[2];
+      } else if (radii.length >= 4) {
+        r_tl = radii[0];
+        r_tr = radii[1];
+        r_br = radii[2];
+        r_bl = radii[3];
+      }
+    }
+    const tl_tr = r_tl + r_tr;
+    const bl_br = r_bl + r_br;
+    const tl_bl = r_tl + r_bl;
+    const tr_br = r_tr + r_br;
+    let factor = 1;
+    if (tl_tr > width) factor = Math.min(factor, width / tl_tr);
+    if (bl_br > width) factor = Math.min(factor, width / bl_br);
+    if (tl_bl > height) factor = Math.min(factor, height / tl_bl);
+    if (tr_br > height) factor = Math.min(factor, height / tr_br);
+    if (factor < 1) {
+      r_tl *= factor;
+      r_tr *= factor;
+      r_br *= factor;
+      r_bl *= factor;
+    }
+    this.currentPath.moveTo(x + r_tl, y);
+    this.currentPath.lineTo(x + width - r_tr, y);
+    this.currentPath.arc(x + width - r_tr, y + r_tr, r_tr, -Math.PI / 2, 0, false);
+    this.currentPath.lineTo(x + width, y + height - r_br);
+    this.currentPath.arc(x + width - r_br, y + height - r_br, r_br, 0, Math.PI / 2, false);
+    this.currentPath.lineTo(x + r_bl, y + height);
+    this.currentPath.arc(x + r_bl, y + height - r_bl, r_bl, Math.PI / 2, Math.PI, false);
+    this.currentPath.lineTo(x, y + r_tl);
+    this.currentPath.arc(x + r_tl, y + r_tl, r_tl, Math.PI, -Math.PI / 2, false);
+  }
+  drawImage(source, dx, dy, dw, dh) {
+    let texture;
+    if (source instanceof HTMLImageElement || source instanceof HTMLCanvasElement || typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) {
+      texture = new THREE.CanvasTexture(source);
+    } else {
+      texture = new THREE.Texture(source);
+      texture.needsUpdate = true;
+    }
+    texture.minFilter = THREE.LinearFilter;
+    const material = new THREE.MeshBasicMaterial({
+      map: texture,
+      transparent: true,
+      opacity: this.globalAlpha,
+      depthWrite: false
+    });
+    const geometry = new THREE.PlaneGeometry(dw, dh);
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set(dx + dw / 2, dy + dh / 2, 0);
+    mesh.applyMatrix4(this.matrix);
+    this.scene.add(mesh);
+    this.activeObjects.push(mesh);
+  }
+  fill(colorOrGradient) {
+    if (!this.currentPath) return;
+    if (colorOrGradient && colorOrGradient.type === "linear") {
+      const grad = colorOrGradient;
+      const sortedStops = [...grad.colorStops].sort((a, b) => a.stop - b.stop);
+      if (sortedStops.length < 2) {
+        const fallbackColor = sortedStops.length === 1 ? sortedStops[0].color : "#ffffff";
+        this.fillSolidShape(fallbackColor);
+        return;
+      }
+      const finalColors = [];
+      const finalStops = [];
+      if (sortedStops.length > 8) {
+        const lerpColor = (c1, c2, f) => {
+          const rgba1 = parseColorToRGBA(c1);
+          const rgba2 = parseColorToRGBA(c2);
+          return new THREE.Vector4(
+            rgba1[0] + (rgba2[0] - rgba1[0]) * f,
+            rgba1[1] + (rgba2[1] - rgba1[1]) * f,
+            rgba1[2] + (rgba2[2] - rgba1[2]) * f,
+            rgba1[3] + (rgba2[3] - rgba1[3]) * f
+          );
+        };
+        for (let k = 0; k < 8; k++) {
+          const t = k / 7;
+          if (t <= sortedStops[0].stop) {
+            const rgba = parseColorToRGBA(sortedStops[0].color);
+            finalColors.push(new THREE.Vector4(rgba[0], rgba[1], rgba[2], rgba[3]));
+          } else if (t >= sortedStops[sortedStops.length - 1].stop) {
+            const rgba = parseColorToRGBA(sortedStops[sortedStops.length - 1].color);
+            finalColors.push(new THREE.Vector4(rgba[0], rgba[1], rgba[2], rgba[3]));
+          } else {
+            let i = 0;
+            for (let idx = 0; idx < sortedStops.length - 1; idx++) {
+              if (t >= sortedStops[idx].stop && t <= sortedStops[idx + 1].stop) {
+                i = idx;
+                break;
+              }
+            }
+            const gap = sortedStops[i + 1].stop - sortedStops[i].stop;
+            const f = gap > 1e-4 ? (t - sortedStops[i].stop) / gap : 0;
+            finalColors.push(lerpColor(sortedStops[i].color, sortedStops[i + 1].color, f));
+          }
+          finalStops.push(t);
+        }
+      } else {
+        for (let i = 0; i < 8; i++) {
+          const stopIdx = Math.min(i, sortedStops.length - 1);
+          const stop = sortedStops[stopIdx];
+          const rgba = parseColorToRGBA(stop.color);
+          finalColors.push(new THREE.Vector4(rgba[0], rgba[1], rgba[2], rgba[3]));
+          finalStops.push(stop.stop);
+        }
+      }
+      const u_grad_start = new THREE.Vector3(grad.x0, grad.y0, 0).applyMatrix4(this.matrix);
+      const u_grad_end = new THREE.Vector3(grad.x1, grad.y1, 0).applyMatrix4(this.matrix);
+      const shapes = this.currentPath.toShapes();
+      for (const shape of shapes) {
+        const geometry = new THREE.ShapeGeometry(shape);
+        const material = new THREE.ShaderMaterial({
+          uniforms: {
+            u_grad_start: { value: new THREE.Vector2(u_grad_start.x, u_grad_start.y) },
+            u_grad_end: { value: new THREE.Vector2(u_grad_end.x, u_grad_end.y) },
+            u_grad_colors: { value: finalColors },
+            u_grad_stops: { value: finalStops },
+            u_global_alpha: { value: this.globalAlpha }
+          },
+          vertexShader: `
+            varying vec2 v_world_pos;
+            void main() {
+              vec4 worldPos = modelMatrix * vec4(position, 1.0);
+              v_world_pos = worldPos.xy;
+              gl_Position = projectionMatrix * viewMatrix * worldPos;
+            }
+          `,
+          fragmentShader: `
+            varying vec2 v_world_pos;
+            uniform vec2 u_grad_start;
+            uniform vec2 u_grad_end;
+            uniform vec4 u_grad_colors[8];
+            uniform float u_grad_stops[8];
+            uniform float u_global_alpha;
+
+            void main() {
+              vec2 d = u_grad_end - u_grad_start;
+              float d_len_sq = dot(d, d);
+              float t = 0.0;
+              if (d_len_sq > 0.0001) {
+                t = clamp(dot(v_world_pos - u_grad_start, d) / d_len_sq, 0.0, 1.0);
+              }
+              vec4 finalColor = u_grad_colors[7];
+              if (t <= u_grad_stops[0]) {
+                finalColor = u_grad_colors[0];
+              } else {
+                for (int i = 0; i < 7; i++) {
+                  if (t >= u_grad_stops[i] && t <= u_grad_stops[i+1]) {
+                    float gap = u_grad_stops[i+1] - u_grad_stops[i];
+                    float factor = gap > 0.0001 ? (t - u_grad_stops[i]) / gap : 0.0;
+                    finalColor = mix(u_grad_colors[i], u_grad_colors[i+1], factor);
+                    break;
+                  }
+                }
+              }
+              gl_FragColor = vec4(finalColor.rgb, finalColor.a * u_global_alpha);
+            }
+          `,
+          transparent: true,
+          depthWrite: false
+        });
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.applyMatrix4(this.matrix);
+        this.scene.add(mesh);
+        this.activeObjects.push(mesh);
+      }
+    } else {
+      this.fillSolidShape(colorOrGradient);
+    }
+  }
+  fillSolidShape(colorOrGradient) {
+    if (!this.currentPath) return;
+    const color = typeof colorOrGradient === "string" ? colorOrGradient : "#ffffff";
+    const shapes = this.currentPath.toShapes();
+    for (const shape of shapes) {
+      const geometry = new THREE.ShapeGeometry(shape);
+      const material = new THREE.MeshBasicMaterial({
+        color: new THREE.Color(color),
+        transparent: this.globalAlpha < 1,
+        opacity: this.globalAlpha,
+        depthWrite: false
+      });
+      const mesh = new THREE.Mesh(geometry, material);
+      mesh.applyMatrix4(this.matrix);
+      this.scene.add(mesh);
+      this.activeObjects.push(mesh);
+    }
+  }
+  stroke(colorOrGradient, lineWidth = 1) {
+    if (!this.currentPath) return;
+    let color = "#ffffff";
+    if (typeof colorOrGradient === "string") {
+      color = colorOrGradient;
+    } else if (colorOrGradient && colorOrGradient.type === "linear") {
+      const grad = colorOrGradient;
+      if (grad.colorStops && grad.colorStops.length > 0) {
+        color = grad.colorStops[0].color;
+      }
+    }
+    const points = this.currentPath.getPoints();
+    if (points.length === 0) return;
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const material = new THREE.LineBasicMaterial({
+      color: new THREE.Color(color),
+      transparent: this.globalAlpha < 1,
+      opacity: this.globalAlpha,
+      linewidth: lineWidth
+    });
+    const line = new THREE.Line(geometry, material);
+    line.applyMatrix4(this.matrix);
+    this.scene.add(line);
+    this.activeObjects.push(line);
+  }
+  fillText(text, x, y, font, color) {
+    if (typeof document === "undefined") return;
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.font = font;
+    const width = Math.max(1, Math.ceil(ctx.measureText(text).width));
+    const fontSize = parseInt(font) || 16;
+    const height = Math.max(1, Math.ceil(fontSize * 1.5));
+    canvas.width = width;
+    canvas.height = height;
+    ctx.font = font;
+    let fillCol = "#ffffff";
+    if (typeof color === "string") {
+      fillCol = color;
+    } else if (color && color.type === "linear") {
+      const grad = color;
+      if (grad.colorStops && grad.colorStops.length > 0) {
+        fillCol = grad.colorStops[0].color;
+      }
+    }
+    ctx.fillStyle = fillCol;
+    ctx.textBaseline = "alphabetic";
+    ctx.fillText(text, 0, fontSize);
+    const texture = new THREE.CanvasTexture(canvas);
+    texture.minFilter = THREE.LinearFilter;
+    const material = new THREE.MeshBasicMaterial({
+      map: texture,
+      transparent: true,
+      opacity: this.globalAlpha,
+      depthWrite: false
+    });
+    const geometry = new THREE.PlaneGeometry(width, height);
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set(x + width / 2, y - height / 2 + fontSize, 0);
+    mesh.applyMatrix4(this.matrix);
+    this.scene.add(mesh);
+    this.activeObjects.push(mesh);
+  }
+  fillCircle(cx, cy, radius, color, alpha = 1) {
+    const geometry = new THREE.CircleGeometry(radius, 32);
+    const material = new THREE.MeshBasicMaterial({
+      color: new THREE.Color(color),
+      transparent: this.globalAlpha * alpha < 1,
+      opacity: this.globalAlpha * alpha,
+      depthWrite: false
+    });
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set(cx, cy, 0);
+    mesh.applyMatrix4(this.matrix);
+    this.scene.add(mesh);
+    this.activeObjects.push(mesh);
+  }
+  flush() {
+    this.renderer.render(this.scene, this.camera);
+  }
+  createLinearGradient(x0, y0, x1, y1, colorStops) {
+    return new WebGLGradient(x0, y0, x1, y1, colorStops);
+  }
+};
+
+// src/ThreeAdapter.ts
+import * as THREE2 from "three";
+import {
+  Scene as VectoScene,
+  VectoJSEvent
+} from "@vectojs/core";
+var ThreeAdapter = class {
+  /** The Three.js CanvasTexture wrapping the offscreen Vecto canvas. */
+  texture;
+  /** The active VectoJS Scene instance. */
+  vectoScene;
+  /** The offscreen HTMLCanvasElement on which Vecto draws. */
+  canvas;
+  /** A pre-built THREE.Mesh with PlaneGeometry and this texture for immediate use. */
+  mesh;
+  /** Track hover states independently per pointerId for WebXR / Multi-Touch. */
+  activePointers = /* @__PURE__ */ new Map();
+  constructor(options) {
+    this.canvas = options.canvas || (typeof document !== "undefined" ? document.createElement("canvas") : { width: options.width, height: options.height });
+    this.canvas.width = options.width;
+    this.canvas.height = options.height;
+    const sceneOptions = {
+      ...options.sceneOptions,
+      disableWindowResize: true
+    };
+    this.vectoScene = new VectoScene(this.canvas, sceneOptions);
+    this.vectoScene.resize(options.width, options.height);
+    this.texture = new THREE2.CanvasTexture(this.canvas);
+    this.texture.minFilter = THREE2.LinearFilter;
+    this.texture.magFilter = THREE2.LinearFilter;
+    const originalRender = this.vectoScene.render;
+    this.vectoScene.render = (renderer, dt, time) => {
+      originalRender.call(this.vectoScene, renderer, dt, time);
+      this.texture.needsUpdate = true;
+    };
+    const geometry = new THREE2.PlaneGeometry(1, 1);
+    const material = new THREE2.MeshBasicMaterial({
+      map: this.texture,
+      transparent: true,
+      depthWrite: false
+    });
+    this.mesh = new THREE2.Mesh(geometry, material);
+  }
+  /**
+   * Processes 3D Raycasting intersections and forwards pointer/scroll events.
+   * Call this from window/document event listeners passing the raycaster.
+   *
+   * @param raycaster Three.js Raycaster instance.
+   * @param type Pointer event type: 'pointerdown' | 'pointerup' | 'pointermove' | 'wheel' | 'click'.
+   * @param originalEvent Optional original DOM Event to forward scroll deltas or button states.
+   * @returns true if the ray intersected the VectoJS mesh; false otherwise.
+   */
+  updateIntersection(raycaster, type, originalEvent) {
+    const intersects = raycaster.intersectObject(this.mesh);
+    const pointerId = originalEvent instanceof PointerEvent ? originalEvent.pointerId : 1;
+    let state = this.activePointers.get(pointerId);
+    if (!state) {
+      state = { isHovering: false, lastUv: new THREE2.Vector2(), lastTargetId: null };
+      this.activePointers.set(pointerId, state);
+    }
+    if (intersects.length > 0) {
+      const hit = intersects[0];
+      if (hit.uv) {
+        state.lastUv.copy(hit.uv);
+        state.isHovering = true;
+        this.dispatchAtUv(type, hit.uv, pointerId, originalEvent);
+        return true;
+      }
+    }
+    if (state.isHovering) {
+      state.isHovering = false;
+      this.dispatchAtUv("pointerleave", state.lastUv, pointerId, originalEvent);
+    }
+    return false;
+  }
+  /**
+   * Dispatches pointer events mapped from UV coordinates [0, 1] to VectoJS entities.
+   */
+  dispatchAtUv(type, uv, pointerId, originalEvent) {
+    const px = uv.x * this.canvas.width;
+    const py = (1 - uv.y) * this.canvas.height;
+    this.vectoScene.markDirty();
+    const hitEntity = this.vectoScene.findEntityAt(px, py);
+    const state = this.activePointers.get(pointerId);
+    if (state && type === "pointermove") {
+      const currentTargetId = hitEntity ? hitEntity.id : null;
+      if (currentTargetId !== state.lastTargetId) {
+        if (state.lastTargetId) {
+          const oldEntity = this.findEntityById(this.vectoScene.getRoot(), state.lastTargetId);
+          if (oldEntity) {
+            this.dispatchEventToTarget(oldEntity, "pointerleave", px, py, pointerId, originalEvent);
+          }
+        }
+        if (hitEntity) {
+          this.dispatchEventToTarget(hitEntity, "hover", px, py, pointerId, originalEvent);
+        }
+        state.lastTargetId = currentTargetId;
+      }
+    } else if (state && type === "pointerleave") {
+      if (state.lastTargetId) {
+        const oldEntity = this.findEntityById(this.vectoScene.getRoot(), state.lastTargetId);
+        if (oldEntity) {
+          this.dispatchEventToTarget(oldEntity, "pointerleave", px, py, pointerId, originalEvent);
+        }
+      }
+      state.lastTargetId = null;
+    }
+    if (hitEntity) {
+      this.dispatchEventToTarget(hitEntity, type, px, py, pointerId, originalEvent);
+    } else {
+      const fallbackEvent = this.createDOMEvent(type, px, py, pointerId, originalEvent);
+      this.canvas.dispatchEvent(fallbackEvent);
+    }
+  }
+  /**
+   * Routes events to the associated A11y DOM element, or Vecto's own event dispatch system.
+   */
+  dispatchEventToTarget(entity, type, x, y, pointerId, originalEvent) {
+    const a11yEl = this.vectoScene.getA11yElement(entity.id);
+    if (a11yEl) {
+      const domEvent = this.createDOMEvent(type, x, y, pointerId, originalEvent);
+      a11yEl.dispatchEvent(domEvent);
+      if (type === "pointerdown" && (a11yEl instanceof HTMLInputElement || a11yEl instanceof HTMLTextAreaElement || a11yEl.getAttribute("tabindex") !== null)) {
+        a11yEl.focus();
+      }
+    } else {
+      const e = originalEvent instanceof MouseEvent ? originalEvent : void 0;
+      const vectoEvent = new VectoJSEvent(type, entity, e, type !== "pointerleave");
+      entity.dispatchEvent(vectoEvent);
+    }
+  }
+  createDOMEvent(type, x, y, pointerId, originalEvent) {
+    if (type === "wheel") {
+      const wheelE = originalEvent instanceof WheelEvent ? originalEvent : void 0;
+      return new WheelEvent("wheel", {
+        clientX: x,
+        clientY: y,
+        deltaX: wheelE ? wheelE.deltaX : 0,
+        deltaY: wheelE ? wheelE.deltaY : 0,
+        deltaZ: wheelE ? wheelE.deltaZ : 0,
+        deltaMode: wheelE ? wheelE.deltaMode : 0,
+        bubbles: true,
+        cancelable: true
+      });
+    }
+    return new PointerEvent(type, {
+      clientX: x,
+      clientY: y,
+      button: originalEvent instanceof MouseEvent ? originalEvent.button : 0,
+      buttons: originalEvent instanceof MouseEvent ? originalEvent.buttons : 0,
+      pointerId,
+      bubbles: true,
+      cancelable: true
+    });
+  }
+  findEntityById(root, id) {
+    if (root.id === id) return root;
+    for (const child of root.children) {
+      const found = this.findEntityById(child, id);
+      if (found) return found;
+    }
+    return null;
+  }
+  /**
+   * Resizes the offscreen canvas and VectoScene dimensions.
+   */
+  resize(width, height) {
+    this.canvas.width = width;
+    this.canvas.height = height;
+    this.vectoScene.resize(width, height);
+    this.texture.needsUpdate = true;
+  }
+  /**
+   * Disposes of Three.js textures, geometries, and VectoJS scenes to prevent memory leaks.
+   */
+  dispose() {
+    this.texture.dispose();
+    this.mesh.geometry.dispose();
+    if (Array.isArray(this.mesh.material)) {
+      for (const mat of this.mesh.material) mat.dispose();
+    } else {
+      this.mesh.material.dispose();
+    }
+    if (this.mesh.parent) {
+      this.mesh.parent.remove(this.mesh);
+    }
+    this.vectoScene.destroy();
+    this.activePointers.clear();
+    this.canvas.width = 0;
+    this.canvas.height = 0;
+  }
+};
+export {
+  ThreeAdapter,
+  ThreeRenderer,
+  WebGLGradient
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vectojs/three",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "WebGL/Three.js rendering backend for VectoJS",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "@vectojs/core": ">=0.1.0",
+    "three": "^0.160.0"
+  },
+  "devDependencies": {
+    "@vectojs/core": "workspace:*",
+    "@types/three": "^0.160.0",
+    "tsup": "^8.3.5",
+    "vitest": "^4.1.9"
+  }
+}