@d5techs/3dgs-lib 1.4.8 → 1.4.10

package/dist/3dgs-lib.js

@@ -1001,514 +1001,224 @@ class OrbitControls {
     this.velocityPanZ = 0;
   }
 }
-const gizmoShaderCode = (
-  /* wgsl */
-  `
-struct Uniforms {
-  viewMatrix: mat4x4<f32>,
-  projMatrix: mat4x4<f32>,
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-
-struct VertexInput {
-  @location(0) position: vec3<f32>,
-  @location(1) color: vec3<f32>,
-}
-
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) color: vec3<f32>,
-}
-
-@vertex
-fn vs_main(input: VertexInput) -> VertexOutput {
-  var output: VertexOutput;
-  let worldPos = vec4<f32>(input.position, 1.0);
-  output.position = uniforms.projMatrix * uniforms.viewMatrix * worldPos;
-  output.color = input.color;
-  return output;
-}
-
-@fragment
-fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
-  return vec4<f32>(input.color, 1.0);
-}
-`
-);
 class ViewportGizmo {
-  constructor(renderer, camera, canvas) {
-    __publicField(this, "renderer");
+  constructor(_renderer, camera, canvas) {
     __publicField(this, "camera");
     __publicField(this, "canvas");
-    // 渲染资源
-    __publicField(this, "pipeline");
-    __publicField(this, "uniformBuffer");
-    __publicField(this, "bindGroup");
-    __publicField(this, "vertexBuffer");
-    __publicField(this, "indexBuffer");
-    __publicField(this, "vertexCount", 0);
-    __publicField(this, "indexCount", 0);
-    // Gizmo 配置
-    __publicField(this, "size", 200);
-    // Gizmo 尺寸（像素）
-    __publicField(this, "margin", 20);
-    // 边距
-    // Gizmo 投影矩阵
-    __publicField(this, "projMatrix", new Float32Array(16));
-    __publicField(this, "viewMatrix", new Float32Array(16));
-    // 轴配置
-    __publicField(this, "axes", [
-      { direction: [1, 0, 0], color: [0.9, 0.2, 0.2], label: "X" },
-      // 红色 X
-      { direction: [0, 1, 0], color: [0.2, 0.9, 0.2], label: "Y" },
-      // 绿色 Y
-      { direction: [0, 0, 1], color: [0.2, 0.4, 0.9], label: "Z" }
-      // 蓝色 Z
-    ]);
-    // 交互回调
+    __publicField(this, "container");
+    __publicField(this, "svg");
+    __publicField(this, "group");
+    __publicField(this, "shapes");
+    __publicField(this, "size", 140);
+    __publicField(this, "margin", 10);
+    __publicField(this, "scale", 40);
+    __publicField(this, "_visible", false);
     __publicField(this, "onAxisClick");
-    this.renderer = renderer;
+    __publicField(this, "resizeObserver");
     this.camera = camera;
     this.canvas = canvas;
-    this.createPipeline();
-    this.createGeometry();
-    this.createUniformBuffer();
-    this.setupOrthoProjection();
+    this.createSVG();
+    this.setupResizeObserver();
   }
-  /**
-   * 设置轴点击回调
-   */
   setOnAxisClick(callback) {
     this.onAxisClick = callback;
   }
-  /**
-   * 创建渲染管线
-   */
-  createPipeline() {
-    const device = this.renderer.device;
-    const shaderModule = device.createShaderModule({
-      code: gizmoShaderCode
+  createSVG() {
+    const ns = "http://www.w3.org/2000/svg";
+    this.container = document.createElement("div");
+    Object.assign(this.container.style, {
+      position: "absolute",
+      width: `${this.size}px`,
+      height: `${this.size}px`,
+      pointerEvents: "none",
+      zIndex: "10",
+      display: this._visible ? "" : "none"
     });
-    const bindGroupLayout = device.createBindGroupLayout({
-      entries: [
-        {
-          binding: 0,
-          visibility: GPUShaderStage.VERTEX,
-          buffer: { type: "uniform" }
-        }
-      ]
-    });
-    const pipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [bindGroupLayout]
-    });
-    const vertexBufferLayout = {
-      arrayStride: 24,
-      attributes: [
-        { shaderLocation: 0, offset: 0, format: "float32x3" },
-        { shaderLocation: 1, offset: 12, format: "float32x3" }
-      ]
+    this.positionContainer();
+    this.svg = document.createElementNS(ns, "svg");
+    this.svg.setAttribute("width", this.size.toString());
+    this.svg.setAttribute("height", this.size.toString());
+    this.group = document.createElementNS(ns, "g");
+    this.group.setAttribute(
+      "transform",
+      `translate(${this.size / 2}, ${this.size / 2})`
+    );
+    this.svg.appendChild(this.group);
+    const r = "#f44";
+    const g = "#4f4";
+    const b = "#77f";
+    this.shapes = {
+      nx: this.createCircle(r, false),
+      ny: this.createCircle(g, false),
+      nz: this.createCircle(b, false),
+      xaxis: this.createLine(r),
+      yaxis: this.createLine(g),
+      zaxis: this.createLine(b),
+      px: this.createCircle(r, true, "X"),
+      py: this.createCircle(g, true, "Y"),
+      pz: this.createCircle(b, true, "Z")
     };
-    this.pipeline = device.createRenderPipeline({
-      layout: pipelineLayout,
-      vertex: {
-        module: shaderModule,
-        entryPoint: "vs_main",
-        buffers: [vertexBufferLayout]
-      },
-      fragment: {
-        module: shaderModule,
-        entryPoint: "fs_main",
-        targets: [{ format: this.renderer.format }]
-      },
-      primitive: {
-        topology: "triangle-list",
-        cullMode: "none"
-      },
-      depthStencil: {
-        format: this.renderer.depthFormat,
-        depthWriteEnabled: false,
-        depthCompare: "always"
+    this.bindClickEvents();
+    this.container.appendChild(this.svg);
+    const parent = this.canvas.parentElement;
+    if (parent) {
+      const pos = getComputedStyle(parent).position;
+      if (pos === "static") {
+        parent.style.position = "relative";
       }
-    });
+      parent.appendChild(this.container);
+    }
+  }
+  createCircle(color, fill, text) {
+    const ns = this.svg.namespaceURI;
+    const g = document.createElementNS(ns, "g");
+    const circle = document.createElementNS(ns, "circle");
+    circle.setAttribute("fill", fill ? color : "#222");
+    circle.setAttribute("stroke", color);
+    circle.setAttribute("stroke-width", "2");
+    circle.setAttribute("r", "10");
+    circle.setAttribute("cx", "0");
+    circle.setAttribute("cy", "0");
+    circle.setAttribute("pointer-events", "all");
+    g.appendChild(circle);
+    g.setAttribute("cursor", "pointer");
+    if (text) {
+      const t = document.createElementNS(ns, "text");
+      t.setAttribute("font-size", "10");
+      t.setAttribute("font-family", "Arial");
+      t.setAttribute("font-weight", "bold");
+      t.setAttribute("text-anchor", "middle");
+      t.setAttribute("alignment-baseline", "central");
+      t.setAttribute("fill", "#fff");
+      t.setAttribute("pointer-events", "none");
+      t.textContent = text;
+      g.appendChild(t);
+    }
+    this.group.appendChild(g);
+    return g;
+  }
+  createLine(color) {
+    const ns = this.svg.namespaceURI;
+    const line = document.createElementNS(ns, "line");
+    line.setAttribute("stroke", color);
+    line.setAttribute("stroke-width", "2");
+    this.group.appendChild(line);
+    return line;
+  }
+  bindClickEvents() {
+    const bind = (shape, axis, positive) => {
+      const circle = shape.children[0];
+      circle.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        if (this.onAxisClick) {
+          this.onAxisClick(axis, positive);
+        }
+      });
+    };
+    bind(this.shapes.px, "X", true);
+    bind(this.shapes.py, "Y", true);
+    bind(this.shapes.pz, "Z", true);
+    bind(this.shapes.nx, "X", false);
+    bind(this.shapes.ny, "Y", false);
+    bind(this.shapes.nz, "Z", false);
+  }
+  positionContainer() {
+    const parent = this.canvas.parentElement;
+    if (!parent) return;
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const parentRect = parent.getBoundingClientRect();
+    const right = parentRect.right - canvasRect.right + this.margin;
+    const top = canvasRect.top - parentRect.top + this.margin;
+    this.container.style.right = `${right}px`;
+    this.container.style.top = `${top}px`;
   }
-  /**
-   * 创建 Gizmo 几何体（三个轴 + 箭头）
-   */
-  createGeometry() {
-    const vertices = [];
-    const indices = [];
-    let vertexOffset = 0;
-    const axisLength = 0.8;
-    const axisRadius = 0.04;
-    const coneLength = 0.25;
-    const coneRadius = 0.1;
-    const segments = 12;
-    for (const axis of this.axes) {
-      const [dx, dy, dz] = axis.direction;
-      const [r, g, b] = axis.color;
-      const cylResult = this.createCylinder(
-        [0, 0, 0],
-        [dx * axisLength, dy * axisLength, dz * axisLength],
-        axisRadius,
-        segments,
-        [r, g, b],
-        vertexOffset
-      );
-      vertices.push(...cylResult.vertices);
-      indices.push(...cylResult.indices);
-      vertexOffset += cylResult.vertexCount;
-      const coneStart = [
-        dx * axisLength,
-        dy * axisLength,
-        dz * axisLength
-      ];
-      const coneEnd = [
-        dx * (axisLength + coneLength),
-        dy * (axisLength + coneLength),
-        dz * (axisLength + coneLength)
-      ];
-      const coneResult = this.createCone(
-        coneStart,
-        coneEnd,
-        coneRadius,
-        segments,
-        [r, g, b],
-        vertexOffset
-      );
-      vertices.push(...coneResult.vertices);
-      indices.push(...coneResult.indices);
-      vertexOffset += coneResult.vertexCount;
-      const sphereResult = this.createSphere(
-        [-dx * 0.15, -dy * 0.15, -dz * 0.15],
-        0.08,
-        8,
-        [r * 0.6, g * 0.6, b * 0.6],
-        vertexOffset
-      );
-      vertices.push(...sphereResult.vertices);
-      indices.push(...sphereResult.indices);
-      vertexOffset += sphereResult.vertexCount;
-    }
-    const centerResult = this.createSphere(
-      [0, 0, 0],
-      0.1,
-      12,
-      [0.5, 0.5, 0.5],
-      vertexOffset
-    );
-    vertices.push(...centerResult.vertices);
-    indices.push(...centerResult.indices);
-    this.vertexCount = vertices.length / 6;
-    this.indexCount = indices.length;
-    const vertexData = new Float32Array(vertices);
-    const indexData = new Uint16Array(indices);
-    const device = this.renderer.device;
-    this.vertexBuffer = device.createBuffer({
-      size: vertexData.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-    });
-    device.queue.writeBuffer(this.vertexBuffer, 0, vertexData);
-    this.indexBuffer = device.createBuffer({
-      size: indexData.byteLength,
-      usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.positionContainer();
     });
-    device.queue.writeBuffer(this.indexBuffer, 0, indexData);
+    this.resizeObserver.observe(this.canvas);
   }
-  /**
-   * 创建圆柱体几何
-   */
-  createCylinder(start, end, radius, segments, color, indexOffset) {
-    const vertices = [];
-    const indices = [];
-    const dx = end[0] - start[0];
-    const dy = end[1] - start[1];
-    const dz = end[2] - start[2];
-    const length = Math.sqrt(dx * dx + dy * dy + dz * dz);
-    const dir = [dx / length, dy / length, dz / length];
-    const up = Math.abs(dir[1]) < 0.99 ? [0, 1, 0] : [1, 0, 0];
-    const right = this.cross(
-      up,
-      dir
-    );
-    this.normalize(right);
-    const actualUp = this.cross(dir, right);
-    for (let i = 0; i <= segments; i++) {
-      const angle = i / segments * Math.PI * 2;
-      const cos = Math.cos(angle);
-      const sin = Math.sin(angle);
-      const nx0 = right[0] * cos + actualUp[0] * sin;
-      const ny0 = right[1] * cos + actualUp[1] * sin;
-      const nz0 = right[2] * cos + actualUp[2] * sin;
-      vertices.push(
-        start[0] + nx0 * radius,
-        start[1] + ny0 * radius,
-        start[2] + nz0 * radius,
-        color[0],
-        color[1],
-        color[2]
-      );
-      vertices.push(
-        end[0] + nx0 * radius,
-        end[1] + ny0 * radius,
-        end[2] + nz0 * radius,
-        color[0],
-        color[1],
-        color[2]
-      );
-    }
-    for (let i = 0; i < segments; i++) {
-      const i0 = indexOffset + i * 2;
-      const i1 = indexOffset + i * 2 + 1;
-      const i2 = indexOffset + (i + 1) * 2;
-      const i3 = indexOffset + (i + 1) * 2 + 1;
-      indices.push(i0, i1, i2, i2, i1, i3);
-    }
-    return { vertices, indices, vertexCount: (segments + 1) * 2 };
+  get visible() {
+    return this._visible;
   }
-  /**
-   * 创建圆锥几何
-   */
-  createCone(base, tip, radius, segments, color, indexOffset) {
-    const vertices = [];
-    const indices = [];
-    const dx = tip[0] - base[0];
-    const dy = tip[1] - base[1];
-    const dz = tip[2] - base[2];
-    const length = Math.sqrt(dx * dx + dy * dy + dz * dz);
-    const dir = [dx / length, dy / length, dz / length];
-    const up = Math.abs(dir[1]) < 0.99 ? [0, 1, 0] : [1, 0, 0];
-    const right = this.cross(
-      up,
-      dir
-    );
-    this.normalize(right);
-    const actualUp = this.cross(dir, right);
-    vertices.push(tip[0], tip[1], tip[2], color[0], color[1], color[2]);
-    for (let i = 0; i <= segments; i++) {
-      const angle = i / segments * Math.PI * 2;
-      const cos = Math.cos(angle);
-      const sin = Math.sin(angle);
-      const nx = right[0] * cos + actualUp[0] * sin;
-      const ny = right[1] * cos + actualUp[1] * sin;
-      const nz = right[2] * cos + actualUp[2] * sin;
-      vertices.push(
-        base[0] + nx * radius,
-        base[1] + ny * radius,
-        base[2] + nz * radius,
-        color[0],
-        color[1],
-        color[2]
-      );
-    }
-    for (let i = 0; i < segments; i++) {
-      indices.push(indexOffset, indexOffset + i + 1, indexOffset + i + 2);
-    }
-    const baseCenterIdx = indexOffset + segments + 2;
-    vertices.push(
-      base[0],
-      base[1],
-      base[2],
-      color[0] * 0.7,
-      color[1] * 0.7,
-      color[2] * 0.7
-    );
-    for (let i = 0; i < segments; i++) {
-      indices.push(baseCenterIdx, indexOffset + i + 2, indexOffset + i + 1);
+  set visible(v) {
+    this._visible = v;
+    if (this.container) {
+      this.container.style.display = v ? "" : "none";
     }
-    return { vertices, indices, vertexCount: segments + 3 };
   }
   /**
-   * 创建球体几何
+   * 每帧更新 SVG 位置（从相机视图矩阵中提取轴投影）
    */
-  createSphere(center, radius, segments, color, indexOffset) {
-    const vertices = [];
-    const indices = [];
-    const rings = segments / 2;
-    for (let ring = 0; ring <= rings; ring++) {
-      const phi = ring / rings * Math.PI;
-      const sinPhi = Math.sin(phi);
-      const cosPhi = Math.cos(phi);
-      for (let seg = 0; seg <= segments; seg++) {
-        const theta = seg / segments * Math.PI * 2;
-        const x = center[0] + radius * sinPhi * Math.cos(theta);
-        const y = center[1] + radius * cosPhi;
-        const z = center[2] + radius * sinPhi * Math.sin(theta);
-        vertices.push(x, y, z, color[0], color[1], color[2]);
-      }
-    }
-    for (let ring = 0; ring < rings; ring++) {
-      for (let seg = 0; seg < segments; seg++) {
-        const current = indexOffset + ring * (segments + 1) + seg;
-        const next = current + segments + 1;
-        indices.push(current, next, current + 1);
-        indices.push(current + 1, next, next + 1);
+  render(_pass) {
+    if (!this._visible) return;
+    const vm = this.camera.viewMatrix;
+    const vecx = { x: vm[0], y: vm[1], z: vm[2] };
+    const vecy = { x: vm[4], y: vm[5], z: vm[6] };
+    const vecz = { x: vm[8], y: vm[9], z: vm[10] };
+    const s = this.scale;
+    const setTransform = (el, x, y) => {
+      el.setAttribute("transform", `translate(${x * s}, ${y * s})`);
+    };
+    const setLine = (line, x, y) => {
+      line.setAttribute("x2", (x * s).toString());
+      line.setAttribute("y2", (y * s).toString());
+    };
+    setTransform(this.shapes.px, vecx.x, -vecx.y);
+    setTransform(this.shapes.nx, -vecx.x, vecx.y);
+    setTransform(this.shapes.py, vecy.x, -vecy.y);
+    setTransform(this.shapes.ny, -vecy.x, vecy.y);
+    setTransform(this.shapes.pz, vecz.x, -vecz.y);
+    setTransform(this.shapes.nz, -vecz.x, vecz.y);
+    setLine(this.shapes.xaxis, vecx.x, -vecx.y);
+    setLine(this.shapes.yaxis, vecy.x, -vecy.y);
+    setLine(this.shapes.zaxis, vecz.x, -vecz.y);
+    const order = [
+      { keys: ["xaxis", "px"], depth: vecx.z },
+      { keys: ["yaxis", "py"], depth: vecy.z },
+      { keys: ["zaxis", "pz"], depth: vecz.z },
+      { keys: ["nx"], depth: -vecx.z },
+      { keys: ["ny"], depth: -vecy.z },
+      { keys: ["nz"], depth: -vecz.z }
+    ].sort((a, b) => a.depth - b.depth);
+    const fragment = document.createDocumentFragment();
+    for (const item of order) {
+      for (const key of item.keys) {
+        fragment.appendChild(this.shapes[key]);
       }
     }
-    return { vertices, indices, vertexCount: (rings + 1) * (segments + 1) };
+    this.group.appendChild(fragment);
   }
   /**
-   * 创建 uniform buffer
+   * 点击检测 — SVG 版本通过 DOM 事件处理，此方法仅保留接口兼容
    */
-  createUniformBuffer() {
-    const device = this.renderer.device;
-    this.uniformBuffer = device.createBuffer({
-      size: 128,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
-    this.bindGroup = device.createBindGroup({
-      layout: bindGroupLayout,
-      entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }]
-    });
-  }
-  /**
-   * 设置正交投影矩阵
-   */
-  setupOrthoProjection() {
-    const s = 1.5;
-    this.projMatrix[0] = 1 / s;
-    this.projMatrix[5] = 1 / s;
-    this.projMatrix[10] = -1 / 10;
-    this.projMatrix[14] = 0;
-    this.projMatrix[15] = 1;
-  }
-  /**
-   * 更新 Gizmo 视图矩阵（从相机提取旋转部分）
-   */
-  updateViewMatrix() {
-    const camView = this.camera.viewMatrix;
-    this.viewMatrix[0] = camView[0];
-    this.viewMatrix[1] = camView[1];
-    this.viewMatrix[2] = camView[2];
-    this.viewMatrix[3] = 0;
-    this.viewMatrix[4] = camView[4];
-    this.viewMatrix[5] = camView[5];
-    this.viewMatrix[6] = camView[6];
-    this.viewMatrix[7] = 0;
-    this.viewMatrix[8] = camView[8];
-    this.viewMatrix[9] = camView[9];
-    this.viewMatrix[10] = camView[10];
-    this.viewMatrix[11] = 0;
-    this.viewMatrix[12] = 0;
-    this.viewMatrix[13] = 0;
-    this.viewMatrix[14] = -3;
-    this.viewMatrix[15] = 1;
-  }
-  /**
-   * 渲染 Gizmo
-   */
-  render(pass) {
-    this.updateViewMatrix();
-    const dpr = window.devicePixelRatio || 1;
-    let gizmoSize = Math.floor(this.size * dpr);
-    const marginX = Math.floor(this.margin * dpr);
-    const marginY = Math.floor(this.margin * dpr);
-    const maxSize = Math.min(
-      this.canvas.width - marginX * 2,
-      this.canvas.height - marginY * 2
-    );
-    if (maxSize < 50) {
-      return;
-    }
-    gizmoSize = Math.min(gizmoSize, maxSize);
-    const x = Math.max(0, this.canvas.width - gizmoSize - marginX);
-    const y = marginY;
-    pass.setViewport(x, y, gizmoSize, gizmoSize, 0, 1);
-    pass.setScissorRect(x, y, gizmoSize, gizmoSize);
-    this.renderer.device.queue.writeBuffer(
-      this.uniformBuffer,
-      0,
-      new Float32Array(this.viewMatrix)
-    );
-    this.renderer.device.queue.writeBuffer(
-      this.uniformBuffer,
-      64,
-      new Float32Array(this.projMatrix)
-    );
-    pass.setPipeline(this.pipeline);
-    pass.setBindGroup(0, this.bindGroup);
-    pass.setVertexBuffer(0, this.vertexBuffer);
-    pass.setIndexBuffer(this.indexBuffer, "uint16");
-    pass.drawIndexed(this.indexCount);
-    pass.setViewport(0, 0, this.canvas.width, this.canvas.height, 0, 1);
-    pass.setScissorRect(0, 0, this.canvas.width, this.canvas.height);
-  }
-  /**
-   * 处理点击事件，检测是否点击了某个轴
-   */
-  handleClick(clientX, clientY) {
-    const rect = this.canvas.getBoundingClientRect();
-    const gizmoSize = this.size;
-    const marginX = this.margin;
-    const marginY = this.margin;
-    const gizmoLeft = rect.right - gizmoSize - marginX;
-    const gizmoTop = rect.top + marginY;
-    const gizmoRight = gizmoLeft + gizmoSize;
-    const gizmoBottom = gizmoTop + gizmoSize;
-    if (clientX < gizmoLeft || clientX > gizmoRight || clientY < gizmoTop || clientY > gizmoBottom) {
-      return false;
-    }
-    const relX = (clientX - gizmoLeft) / gizmoSize * 2 - 1;
-    const relY = -((clientY - gizmoTop) / gizmoSize * 2 - 1);
-    const clickedAxis = this.detectClickedAxis(relX, relY);
-    if (clickedAxis && this.onAxisClick) {
-      this.onAxisClick(clickedAxis.axis, clickedAxis.positive);
-      return true;
-    }
+  handleClick(_clientX, _clientY) {
     return false;
   }
-  /**
-   * 检测点击了哪个轴
-   */
-  detectClickedAxis(relX, relY) {
-    const threshold = 0.4;
-    for (const axis of this.axes) {
-      const [dx, dy, dz] = axis.direction;
-      const posX = this.viewMatrix[0] * dx + this.viewMatrix[4] * dy + this.viewMatrix[8] * dz;
-      const posY = this.viewMatrix[1] * dx + this.viewMatrix[5] * dy + this.viewMatrix[9] * dz;
-      const distPos = Math.sqrt(
-        (relX - posX * 0.5) ** 2 + (relY - posY * 0.5) ** 2
-      );
-      if (distPos < threshold) {
-        return { axis: axis.label, positive: true };
-      }
-      const distNeg = Math.sqrt(
-        (relX + posX * 0.15) ** 2 + (relY + posY * 0.15) ** 2
-      );
-      if (distNeg < threshold * 0.5) {
-        return { axis: axis.label, positive: false };
-      }
-    }
-    return null;
-  }
-  // 向量工具函数
-  cross(a, b) {
-    return [
-      a[1] * b[2] - a[2] * b[1],
-      a[2] * b[0] - a[0] * b[2],
-      a[0] * b[1] - a[1] * b[0]
-    ];
-  }
-  normalize(v) {
-    const len = Math.sqrt(v[0] ** 2 + v[1] ** 2 + v[2] ** 2);
-    if (len > 0) {
-      v[0] /= len;
-      v[1] /= len;
-      v[2] /= len;
-    }
-  }
-  /**
-   * 设置 Gizmo 大小
-   */
   setSize(size) {
     this.size = size;
+    if (this.container) {
+      this.container.style.width = `${size}px`;
+      this.container.style.height = `${size}px`;
+      this.svg.setAttribute("width", size.toString());
+      this.svg.setAttribute("height", size.toString());
+      this.group.setAttribute(
+        "transform",
+        `translate(${size / 2}, ${size / 2})`
+      );
+      this.positionContainer();
+    }
   }
-  /**
-   * 设置边距
-   */
   setMargin(margin) {
     this.margin = margin;
+    this.positionContainer();
+  }
+  destroy() {
+    var _a2;
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    (_a2 = this.container) == null ? void 0 : _a2.remove();
   }
 }
 class BoundingBoxRenderer {
@@ -13531,6 +13241,9 @@ class GizmoManager {
   getViewportGizmo() {
     return this.viewportGizmo;
   }
+  setViewportGizmoVisible(visible) {
+    this.viewportGizmo.visible = visible;
+  }
   // ============================================
   // Bounding Box
   // ============================================
@@ -13590,6 +13303,7 @@ class GizmoManager {
     this.canvas.removeEventListener("pointermove", this.boundOnPointerMove);
     this.canvas.removeEventListener("pointerdown", this.boundOnPointerDown);
     this.canvas.removeEventListener("pointerup", this.boundOnPointerUp);
+    this.viewportGizmo.destroy();
     this.transformGizmo.destroy();
     this.boundingBoxRenderer.destroy();
   }
@@ -16831,6 +16545,9 @@ class App {
   getViewportGizmo() {
     return this.gizmoManager.getViewportGizmo();
   }
+  setViewportGizmoVisible(visible) {
+    this.gizmoManager.setViewportGizmoVisible(visible);
+  }
   getBoundingBoxRenderer() {
     return this.gizmoManager.getBoundingBoxRenderer();
   }