@realsee/dnalogel 3.81.13 → 4.0.0-webgpu.4

package/dist/internal/CSS3DObject-C9ck81UX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSS3DObject-C9ck81UX.js","names":["OpacityMesh","Subscribe","centerPoint","getObjectVisible","isNil","THREE","CSS3DObject","Object3D","element","object","CSS3DSprite","CSS3DRenderer","_this","_width","_height","_widthHalf","_heightHalf","matrix","Matrix4","cache","domElement","cameraElement","width","height","epsilon","value","getCameraCSSMatrix","elements","getObjectCSSMatrix","hideObject","objectMode","mode","i","l","hasHiddenAncestor","parent","renderObject","scene","flag","visible","camera","style","cameraCSSMatrix","cachedObject","objectData","fov","tx","ty","scenes","even","roundNum","num","config","createResizeObserver","resizeObserverHandler","observer","fireImmediately","ICSS3DRenderer","wrapper","oldWrapper","observe","unobserve","_render","behindFiveElements","getBehindFiveElement","existing","five","generateBehindFiveElement","checkElement","behind","position","OpecityMesh","material","geometry","VERSION","NAME","MinRatio","CSS3DObjectPlus","params","container","cornerPoints","halfWidth","Vector3","ratio","dpr","pointerEvents","realRatio","planeWidth","planeHeight","domWidthPx","domHeightPx","centerPosition","css3DObjectElement","scale","targetVector01","targetVector03","targetNormal","up","targetUp","rotateAxis","opacityMesh","quaternion","css3DObject","mesh"],"sources":["../../src/shared-utils/three/CSS3DRenderer/index.js","../../src/shared-utils/even.ts","../../src/shared-utils/createResizeObserver.ts","../../src/shared-utils/CSS3DRender/CSS3DRenderer.ts","../../src/CSS3DRenderPlugin/utils/generateBehindFiveElement.ts","../../src/shared-utils/CSS3DRender/OpacityMesh.ts","../../src/CSS3DRenderPlugin/utils/three/CSS3DObject.ts"],"sourcesContent":["/* eslint-disable */\n/**\n * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs\n * @author mrdoob / http://mrdoob.com/\n * @author yomotsu / https://yomotsu.net/\n */\n\nimport { Matrix4, Object3D } from 'three/webgpu'\n\nclass CSS3DObject extends Object3D {\n  constructor(element) {\n    super()\n\n    this.element = element\n    this.element.style.position = 'absolute'\n    this.element.style.pointerEvents = 'auto'\n    this.element.style.userSelect = 'none'\n\n    this.element.setAttribute('draggable', false)\n\n    this.addEventListener('removed', function () {\n      this.traverse(function (object) {\n        if (object.element instanceof Element && object.element.parentNode !== null) {\n          object.element.remove()\n        }\n      })\n    })\n  }\n}\n\nclass CSS3DSprite extends CSS3DObject {}\n\nlet CSS3DRenderer = function (mode /** 'front' | 'behind' */) {\n  let _this = this\n\n  let _width\n  let _height\n  let _widthHalf\n  let _heightHalf\n\n  let matrix = new Matrix4()\n\n  let cache = {\n    camera: { fov: 0, style: '' },\n    objects: new Map(),\n  }\n\n  let domElement = document.createElement('div')\n  domElement.style.overflow = 'hidden'\n\n  this.domElement = domElement\n\n  let cameraElement = document.createElement('div')\n\n  cameraElement.style.WebkitTransformStyle = 'preserve-3d'\n  cameraElement.style.transformStyle = 'preserve-3d'\n  cameraElement.style.pointerEvents = 'none'\n\n  domElement.appendChild(cameraElement)\n\n  this.getSize = function () {\n    return {\n      width: _width,\n      height: _height,\n    }\n  }\n\n  this.setSize = function (width, height) {\n    _width = width\n    _height = height\n    _widthHalf = _width / 2\n    _heightHalf = _height / 2\n\n    domElement.style.width = width + 'px'\n    domElement.style.height = height + 'px'\n\n    cameraElement.style.width = width + 'px'\n    cameraElement.style.height = height + 'px'\n  }\n\n  function epsilon(value) {\n    return Math.abs(value) < 1e-10 ? 0 : value\n  }\n\n  function getCameraCSSMatrix(matrix) {\n    let elements = matrix.elements\n\n    return (\n      'matrix3d(' +\n      epsilon(elements[0]) +\n      ',' +\n      epsilon(-elements[1]) +\n      ',' +\n      epsilon(elements[2]) +\n      ',' +\n      epsilon(elements[3]) +\n      ',' +\n      epsilon(elements[4]) +\n      ',' +\n      epsilon(-elements[5]) +\n      ',' +\n      epsilon(elements[6]) +\n      ',' +\n      epsilon(elements[7]) +\n      ',' +\n      epsilon(elements[8]) +\n      ',' +\n      epsilon(-elements[9]) +\n      ',' +\n      epsilon(elements[10]) +\n      ',' +\n      epsilon(elements[11]) +\n      ',' +\n      epsilon(elements[12]) +\n      ',' +\n      epsilon(-elements[13]) +\n      ',' +\n      epsilon(elements[14]) +\n      ',' +\n      epsilon(elements[15]) +\n      ')'\n    )\n  }\n\n  function getObjectCSSMatrix(matrix, cameraCSSMatrix) {\n    let elements = matrix.elements\n    let matrix3d =\n      'matrix3d(' +\n      epsilon(elements[0]) +\n      ',' +\n      epsilon(elements[1]) +\n      ',' +\n      epsilon(elements[2]) +\n      ',' +\n      epsilon(elements[3]) +\n      ',' +\n      epsilon(-elements[4]) +\n      ',' +\n      epsilon(-elements[5]) +\n      ',' +\n      epsilon(-elements[6]) +\n      ',' +\n      epsilon(-elements[7]) +\n      ',' +\n      epsilon(elements[8]) +\n      ',' +\n      epsilon(elements[9]) +\n      ',' +\n      epsilon(elements[10]) +\n      ',' +\n      epsilon(elements[11]) +\n      ',' +\n      epsilon(elements[12]) +\n      ',' +\n      epsilon(elements[13]) +\n      ',' +\n      epsilon(elements[14]) +\n      ',' +\n      epsilon(elements[15]) +\n      ')'\n\n    return 'translate(-50%,-50%)' + matrix3d\n  }\n\n  function hideObject(object) {\n    if (object.isCSS3DObject) {\n      const objectMode = object.mode ?? 'front'\n      if (!mode || objectMode === mode) {\n        object.element.style.display = 'none'\n      }\n    }\n\n    for (let i = 0, l = object.children.length; i < l; i++) {\n      hideObject(object.children[i])\n    }\n  }\n\n  // Registered CSS roots can be children of a normal Three Group. Rendering\n  // one directly must still respect that group's visibility, including a root\n  // registered or populated after the group was hidden.\n  function hasHiddenAncestor(object) {\n    for (let parent = object.parent; parent; parent = parent.parent) {\n      if (parent.visible === false) return true\n    }\n    return false\n  }\n\n  function renderObject(object, scene, camera, cameraCSSMatrix, flag) {\n    if (object.visible === false || (object === scene && hasHiddenAncestor(object))) {\n      hideObject(object)\n\n      return\n    }\n\n    if (object.isCSS3DObject) {\n      const objectMode = object.mode ?? 'front'\n      if (mode && objectMode !== mode) return\n      object.flag = flag\n\n      const visible = object.layers.test(camera.layers) === true\n\n      const element = object.element\n      element.style.display = visible === true ? '' : 'none'\n\n      if (visible) {\n        object.onBeforeRender(_this, scene, camera)\n\n        let style\n\n        if (object.isCSS3DSprite) {\n          // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/\n\n          matrix.copy(camera.matrixWorldInverse)\n          matrix.transpose()\n          matrix.copyPosition(object.matrixWorld)\n          matrix.scale(object.scale)\n\n          matrix.elements[3] = 0\n          matrix.elements[7] = 0\n          matrix.elements[11] = 0\n          matrix.elements[15] = 1\n\n          style = getObjectCSSMatrix(matrix, cameraCSSMatrix)\n        } else {\n          style = getObjectCSSMatrix(object.matrixWorld, cameraCSSMatrix)\n        }\n\n        let cachedObject = cache.objects.get(object)\n\n        if (cachedObject === undefined || cachedObject.style !== style) {\n          element.style.WebkitTransform = style\n          element.style.transform = style\n\n          let objectData = { style: style }\n\n          cache.objects.set(object, objectData)\n        }\n\n        element.style.display = object.visible ? '' : 'none'\n\n        if (element.parentNode !== cameraElement) {\n          cameraElement.appendChild(element)\n        }\n\n        object.onAfterRender(_this, scene, camera)\n      }\n    }\n\n    for (let i = 0, l = object.children.length; i < l; i++) {\n      renderObject(object.children[i], scene, camera, cameraCSSMatrix, flag)\n    }\n  }\n\n  this.render = function (scene, camera) {\n    let fov = camera.projectionMatrix.elements[5] * _heightHalf\n\n    if (cache.camera.fov !== fov) {\n      if (camera.isPerspectiveCamera) {\n        domElement.style.WebkitPerspective = fov + 'px'\n        domElement.style.perspective = fov + 'px'\n      } else {\n        domElement.style.WebkitPerspective = ''\n        domElement.style.perspective = ''\n      }\n\n      cache.camera.fov = fov\n    }\n\n    if (scene.matrixWorldAutoUpdate === true) scene.updateMatrixWorld()\n    if (camera.parent === null) camera.updateMatrixWorld()\n\n    if (camera.isOrthographicCamera) {\n      var tx = -(camera.right + camera.left) / 2\n      var ty = (camera.top + camera.bottom) / 2\n    }\n\n    let cameraCSSMatrix = camera.isOrthographicCamera\n      ? 'scale(' +\n        fov +\n        ')' +\n        'translate(' +\n        epsilon(tx) +\n        'px,' +\n        epsilon(ty) +\n        'px)' +\n        getCameraCSSMatrix(camera.matrixWorldInverse)\n      : 'translateZ(' + fov + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse)\n\n    let style = cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'\n\n    if (cache.camera.style !== style) {\n      cameraElement.style.WebkitTransform = style\n      cameraElement.style.transform = style\n\n      cache.camera.style = style\n    }\n\n    const flag = scene.uuid + '_' + performance.now().toString()\n    renderObject(scene, scene, camera, cameraCSSMatrix, flag)\n\n    cache.objects.forEach(function (objectData, object) {\n      if (object.flag !== flag) {\n        // Another renderer may already own this object's DOM after reparenting.\n        if (object.element.parentNode === cameraElement) object.element.remove()\n        cache.objects.delete(object)\n      }\n    })\n  }\n\n  this.sceneRender = function (scenes, camera) {\n    let fov = camera.projectionMatrix.elements[5] * _heightHalf\n\n    if (cache.camera.fov !== fov) {\n      if (camera.isPerspectiveCamera) {\n        domElement.style.WebkitPerspective = fov + 'px'\n        domElement.style.perspective = fov + 'px'\n      } else {\n        domElement.style.WebkitPerspective = ''\n        domElement.style.perspective = ''\n      }\n\n      cache.camera.fov = fov\n    }\n\n    // if (scene.autoUpdate === true) scene.updateMatrixWorld()\n    if (camera.parent === null) camera.updateMatrixWorld()\n\n    if (camera.isOrthographicCamera) {\n      var tx = -(camera.right + camera.left) / 2\n      var ty = (camera.top + camera.bottom) / 2\n    }\n\n    let cameraCSSMatrix = camera.isOrthographicCamera\n      ? 'scale(' +\n        fov +\n        ')' +\n        'translate(' +\n        epsilon(tx) +\n        'px,' +\n        epsilon(ty) +\n        'px)' +\n        getCameraCSSMatrix(camera.matrixWorldInverse)\n      : 'translateZ(' + fov + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse)\n\n    let style = cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'\n\n    if (cache.camera.style !== style) {\n      cameraElement.style.WebkitTransform = style\n      cameraElement.style.transform = style\n\n      cache.camera.style = style\n    }\n    const flag = performance.now().toString()\n\n    scenes.forEach((scene) => {\n      if (scene.matrixWorldAutoUpdate === true) scene.updateMatrixWorld()\n      renderObject(scene, scene, camera, cameraCSSMatrix, flag)\n    })\n\n    cache.objects.forEach(function (objectData, object) {\n      if (object.flag !== flag) {\n        // Another renderer may already own this object's DOM after reparenting.\n        if (object.element.parentNode === cameraElement) object.element.remove()\n        cache.objects.delete(object)\n      }\n    })\n  }\n}\n\nexport { CSS3DRenderer, CSS3DObject, CSS3DSprite }\n","/**\n * @description: 获取一个数字的最近的偶数\n * @param { number } num\n * @param { boolean } config.floor 是否取较小的偶数，默认为false，即取较大的偶数\n * @return { number } 返回一个偶数\n */\nexport function even(num: number, config?: { floor?: boolean }): number {\n  const roundNum = Math.round(num)\n  return roundNum % 2 === 0 ? roundNum : roundNum + Number(config?.floor ? -1 : 1)\n}\n","import { even } from './even'\n\nexport default function createResizeObserver(\n  element: Element,\n  resizeHandler: (width: number, height: number) => any,\n  fireImmediately = true,\n) {\n  if (!element) {\n    console.error('createResizeObserver: element is undefined')\n    return { observe: () => {}, unobserve: () => {} }\n  }\n\n  const resizeObserverHandler = () => {\n    /**\n     * 这里even策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环\n     * 所以为了规避上面这种情况，even设置了一个参数，遇到奇数可选择减一\n     */\n    const width = even(element.clientWidth, { floor: true })\n    const height = even(element.clientHeight, { floor: true })\n    resizeHandler(width, height)\n  }\n\n  if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {\n    console.warn('createResizeObserver: ResizeObserver is undefined')\n    return { observe: () => resizeObserverHandler(), unobserve: () => {} }\n  }\n\n  const observer = new ResizeObserver(resizeObserverHandler)\n  if (fireImmediately) resizeObserverHandler()\n  return {\n    observe: () => observer.observe(element),\n    unobserve: () => observer.unobserve(element),\n  }\n}\n","import type * as THREE from 'three/webgpu'\nimport { CSS3DRenderer } from '../three/CSS3DRenderer' // version 117\nimport createResizeObserver from '../createResizeObserver'\nimport type { CSS3DObjectPlus } from './CSS3DObject'\n\nexport class ICSS3DRenderer extends CSS3DRenderer {\n  public wrapper?: Element\n\n  public domElementWrapper = document.createElement('div')\n\n  private requestAnimationFrameId?: number\n\n  private resizeDisoper?: () => void\n\n  private disposed = false\n\n  public constructor(mode?: 'front' | 'behind') {\n    super(mode)\n    this.domElementWrapper.classList.add('ICSS3DRendererWrapper')\n    this.domElementWrapper.style.position = 'absolute'\n    this.domElementWrapper.style.top = '0'\n    this.domElementWrapper.style.left = '0'\n    this.domElementWrapper.style.width = '100%'\n    this.domElementWrapper.style.height = '100%'\n    this.domElementWrapper.style.userSelect = 'none'\n    this.domElementWrapper.style.pointerEvents = 'none'\n\n    this.domElement.classList.add('ICSS3DRenderer')\n    this.domElement.style.position = 'absolute'\n    this.domElement.style.top = '0'\n    this.domElement.style.left = '0'\n    this.domElement.style.userSelect = 'none'\n    this.domElement.style.pointerEvents = 'none'\n\n    this.domElementWrapper.appendChild(this.domElement)\n  }\n\n  public setWrapper(wrapper: Element) {\n    if (!wrapper) throw new Error('CSS3DRenderer: wrapper is required')\n\n    const contain = (() => {\n      for (let i = 0; i < wrapper.children.length; i++) {\n        const child = wrapper.children.item(i)\n        if (child === this.domElementWrapper) return true\n      }\n      return false\n    })()\n    if (contain) return\n\n    const oldWrapper = this.wrapper\n    if (oldWrapper) {\n      if (oldWrapper.contains(this.domElementWrapper)) {\n        this.domElementWrapper.remove()\n      }\n    }\n    this.appendToElement(wrapper)\n    this.wrapper = wrapper\n    return this\n  }\n\n  public appendToElement(wrapper: Element) {\n    if (this.disposed) return\n    this.resizeDisoper?.()\n    wrapper.appendChild(this.domElementWrapper)\n    const reSize = (width: number, height: number) => this.setSize(width, height)\n    const { observe, unobserve } = createResizeObserver(this.domElementWrapper, reSize, true)\n    observe()\n    this.resizeDisoper = unobserve\n    this.wrapper = wrapper\n  }\n\n  public renderEveryFrame(scene: THREE.Scene, camera: THREE.Camera) {\n    if (!this.wrapper)\n      console.warn('wrapper is not find, creating a html element and call setWrapper(wrapper)', this, scene)\n    if (this.disposed || this.requestAnimationFrameId !== undefined) return\n    const _render = () => {\n      if (this.disposed) return\n      this.requestAnimationFrameId = requestAnimationFrame(_render)\n      if (!scene.visible) return\n      this.render(scene, camera)\n    }\n    _render()\n  }\n\n  public renderCss3dObjectEveryFrame(\n    scenes:\n      | THREE.Scene[]\n      | Map<string, THREE.Scene | CSS3DObjectPlus>\n      | (() => Iterable<THREE.Scene | CSS3DObjectPlus>),\n    camera: THREE.Camera,\n  ) {\n    if (!this.wrapper)\n      console.warn('wrapper is not find, creating a html element and call setWrapper(wrapper)', this, scenes)\n    if (this.disposed || this.requestAnimationFrameId !== undefined) return\n    const _render = () => {\n      if (this.disposed) return\n      this.requestAnimationFrameId = requestAnimationFrame(_render)\n\n      if (Array.isArray(scenes)) {\n        // 处理数组形式\n        scenes.forEach((scene) => {\n          if (scene.visible) {\n            this.render(scene, camera)\n          }\n        })\n      } else {\n        // 处理 Map 对象形式\n        this.sceneRender(Array.from(typeof scenes === 'function' ? scenes() : scenes.values()) as any, camera)\n      }\n    }\n    _render()\n  }\n\n  public stopRender() {\n    if (this.requestAnimationFrameId !== undefined) {\n      cancelAnimationFrame(this.requestAnimationFrameId)\n      this.requestAnimationFrameId = undefined\n    }\n  }\n\n  public dispose() {\n    if (this.disposed) return\n    this.disposed = true\n    this.stopRender()\n    this.resizeDisoper?.()\n    this.resizeDisoper = undefined\n    this.wrapper = undefined\n    this.domElementWrapper.remove()\n  }\n}\n","import type { Five } from '@realsee/five-webgpu'\n\nconst behindFiveElements = new WeakMap<Five, HTMLDivElement>()\n\nfunction getBehindFiveElement(five: Five) {\n  const existing = behindFiveElements.get(five)\n  if (existing) return existing\n  const element = document.createElement('div')\n  element.classList.add('behindFiveElement')\n  Object.assign(element.style, {\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n  })\n  behindFiveElements.set(five, element)\n  return element\n}\n\nexport default function generateBehindFiveElement(five: Five) {\n  const element =\n    checkElement(five.getElement()) ??\n    checkElement(five.getElement()?.parentElement) ??\n    checkElement(five.getElement()?.parentElement?.parentElement)\n  const wrapper = element?.parentElement\n  if (!wrapper || !element) {\n    console.error(\n      'Can not find a valid element to insert behindFiveElement. How to fix it: https://github.com/realsee-developer/dnalogel/tree/main/plugins/src/CSS3DRenderPlugin/README.md',\n    )\n    return\n  }\n\n  const behind = getBehindFiveElement(five)\n  if (!wrapper.contains(behind)) wrapper.insertBefore(behind, element)\n  return behind\n}\n\nfunction checkElement(element?: HTMLElement | null) {\n  if (!element) return\n\n  const position = element.style.position || getComputedStyle(element).position\n  if (position !== 'fixed' && position !== 'absolute' && position !== 'relative') return\n\n  const style = getComputedStyle(element)\n  const backgroundNotTransparent =\n    style.backgroundColor !== 'transparent' &&\n    style.backgroundColor !== 'rgba(0, 0, 0, 0)' &&\n    style.backgroundColor !== ''\n  if (backgroundNotTransparent) return\n  if (style.backgroundImage !== 'none' && style.backgroundImage !== '') return\n  return element\n}\n\nexport { generateBehindFiveElement }\n","import * as THREE from 'three/webgpu'\n\nexport default class OpecityMesh extends THREE.Mesh {\n  public name = 'opacity-mesh'\n\n  public constructor(width: number, height: number) {\n    const material = new THREE.MeshBasicMaterial({ opacity: 0, color: 0x000000, transparent: false, side: THREE.DoubleSide })\n    const geometry = new THREE.PlaneGeometry(width, height)\n    super(geometry, material)\n  }\n\n  public removeFromParent() {\n    const parent = this.parent\n\n    if (parent !== null) {\n      parent.remove(this)\n    }\n\n    return this\n  }\n}\n","import type { Matrix4, Quaternion, Scene } from 'three/webgpu'\nimport { Vector3 } from 'three/webgpu'\nimport { even } from '../../../shared-utils/even'\nimport { Subscribe } from '../../../shared-utils/Subscribe'\nimport OpacityMesh from '../../../shared-utils/CSS3DRender/OpacityMesh'\nimport { centerPoint } from '../../../shared-utils/three/centerPoint'\nimport { getObjectVisible } from '../../../shared-utils/three/getObjectVisible'\nimport { isNil } from '../../../shared-utils'\nimport { CSS3DObject } from '../../../shared-utils/three/CSS3DRenderer'\n\n/**\n * @changelog\n *  - 1: Fix rotate\n *  - 0: Add `applyScaleMatrix4` method, Rewrite `applyQuaternion` and `applyMatrix4` method\n */\nconst VERSION = 1\n\nconst NAME = `CSS3DObjectPlus@${VERSION}`\n\nexport const MinRatio = 0.00216\n\nexport const DefaultRatio = 0.003\n\nexport type Mode = 'front' | 'behind'\n\nexport type CornerPoints = [Vector3, Vector3, Vector3, Vector3]\n\n\nexport type CSS3DRenderEventMap = {\n  applyMatrix4: (matrix: Matrix4) => void\n  applyQuaternion: (quaternion: Quaternion) => void\n  applyScaleMatrix4: (matrix: Matrix4) => void\n}\n\nexport class CSS3DObjectPlus<T extends HTMLElement = HTMLElement> extends CSS3DObject {\n  public version = VERSION\n  public readonly isCSS3DObjectPlus: true = true\n  public readonly isCSS3DObject: true = true\n  public name: string = NAME\n\n  public container: T\n  public width: number\n  public height: number\n  public domWidthPx: number\n  public domHeightPx: number\n  public cornerPoints: CornerPoints\n  public centerPosition: Vector3\n  public ratio: number\n  public mode: 'front' | 'behind' = 'front'\n\n  public readonly hooks: Subscribe<CSS3DRenderEventMap> = new Subscribe()\n\n  public opacityMesh?: OpacityMesh\n\n  private selfVisible = true\n\n  public constructor(params: {\n    container?: T\n    mode?: 'front' | 'behind'\n    width?: number\n    cornerPoints?: CornerPoints\n    ratio?: number\n    dpr?: number\n    pointerEvents?: 'none' | 'auto'\n    style?: Partial<CSSStyleDeclaration>\n  }) {\n    if (isNil(params.cornerPoints) && isNil(params.width)) {\n      throw new Error('cornerPoints and width cannot be both empty')\n    }\n    const container = params.container ?? (document.createElement('div') as unknown as T)\n    const cornerPoints =\n      params.cornerPoints ??\n      (() => {\n        const halfWidth = params.width / 2\n        return [\n          new Vector3(-halfWidth, halfWidth, 0),\n          new Vector3(-halfWidth, -halfWidth, 0),\n          new Vector3(halfWidth, -halfWidth, 0),\n          new Vector3(halfWidth, halfWidth, 0),\n        ]\n      })()\n    const ratio = params.ratio ?? DefaultRatio\n    const dpr = params.dpr ?? 1\n    const pointerEvents = params.pointerEvents ?? 'auto'\n\n    const realRatio = Math.max(MinRatio, ratio)\n    const planeWidth = cornerPoints[0].distanceTo(cornerPoints[1])\n    const planeHeight = cornerPoints[1].distanceTo(cornerPoints[2])\n    const domWidthPx = even((planeWidth / ratio) * dpr)\n    const domHeightPx = even((planeHeight / ratio) * dpr)\n    const centerPosition = centerPoint(...cornerPoints)\n\n    let css3DObjectElement: HTMLElement\n\n    if (realRatio === ratio) {\n      container.style.width = `${domWidthPx}px`\n      container.style.height = `${domHeightPx}px`\n\n      css3DObjectElement = container\n    } else {\n      // 兼容ratio小于0.00216的情况\n      const element = document.createElement('div')\n      element.style.width = `${domWidthPx}px`\n      element.style.height = `${domHeightPx}px`\n      element.style.pointerEvents = 'none'\n\n      const scale = ratio / realRatio\n      container.style.position = 'absolute'\n      container.style.left = '0'\n      container.style.top = '0'\n      container.style.width = `${scale * domWidthPx}px`\n      container.style.height = `${scale * domHeightPx}px`\n      element.appendChild(container)\n\n      css3DObjectElement = element\n    }\n\n    super(css3DObjectElement)\n\n    // 注意设置pointerEvents要在super之后，否则会被覆盖\n    container.style.pointerEvents = pointerEvents\n    Object.assign(container.style, params.style)\n\n    this.scale.set(realRatio, realRatio, realRatio)\n\n    // set public property\n    this.cornerPoints = cornerPoints\n    this.ratio = ratio\n    this.container = container\n    if (params.mode) this.mode = params.mode\n\n    if (realRatio === ratio) {\n      this.width = planeWidth\n      this.height = planeHeight\n      this.domWidthPx = domWidthPx\n      this.domHeightPx = domHeightPx\n      this.centerPosition = centerPosition\n    } else {\n      const scale = ratio / realRatio\n\n      this.width = scale * planeWidth\n      this.height = scale * planeHeight\n      this.domWidthPx = scale * domWidthPx\n      this.domHeightPx = scale * domHeightPx\n      this.centerPosition = new Vector3().subVectors(centerPosition, cornerPoints[0]).multiplyScalar(scale).add(cornerPoints[0])\n    }\n    // end\n\n    container.classList.add(`${NAME}__container`)\n\n    const targetVector01 = new Vector3().subVectors(cornerPoints[1], cornerPoints[0]) // 点0 -> 点1 的向量\n    const targetVector03 = new Vector3().subVectors(cornerPoints[3], cornerPoints[0]) // 点0 -> 点3 的向量\n\n    // 旋转法向量\n    const targetNormal = new Vector3().crossVectors(targetVector01, targetVector03).normalize() // 旋转后的法向量\n    this.lookAt(targetNormal)\n\n    // 绕法向量旋转\n    const up = this.up.clone().applyQuaternion(this.quaternion)\n    const targetUp = targetVector03.clone()\n    const rotateAxis = new Vector3().crossVectors(up, targetUp).normalize() // 计算旋转轴\n    this.rotateOnWorldAxis(rotateAxis, up.angleTo(targetUp))\n\n    // set position\n    this.position.copy(centerPosition)\n\n    // listener\n    this.addEventListener('added', () => {\n      if (this.mode === 'front') this.opacityMesh?.removeFromParent()\n    })\n\n    this.addEventListener('removed', () => {\n      this.opacityMesh?.removeFromParent()\n    })\n  }\n\n  public setVisible = (visible: boolean) => {\n    this.selfVisible = visible\n\n    this.visible = getObjectVisible(this.parent) && this.selfVisible\n\n    if (this.opacityMesh) this.opacityMesh.visible = this.visible\n  }\n\n  public updateVisible = () => {\n    this.setVisible(this.selfVisible)\n  }\n\n  public removeFromParent() {\n    const parent = this.parent\n    if (parent !== null) {\n      parent.remove(this)\n    }\n    this.opacityMesh?.removeFromParent()\n    return this\n  }\n\n  public removeOpacityMesh() {\n    this.opacityMesh?.removeFromParent()\n    this.opacityMesh = undefined\n    return this\n  }\n\n  public dispose() {\n    this.container.remove()\n    this.removeFromParent()\n    this.opacityMesh?.removeFromParent()\n  }\n\n  public getOpacityMesh() {\n    if (this.opacityMesh) return this.opacityMesh\n    else {\n      const opacityMesh = this.createOpacityMesh(this)\n      this.opacityMesh = opacityMesh\n      return opacityMesh\n    }\n  }\n\n  public applyMatrix4(matrix: Matrix4): void {\n    super.applyMatrix4(matrix)\n    this.opacityMesh?.applyMatrix4(matrix)\n  }\n\n  public applyQuaternion(quaternion: Quaternion) {\n    super.applyQuaternion(quaternion)\n    this.opacityMesh?.applyQuaternion(quaternion)\n    return this\n  }\n\n  public applyScaleMatrix4(matrix: Matrix4) {\n    this.scale.applyMatrix4(matrix)\n    this.opacityMesh?.scale.applyMatrix4(matrix)\n  }\n\n  /**\n   * @description: 生成透明Mesh\n   */\n  private createOpacityMesh = (css3DObject: CSS3DObjectPlus) => {\n    const { domWidthPx, domHeightPx } = css3DObject\n    const mesh = new OpacityMesh(domWidthPx, domHeightPx)\n    mesh.position.copy(css3DObject.position)\n    mesh.rotation.copy(css3DObject.rotation)\n    mesh.scale.copy(css3DObject.scale)\n    return mesh\n  }\n}\n"],"mappings":"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"}

package/dist/internal/CSS3DRender-BKWjq-Mo.js

@@ -0,0 +1,297 @@
+import { t as e } from "./Subscribe-DLlAl88n.js";
+import { i as t, o as n, t as r } from "./CSS3DObject-C9ck81UX.js";
+import { i, t as a } from "./util-vGeVT4oo.js";
+import * as o from "three/webgpu";
+//#region src/CSS3DRenderPlugin/utils/getAllCSS3DObject.ts
+function s(e) {
+	let t = [];
+	return a(e).forEach((e) => {
+		e.traverse((e) => {
+			(e.isCSS3DObjectPlus || e.isCSS3DObject || e.isCSS3DSprite) && t.push(e);
+		});
+	}), t;
+}
+//#endregion
+//#region src/CSS3DRenderPlugin/utils/three/CSS3DScene.ts
+var c = class extends o.Scene {
+	constructor() {
+		super();
+	}
+	add(...e) {
+		return super.add(...e), s(e).forEach((e) => {
+			e.mode = "front";
+		}), this;
+	}
+}, l = class extends o.Scene {
+	scene;
+	constructor(e) {
+		if (super(), !e) throw Error("CSS3DBehindScene: scene is required");
+		this.scene = e;
+	}
+	add(...e) {
+		return super.add(...e), s(e).forEach((e) => {
+			e.mode = "behind", this.scene.add(e.getOpacityMesh());
+		}), this;
+	}
+	remove(...e) {
+		return s(e).forEach((e) => {
+			e.opacityMesh?.removeFromParent(), e.opacityMesh = null;
+		}), super.remove(...e), this;
+	}
+}, u = class extends o.Group {
+	isCSS3DGroup = !0;
+	mode;
+	CSS3DObjectLength = 0;
+	constructor(e) {
+		super(), this.mode = e;
+	}
+	add(...e) {
+		return s(e).forEach((e) => {
+			e.mode = this.mode;
+		}), super.add(...e), this.updateLength(), this;
+	}
+	setVisible(e) {
+		this.visible = e, this.traverse((e) => {
+			e.isCSS3DObjectPlus && e.updateVisible();
+		});
+	}
+	remove(...e) {
+		return super.remove(...e), this.updateLength(), this;
+	}
+	updateLength() {
+		this.CSS3DObjectLength = s(this).length;
+	}
+}, d = class extends u {
+	constructor() {
+		super("front");
+	}
+}, f = class extends u {
+	scene;
+	constructor(e) {
+		if (super("behind"), !e) throw Error("CSS3DBehindScene: scene is required");
+		this.scene = e;
+	}
+	add(...e) {
+		return s(e).forEach((e) => {
+			this.scene.add(e.getOpacityMesh());
+		}), super.add(...e), this;
+	}
+}, p = 3, m = "CSS3DRenderer", h = `${m}@${p}`, g = () => {
+	console.error(`${h} is disposed`);
+}, _ = {
+	css3DObjects: [],
+	frontModeStore: {},
+	behindModeStore: {}
+};
+function v(e) {
+	return _.css3DObjects.find((t) => t.id === e);
+}
+function y() {
+	return _.frontModeStore.css3DRenderer ??= new t();
+}
+function b() {
+	return _.behindModeStore.css3DRenderer ??= new t();
+}
+function x(e) {
+	y().setWrapper(e);
+}
+function S(e) {
+	b().setWrapper(e);
+}
+var C = class {
+	static setFrontModeContainer = x;
+	static setBehindModeContainer = S;
+	hooks = new e();
+	state = {
+		enabled: !0,
+		visible: !0,
+		disposed: !1
+	};
+	get scene() {
+		return this._scene || console.error("scene doesn't exist!, please call setScene(scene) first"), this._scene;
+	}
+	_scene;
+	store = { frontModeGroup: new d() };
+	static get frontModeCSS3DRenderer() {
+		return y();
+	}
+	static get behindModeCSS3DRenderer() {
+		return b();
+	}
+	get frontModeCSS3DRenderer() {
+		return y();
+	}
+	get behindModeCSS3DRenderer() {
+		return b();
+	}
+	constructor(e) {
+		e && this.setScene(e);
+	}
+	setScene(e) {
+		this._scene = e;
+	}
+	getCurrentState() {
+		return this.state;
+	}
+	setState(e, t = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		let n = { ...this.state };
+		this.state = Object.assign(this.state, e), n.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), n.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), n.disposed !== this.state.disposed && this.handleDispose(), this.hooks.emit("stateChange", {
+			state: this.state,
+			prevState: n,
+			userAction: t.userAction
+		});
+	}
+	dispose() {
+		this.setState({ disposed: !0 }), this.hooks.emit("dispose");
+	}
+	async show({ userAction: e } = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		this.setState({ visible: !0 }, { userAction: e }), this.hooks.emit("show", { userAction: e });
+	}
+	async hide({ userAction: e } = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		this.setState({ visible: !1 }, { userAction: e }), this.hooks.emit("hide", { userAction: e });
+	}
+	enable({ userAction: e } = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		this.setState({ enabled: !0 }, { userAction: e }), this.hooks.emit("enable", { userAction: e });
+	}
+	disable({ userAction: e } = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		this.setState({ enabled: !1 }, { userAction: e }), this.hooks.emit("disable", { userAction: e });
+	}
+	create3DElement = (e, t, n) => {
+		if (this.state.disposed) return g();
+		let r = (() => {
+			let e = {
+				ratio: .00216,
+				devicePixelRatio: 1,
+				mode: "front",
+				autoRender: !0,
+				container: document.createElement("div"),
+				pointerEvents: "none",
+				wrapperStyle: {}
+			};
+			return Object.assign(e, n);
+		})(), a = t.map(i);
+		if (a?.length < 4) return console.error(`${h}: requires 4 point but params may have fewer`);
+		let { ratio: o, devicePixelRatio: s, mode: c, autoRender: l, container: u, pointerEvents: d, wrapperStyle: f } = r, p = !1, m = this.createObject(a, {
+			ratio: o,
+			dpr: s,
+			container: u,
+			mode: c,
+			pointerEvents: d,
+			wrapperStyle: f
+		});
+		_.css3DObjects.push(m), r.scene && this.setScene(r.scene);
+		let v = () => {
+			if (p) return;
+			let e = m.mode === "front" ? this.getFrontCSS3DObjectGroup() : this.getBehindCSS3DObjectGroup();
+			e && e.add(m);
+		}, x = () => {
+			p || (v(), this.render(e), this.hooks.emit("render"));
+		}, S = (e) => this.setVisibleById(m.id, e), C = (e) => this.setEnabledById(m.id, e), w = () => (p = !0, m.removeFromParent(), !0), T = c === "front" ? y() : b();
+		return l && x(), {
+			id: m.uuid,
+			container: u,
+			css3DObject: m,
+			render: l ? void 0 : x,
+			show: () => S(!0),
+			hide: () => S(!1),
+			setVisible: S,
+			enable: () => C(!0),
+			disable: () => C(!1),
+			setEnabled: C,
+			dispose: w,
+			appendToElement: (e) => T.setWrapper(e)
+		};
+	};
+	getFrontCSS3DScene({ createSceneIfNotExists: e = !1 } = {}) {
+		let t = _.frontModeStore?.css3DScene;
+		if (t) return t;
+		if (e) {
+			let e = new c();
+			_.frontModeStore.css3DScene = e;
+		}
+		return _.frontModeStore.css3DScene;
+	}
+	getBehindCSS3DScene({ createSceneIfNotExists: e = !1 } = {}) {
+		let t = _.behindModeStore?.css3DScene;
+		if (t) return t;
+		if (e) {
+			let e = _.behindModeStore.scene ?? this.scene;
+			if (!e) {
+				console.error(`${h}: scene is required when mode is behind`);
+				return;
+			}
+			let t = new l(e);
+			_.behindModeStore.css3DScene = t, _.behindModeStore.scene = e;
+		}
+		return _.behindModeStore.css3DScene;
+	}
+	getFrontCSS3DObjectGroup({ addGroupIfNotExists: e = !0 } = {}) {
+		let t = this.getFrontCSS3DScene({ createSceneIfNotExists: e });
+		return e && t && (t.getObjectById(this.store.frontModeGroup.id) || t.add(this.store.frontModeGroup)), this.store.frontModeGroup;
+	}
+	getBehindCSS3DObjectGroup({ addGroupIfNotExists: e = !0 } = {}) {
+		let t = this.getBehindCSS3DScene({ createSceneIfNotExists: e });
+		if (e && t && this.scene) {
+			let e = this.store.behindModeGroup ?? new f(this.scene);
+			this.store.behindModeGroup = e, t.getObjectById(e.id) || t.add(e);
+		}
+		return this.store.behindModeGroup;
+	}
+	setVisibleById = (e, t) => {
+		v(e)?.setVisible(t);
+	};
+	setEnabledById = (e, t) => {
+		let n = v(e);
+		if (!n) return;
+		let r = n.mode === "front" ? this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: !1 }) : this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: !1 });
+		r && (t ? r.add(n) : r.remove(n));
+	};
+	render(e) {
+		if (this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: !1 }).CSS3DObjectLength > 0) {
+			let t = this.getFrontCSS3DScene({ createSceneIfNotExists: !0 });
+			if (!t) return console.error(`${h}: css3DScene is required when mode is front`);
+			y().renderEveryFrame(t, e);
+		}
+		if ((this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: !1 })?.CSS3DObjectLength ?? 0) > 0) {
+			let t = this.getBehindCSS3DScene({ createSceneIfNotExists: !0 });
+			if (!t) return console.error(`${h}: css3DScene is required when mode is behind`);
+			b().renderEveryFrame(t, e);
+		}
+	}
+	createObject = (e, t) => {
+		let n = new r({
+			cornerPoints: e,
+			...t,
+			style: t.wrapperStyle
+		});
+		return n.element.classList.add(`${m}__container`), n.element.id = `${m}__container--${n.uuid}`, n;
+	};
+	async handleShow() {
+		this.store.frontModeGroup.setVisible(!0), this.store.behindModeGroup?.setVisible(!0);
+	}
+	async handleHide() {
+		this.store.frontModeGroup.setVisible(!1), this.store.behindModeGroup?.setVisible(!1);
+	}
+	handleEnable() {
+		this.getFrontCSS3DScene()?.add(this.store.frontModeGroup), this.store.behindModeGroup && this.getBehindCSS3DScene()?.add(this.store.behindModeGroup);
+	}
+	handleDisable() {
+		this.store.frontModeGroup.children.forEach((e) => {
+			e instanceof n && e.element instanceof Element && e.element.parentNode !== null && e.element.remove();
+		}), this.store.behindModeGroup?.children.forEach((e) => {
+			e instanceof n && e.element instanceof Element && e.element.parentNode !== null && e.element.remove();
+		}), this.getFrontCSS3DScene()?.remove(this.store.frontModeGroup), this.store.behindModeGroup && this.getBehindCSS3DScene()?.remove(this.store.behindModeGroup);
+	}
+	handleDispose() {
+		this.handleDisable();
+	}
+};
+//#endregion
+export { C as t };
+
+//# sourceMappingURL=CSS3DRender-BKWjq-Mo.js.map

package/dist/internal/CSS3DRender-BKWjq-Mo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSS3DRender-BKWjq-Mo.js","names":["CSS3DRenderer","Subscribe","ICSS3DRenderer","CSS3DObject","CSS3DObjectPlus","toArray","THREE","getAllCSS3DObject","css3DObjectPlus","object","CSS3DFrontScene","objects","CSS3DBehindScene","scene","CSS3DGroup","mode","visible","CSS3DFrontGroup","CSS3DBehindGroup","VERSION","PLUGIN_NAME","PLUGIN","disposedErrorLog","globalStore","getCSS3DObjectById","c","id","getFrontModeRenderer","getBehindModeRenderer","setFrontModeContainer","container","setBehindModeContainer","CSS3DRender","prevState","state","options","config","defaultConfig","params","vector3Points","points","anyPositionToVector3","dpr","disposed","css3DObject","renderCSS3DObject","group","render","camera","setVisible","setEnabled","enabled","dispose","css3DRenderer","autoRender","element","css3DScene","createSceneIfNotExists","css3DFrontScene","s","css3DBehindScene","addGroupIfNotExists","behindModeGroup"],"sources":["../../src/CSS3DRenderPlugin/utils/getAllCSS3DObject.ts","../../src/CSS3DRenderPlugin/utils/three/CSS3DScene.ts","../../src/CSS3DRenderPlugin/utils/three/CSS3DGroup.ts","../../src/CSS3DRenderPlugin/utils/three/CSS3DRender.ts"],"sourcesContent":["import type { Object3D } from 'three/webgpu'\nimport type { CSS3DObjectPlus } from './three/CSS3DObject'\nimport { toArray } from '../../shared-utils/util'\n\nexport default function getAllCSS3DObject(object: Object3D[] | Object3D) {\n  const css3DObjectPlus: CSS3DObjectPlus[] = []\n  const objects = toArray(object)\n  objects.forEach((object) => {\n    object.traverse((object) => {\n      if ((object as any).isCSS3DObjectPlus || (object as any).isCSS3DObject || (object as any).isCSS3DSprite) {\n        css3DObjectPlus.push(object as CSS3DObjectPlus)\n      }\n    })\n  })\n  return css3DObjectPlus\n}\n","import type { Object3D } from 'three/webgpu'\nimport * as THREE from 'three/webgpu'\nimport getAllCSS3DObject from '../getAllCSS3DObject'\n\nexport class CSS3DFrontScene extends THREE.Scene {\n  public constructor() {\n    super()\n  }\n  public add(...objects: Object3D[]) {\n    super.add(...objects)\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      css3DObjectPlus.mode = 'front'\n    })\n    return this\n  }\n}\n\nexport class CSS3DBehindScene extends THREE.Scene {\n  private scene: THREE.Scene\n\n  public constructor(scene: THREE.Scene) {\n    super()\n    if (!scene) throw new Error('CSS3DBehindScene: scene is required')\n    this.scene = scene\n  }\n\n  public add(...objects: Object3D[]) {\n    super.add(...objects)\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      css3DObjectPlus.mode = 'behind'\n      this.scene.add(css3DObjectPlus.getOpacityMesh())\n    })\n    return this\n  }\n\n  public remove(...objects: Object3D[]) {\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      css3DObjectPlus.opacityMesh?.removeFromParent()\n      css3DObjectPlus.opacityMesh = null\n    })\n    super.remove(...objects)\n    return this\n  }\n}\n","import * as THREE from 'three/webgpu'\nimport type { Object3D } from 'three/webgpu'\nimport getAllCSS3DObject from '../getAllCSS3DObject'\nimport type { CSS3DObjectPlus, Mode } from './CSS3DObject'\n\nexport class CSS3DGroup extends THREE.Group {\n  public readonly isCSS3DGroup = true\n\n  public mode: Mode\n\n  public CSS3DObjectLength = 0\n\n  public constructor(mode: Mode) {\n    super()\n    this.mode = mode\n  }\n\n  public add(...objects: Object3D[]) {\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      css3DObjectPlus.mode = this.mode\n    })\n    super.add(...objects)\n    this.updateLength()\n    return this\n  }\n\n  public setVisible(visible: boolean) {\n    this.visible = visible\n    this.traverse((object) => {\n      if ((object as any).isCSS3DObjectPlus) {\n        ;(object as CSS3DObjectPlus).updateVisible()\n      }\n    })\n  }\n\n  public remove(...objects: Object3D[]) {\n    super.remove(...objects)\n    this.updateLength()\n    return this\n  }\n\n  private updateLength() {\n    this.CSS3DObjectLength = getAllCSS3DObject(this).length\n  }\n}\n\nexport class CSS3DFrontGroup extends CSS3DGroup {\n  public constructor() {\n    super('front')\n  }\n}\n\nexport class CSS3DBehindGroup extends CSS3DGroup {\n  private scene: THREE.Scene\n\n  public constructor(scene: THREE.Scene) {\n    super('behind')\n    if (!scene) throw new Error('CSS3DBehindScene: scene is required')\n    this.scene = scene\n  }\n\n  public add(...objects: Object3D[]) {\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      this.scene.add(css3DObjectPlus.getOpacityMesh())\n    })\n    super.add(...objects)\n    return this\n  }\n}\n","import type * as THREE from 'three/webgpu'\nimport type { Vector3 } from 'three/webgpu'\nimport { anyPositionToVector3, type AnyPosition } from '../../../shared-utils/positionToVector3'\nimport { ICSS3DRenderer as CSS3DRenderer } from './CSS3DRenderer'\nimport type { Merge } from 'type-fest'\nimport { Subscribe } from '../../../shared-utils/Subscribe'\nimport { CSS3DObjectPlus } from './CSS3DObject'\nimport { CSS3DBehindScene, CSS3DFrontScene } from './CSS3DScene'\nimport { CSS3DBehindGroup, CSS3DFrontGroup } from './CSS3DGroup'\nimport { CSS3DObject } from '../../../shared-utils/three/CSS3DRenderer'\n\n/**\n * @changelog\n *  - v3: 重构\n */\nconst VERSION = 3\n\nconst PLUGIN_NAME = 'CSS3DRenderer'\n\nexport const PLUGIN = `${PLUGIN_NAME}@${VERSION}`\n\nconst disposedErrorLog = () => {\n  console.error(`${PLUGIN} is disposed`)\n}\n\nexport interface CSS3DRenderState {\n  enabled: boolean\n  visible: boolean\n  disposed: boolean\n}\n\n\nexport type CSS3DRenderEventMap = {\n  show: (options?: { userAction?: boolean }) => void\n  hide: (options?: { userAction?: boolean }) => void\n  enable: (options?: { userAction?: boolean }) => void\n  disable: (options?: { userAction?: boolean }) => void\n  render: () => void\n  dispose: () => void\n  /**\n   * 插件状态变化\n   * @param params.state      最新的State\n   * @param params.prevState  上一个State\n   * @param params.userAction 是否是用户触发\n   */\n  stateChange: (params: { state: CSS3DRenderState; prevState?: CSS3DRenderState; userAction: boolean }) => void\n}\n\nexport interface Create3DDElementParamsType {\n  points: AnyPosition[]\n  config?: {\n    ratio?: number\n    devicePixelRatio?: number\n    autoRender?: boolean\n    container?: HTMLElement\n    pointerEvents?: 'none' | 'auto'\n    wrapperStyle?: Partial<CSSStyleDeclaration>\n    scene?: THREE.Scene\n  } & ({ mode?: 'front' } | { mode: 'behind'; scene: THREE.Scene })\n}\n\nexport const globalStore: {\n  frontModeResizeObserver?: {\n    observe: () => void\n    unobserve: () => void\n  }\n  behindModeResizeObserver?: {\n    observe: () => void\n    unobserve: () => void\n  }\n  css3DObjects: CSS3DObjectPlus[]\n  frontModeStore: {\n    css3DScene?: CSS3DFrontScene\n    css3DRenderer?: CSS3DRenderer\n    container?: HTMLElement\n  }\n  behindModeStore: {\n    css3DScene?: CSS3DBehindScene\n    css3DRenderer?: CSS3DRenderer\n    container?: HTMLElement\n    scene?: THREE.Scene\n    camera?: THREE.Camera\n  }\n} = {\n  css3DObjects: [],\n  frontModeStore: {},\n  behindModeStore: {},\n}\n\nfunction getCSS3DObjectById(id: number) {\n  return globalStore.css3DObjects.find((c) => c.id === id)\n}\n\nfunction getFrontModeRenderer() {\n  return (globalStore.frontModeStore.css3DRenderer ??= new CSS3DRenderer())\n}\n\nfunction getBehindModeRenderer() {\n  return (globalStore.behindModeStore.css3DRenderer ??= new CSS3DRenderer())\n}\n\nfunction setFrontModeContainer(container: HTMLElement) {\n  getFrontModeRenderer().setWrapper(container)\n}\nfunction setBehindModeContainer(container: HTMLElement) {\n  getBehindModeRenderer().setWrapper(container)\n}\n\nexport class CSS3DRender {\n  public static setFrontModeContainer = setFrontModeContainer\n\n  public static setBehindModeContainer = setBehindModeContainer\n\n  public hooks: Subscribe<CSS3DRenderEventMap> = new Subscribe()\n\n  public state: CSS3DRenderState = {\n    enabled: true,\n    visible: true,\n    disposed: false,\n  }\n\n  public get scene() {\n    if (!this._scene) console.error(\"scene doesn't exist!, please call setScene(scene) first\")\n    return this._scene\n  }\n\n  private _scene?: THREE.Scene\n\n  private store: {\n    frontModeGroup: CSS3DFrontGroup\n    behindModeGroup?: CSS3DBehindGroup\n  } = {\n    frontModeGroup: new CSS3DFrontGroup(),\n  }\n\n  public static get frontModeCSS3DRenderer() {\n    return getFrontModeRenderer()\n  }\n\n  public static get behindModeCSS3DRenderer() {\n    return getBehindModeRenderer()\n  }\n\n  public get frontModeCSS3DRenderer() {\n    return getFrontModeRenderer()\n  }\n\n  public get behindModeCSS3DRenderer() {\n    return getBehindModeRenderer()\n  }\n\n\n  public constructor(scene?: THREE.Scene) {\n    if (scene) this.setScene(scene)\n  }\n\n  public setScene(scene: THREE.Scene) {\n    this._scene = scene\n  }\n\n  public getCurrentState() {\n    return this.state\n  }\n\n  public setState(state: Partial<CSS3DRenderState>, options: { userAction: boolean } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    const prevState = { ...this.state }\n    this.state = Object.assign(this.state, state)\n    if (prevState.visible !== this.state.visible) {\n      state.visible ? this.handleShow() : this.handleHide()\n    }\n    if (prevState.enabled !== this.state.enabled) {\n      state.enabled ? this.handleEnable() : this.handleDisable()\n    }\n    if (prevState.disposed !== this.state.disposed) {\n      this.handleDispose()\n    }\n    this.hooks.emit('stateChange', { state: this.state, prevState, userAction: options.userAction })\n  }\n\n  public dispose() {\n    this.setState({ disposed: true })\n    this.hooks.emit('dispose')\n  }\n\n  public async show({ userAction } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    this.setState({ visible: true }, { userAction })\n    this.hooks.emit('show', { userAction })\n  }\n\n  public async hide({ userAction } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    this.setState({ visible: false }, { userAction })\n    this.hooks.emit('hide', { userAction })\n  }\n\n  public enable({ userAction } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    this.setState({ enabled: true }, { userAction })\n    this.hooks.emit('enable', { userAction })\n  }\n\n  public disable({ userAction } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    this.setState({ enabled: false }, { userAction })\n    this.hooks.emit('disable', { userAction })\n  }\n\n  /**\n   * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中\n   * @param { Vector3Position[] } points 矩形四个点坐标\n   * @param params 均为可选值\n   * @config_document `params` 均为可选值\n   *  | key                   | type                       | defaultValue        | comment |\n   *  | -                     | -                          | -                   | -       |\n   *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |\n   *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |\n   *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`\n   *  | `pointerEvents`       | *`'none'\\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |\n   *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |\n   *  | `mode`                | *`'front'\\|'behind'`*      | `front`             | 两种模式:|\n   *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |\n   *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |\n   *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |\n   *\n   * @return\n   * ```typescript\n   *    {\n   *      id: string,                             // id\n   *      container: HTMLDIVElement               // dom容器\n   *      dispose: () => void                     // 销毁\n   *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例\n   *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined\n   *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)\n   *      show: () => void                        // 同 setVisible(true)\n   *      hide: () => void                        // 同 setVisible(false)\n   *      setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)\n   *      enable: () => void                      // 同 setEnabled(true)\n   *      disable: () => void                     // 同 setEnabled(false)\n   *    } | void\n   * ```\n   */\n  public create3DElement = (\n    camera: THREE.Camera,\n    points: Create3DDElementParamsType['points'],\n    params?: Create3DDElementParamsType['config'],\n  ) => {\n    if (this.state.disposed) return disposedErrorLog()\n    // ==== init ====\n    const config = (() => {\n      const defaultConfig = {\n        ratio: 0.00216,\n        devicePixelRatio: 1,\n        mode: 'front',\n        autoRender: true,\n        container: document.createElement('div'),\n        pointerEvents: 'none',\n        wrapperStyle: {},\n      }\n      return Object.assign(defaultConfig, params) as Merge<typeof defaultConfig, typeof params>\n    })()\n\n    const vector3Points = points.map(anyPositionToVector3) as [Vector3, Vector3, Vector3, Vector3]\n    if (vector3Points?.length < 4) return console.error(`${PLUGIN}: requires 4 point but params may have fewer`)\n\n    const { ratio, devicePixelRatio: dpr, mode, autoRender, container, pointerEvents, wrapperStyle } = config\n    // ==== init END ====\n\n    let disposed = false\n    const css3DObject = this.createObject(vector3Points, { ratio, dpr, container, mode, pointerEvents, wrapperStyle })\n\n    globalStore.css3DObjects.push(css3DObject)\n\n    if (config.scene) this.setScene(config.scene)\n\n    const renderCSS3DObject = () => {\n      if (disposed) return\n      const group = css3DObject.mode === 'front' ? this.getFrontCSS3DObjectGroup() : this.getBehindCSS3DObjectGroup()\n      if (!group) return\n      group.add(css3DObject)\n    }\n\n    const render = () => {\n      if (disposed) return\n      renderCSS3DObject()\n      this.render(camera)\n      this.hooks.emit('render')\n    }\n\n    const setVisible = (visible: boolean) => this.setVisibleById(css3DObject.id, visible)\n    const setEnabled = (enabled: boolean) => this.setEnabledById(css3DObject.id, enabled)\n    const dispose = () => {\n      disposed = true\n      css3DObject.removeFromParent()\n      return true\n    }\n\n    const css3DRenderer = mode === 'front' ? getFrontModeRenderer() : getBehindModeRenderer()\n\n    if (autoRender) render()\n\n    return {\n      id: css3DObject.uuid,\n      container,\n      css3DObject,\n      render: autoRender ? undefined : render,\n      show: () => setVisible(true),\n      hide: () => setVisible(false),\n      setVisible,\n      enable: () => setEnabled(true),\n      disable: () => setEnabled(false),\n      setEnabled,\n      dispose,\n      appendToElement: (element: Element) => css3DRenderer.setWrapper(element),\n    }\n  }\n\n  public getFrontCSS3DScene({ createSceneIfNotExists = false } = {}) {\n    const css3DScene = globalStore.frontModeStore?.css3DScene\n    if (css3DScene) return css3DScene\n    else {\n      // not exists\n      if (createSceneIfNotExists) {\n        const css3DFrontScene = new CSS3DFrontScene()\n        globalStore.frontModeStore.css3DScene = css3DFrontScene\n      }\n      return globalStore.frontModeStore.css3DScene\n    }\n  }\n\n  public getBehindCSS3DScene({ createSceneIfNotExists = false } = {}) {\n    const css3DScene = globalStore.behindModeStore?.css3DScene\n    if (css3DScene) return css3DScene\n    else {\n      // not exists\n      if (createSceneIfNotExists) {\n        const s = globalStore.behindModeStore.scene ?? this.scene\n        if (!s) {\n          console.error(`${PLUGIN}: scene is required when mode is behind`)\n          return\n        }\n        const css3DBehindScene = new CSS3DBehindScene(s)\n        globalStore.behindModeStore.css3DScene = css3DBehindScene\n        globalStore.behindModeStore.scene = s\n      }\n      return globalStore.behindModeStore.css3DScene\n    }\n  }\n\n  public getFrontCSS3DObjectGroup({ addGroupIfNotExists = true } = {}) {\n    const css3DScene = this.getFrontCSS3DScene({ createSceneIfNotExists: addGroupIfNotExists })\n    if (addGroupIfNotExists && css3DScene) {\n      if (!css3DScene.getObjectById(this.store.frontModeGroup.id)) {\n        css3DScene.add(this.store.frontModeGroup)\n      }\n    }\n    return this.store.frontModeGroup\n  }\n\n  public getBehindCSS3DObjectGroup({ addGroupIfNotExists = true } = {}) {\n    const css3DScene = this.getBehindCSS3DScene({ createSceneIfNotExists: addGroupIfNotExists })\n    if (addGroupIfNotExists && css3DScene && this.scene) {\n      const behindModeGroup = this.store.behindModeGroup ?? new CSS3DBehindGroup(this.scene)\n      this.store.behindModeGroup = behindModeGroup\n      if (!css3DScene.getObjectById(behindModeGroup.id)) css3DScene.add(behindModeGroup)\n    }\n    return this.store.behindModeGroup\n  }\n\n  public setVisibleById = (id: number, visible: boolean) => {\n    getCSS3DObjectById(id)?.setVisible(visible)\n  }\n\n  public setEnabledById = (id: number, enabled: boolean) => {\n    const css3DObject = getCSS3DObjectById(id)\n    if (!css3DObject) return\n    const group =\n      css3DObject.mode === 'front'\n        ? this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: false })\n        : this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: false })\n    if (!group) return\n    if (enabled) {\n      group.add(css3DObject)\n    } else {\n      group.remove(css3DObject)\n    }\n  }\n\n  public render(camera: THREE.Camera) {\n    if (this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: false }).CSS3DObjectLength > 0) {\n      const css3DScene = this.getFrontCSS3DScene({ createSceneIfNotExists: true })\n      if (!css3DScene) return console.error(`${PLUGIN}: css3DScene is required when mode is front`)\n      getFrontModeRenderer().renderEveryFrame(css3DScene, camera)\n    }\n    if ((this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: false })?.CSS3DObjectLength ?? 0) > 0) {\n      const css3DScene = this.getBehindCSS3DScene({ createSceneIfNotExists: true })\n      if (!css3DScene) return console.error(`${PLUGIN}: css3DScene is required when mode is behind`)\n      getBehindModeRenderer().renderEveryFrame(css3DScene, camera)\n    }\n  }\n\n  private createObject = (\n    points: [Vector3, Vector3, Vector3, Vector3],\n    config: {\n      ratio: number\n      dpr: number\n      container: HTMLElement\n      pointerEvents: 'none' | 'auto'\n      mode: 'front' | 'behind'\n      wrapperStyle: Partial<CSSStyleDeclaration>\n    },\n  ) => {\n    const css3DObject = new CSS3DObjectPlus({ cornerPoints: points, ...config, style: config.wrapperStyle })\n    css3DObject.element.classList.add(`${PLUGIN_NAME}__container`)\n    css3DObject.element.id = `${PLUGIN_NAME}__container--${css3DObject.uuid}`\n    return css3DObject\n  }\n\n  private async handleShow() {\n    this.store.frontModeGroup.setVisible(true)\n    this.store.behindModeGroup?.setVisible(true)\n  }\n\n  private async handleHide() {\n    this.store.frontModeGroup.setVisible(false)\n    this.store.behindModeGroup?.setVisible(false)\n  }\n\n  private handleEnable() {\n    this.getFrontCSS3DScene()?.add(this.store.frontModeGroup)\n    if (this.store.behindModeGroup) this.getBehindCSS3DScene()?.add(this.store.behindModeGroup)\n  }\n\n  private handleDisable() {\n    this.store.frontModeGroup.children.forEach((object) => {\n      if (object instanceof CSS3DObject && object.element instanceof Element && object.element.parentNode !== null) {\n        object.element.remove()\n      }\n    })\n    this.store.behindModeGroup?.children.forEach((object) => {\n      if (object instanceof CSS3DObject && object.element instanceof Element && object.element.parentNode !== null) {\n        object.element.remove()\n      }\n    })\n    this.getFrontCSS3DScene()?.remove(this.store.frontModeGroup)\n    if (this.store.behindModeGroup) this.getBehindCSS3DScene()?.remove(this.store.behindModeGroup)\n  }\n\n  private handleDispose() {\n    this.handleDisable()\n  }\n}\n"],"mappings":"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"}

package/dist/internal/CSS3DRenderPlugin-CEatgl0m.js

@@ -0,0 +1,77 @@
+import { r as e } from "./CSS3DObject-C9ck81UX.js";
+import { n as t } from "./fiveModelLoad-BUIBYxzp.js";
+import { n } from "./defaultUrls-CfMtGzqM.js";
+import { t as r } from "./CSS3DRender-BKWjq-Mo.js";
+//#region src/CSS3DRenderPlugin/Controller.ts
+var i = "v2.0.1", a = `CSS3DRenderPlugin@${i}`, o = class extends r {
+	five;
+	behindFiveContainer;
+	frontFiveContainer;
+	VERSION = i;
+	staticPrefix = n;
+	created3DElementResults = [];
+	constructor(e) {
+		super(), this.five = e;
+	}
+	setState(...e) {
+		let t = super.setState(...e);
+		return this.five.needsRender = !0, t;
+	}
+	create3DDomContainer = (e, n) => {
+		if (this.state.disposed) return;
+		let r = Object.assign({
+			ratio: .00216,
+			devicePixelRatio: 1,
+			mode: "front",
+			autoRender: !0,
+			wrapperStyle: {}
+		}, n, n?.mode === "behind" ? { scene: this.five.scene } : void 0), { autoRender: i } = r;
+		r.mode === "behind" && r.behindFiveContainer && (this.behindFiveContainer = r.behindFiveContainer);
+		let o = this.create3DElement(this.five.camera, e, {
+			...r,
+			autoRender: !1
+		});
+		if (!o) return;
+		let s = !1, c = o.dispose;
+		o.dispose = () => {
+			if (!s) return s = !0, this.created3DElementResults.includes(o) && this.created3DElementResults.splice(this.created3DElementResults.indexOf(o), 1), c();
+		}, this.created3DElementResults.push(o);
+		let l = () => {
+			if (s || this.state.disposed) return;
+			let e = o.css3DObject.mode === "front" ? this.frontFiveContainer ?? this.five.getElement()?.parentElement : this.getBehindFiveElement();
+			if (!e) return console.error(`${a}: wrapper is ${e}; mode is ${o.css3DObject.mode}`);
+			o.appendToElement(e), o.render();
+		}, u = () => {
+			t(this.five).then(() => l());
+		};
+		return i && u(), {
+			...o,
+			render: i ? void 0 : u
+		};
+	};
+	appendToFrontFiveContainer(e) {
+		this.frontFiveContainer = e, this.created3DElementResults.forEach((t) => {
+			t.css3DObject.mode === "front" && t.appendToElement(e);
+		});
+	}
+	appendToBehindFiveContainer(e) {
+		this.behindFiveContainer = e, this.created3DElementResults.forEach((t) => {
+			t.css3DObject.mode === "behind" && t.appendToElement(e);
+		});
+	}
+	getBehindFiveElement() {
+		return this.behindFiveContainer ||= e(this.five), this.behindFiveContainer;
+	}
+	dispose() {
+		this.state.disposed || (this.clear(), super.dispose());
+	}
+	clear() {
+		this.created3DElementResults.slice().forEach((e) => {
+			e.dispose();
+		}), this.created3DElementResults = [];
+	}
+}, s = (e) => new o(e);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=CSS3DRenderPlugin-CEatgl0m.js.map

package/dist/internal/CSS3DRenderPlugin-CEatgl0m.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSS3DRenderPlugin-CEatgl0m.js","names":["generateBehindFiveElement","waitFiveModelLoaded","CSS3DRender","VERSION","PLUGIN_NAME","Controller","DEFAULT_STATIC_PREFIX","five","params","result","config","create3DElementResult","points","disposed","originDispose","oldRender","wrapper","render","autoRender","container","CSS3DRenderPlugin"],"sources":["../../src/CSS3DRenderPlugin/Controller.ts","../../src/CSS3DRenderPlugin/index.ts"],"sourcesContent":["import type * as THREE from 'three/webgpu'\nimport type { Five } from '@realsee/five-webgpu'\nimport { CSS3DRender } from './utils/three/CSS3DRender'\nimport type { AnyPosition } from './utils'\nimport generateBehindFiveElement from './utils/generateBehindFiveElement'\nimport { DEFAULT_STATIC_PREFIX } from '../shared-utils'\nimport { waitFiveModelLoaded } from '../shared-utils/five/fiveModelLoad'\n\nconst VERSION = 'v2.0.1'\n\nexport const PLUGIN_NAME = `CSS3DRenderPlugin@${VERSION}`\n\nexport interface Create3DDomContainerParamsType {\n  points: AnyPosition[]\n  config?: {\n    ratio?: number\n    devicePixelRatio?: number\n    autoRender?: boolean\n    container?: HTMLElement\n    pointerEvents?: 'none' | 'auto'\n    wrapperStyle?: Partial<CSSStyleDeclaration>\n  } & ({ mode?: 'front' } | { mode: 'behind'; behindFiveContainer?: HTMLElement })\n}\n\nexport default class Controller extends CSS3DRender {\n  public five: Five\n  public behindFiveContainer?: Element\n  public frontFiveContainer?: Element\n\n  public readonly VERSION = VERSION\n\n  public readonly staticPrefix: string = DEFAULT_STATIC_PREFIX\n\n  private created3DElementResults: Array<Exclude<ReturnType<CSS3DRender['create3DElement']>, void>> = []\n\n  public constructor(five: Five) {\n    super()\n    this.five = five\n  }\n\n  public setState(...params: Parameters<InstanceType<typeof CSS3DRender>['setState']>): void {\n    const result = super.setState(...params)\n    this.five.needsRender = true\n    return result\n  }\n\n  /**\n   * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中\n   * @param { Vector3Position[] } points 矩形四个点坐标\n   * @param config 均为可选值\n   * @config_document `config` 均为可选值\n   *  | key                   | type                       | defaultValue        | comment |\n   *  | -                     | -                          | -                   | -       |\n   *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |\n   *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |\n   *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |\n   *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`\n   *  | `pointerEvents`       | *`'none'\\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |\n   *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |\n   *  | `mode`                | *`'front'\\|'behind'`*      | `front`             | 两种模式:|\n   *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |\n   *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |\n   *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |\n   *\n   * @return\n   * ```typescript\n   *    {\n   *      id: string,                             // id\n   *      container: HTMLDIVElement               // dom容器\n   *      dispose: () => void                     // 销毁\n   *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例\n   *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined\n   *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)\n   *      show: () => void                        // 同 setVisible(true)\n   *      hide: () => void                        // 同 setVisible(false)\n   *      setEnabled: (enabled: boolean) => void  // 添加/移除 container, 同 setEnabledById(id, enabled)\n   *      enable: () => void                      // 同 setEnabled(true)\n   *      disable: () => void                     // 同 setEnabled(false)\n   *    } | void\n   * ```\n   */\n  public create3DDomContainer = (points: Create3DDomContainerParamsType['points'], config?: Create3DDomContainerParamsType['config']) => {\n    if (this.state.disposed) return undefined\n    // ==== init ====\n    const params = (() => {\n      const defaultconfig = {\n        ratio: 0.00216,\n        devicePixelRatio: 1,\n        mode: 'front',\n        autoRender: true,\n        wrapperStyle: {},\n      }\n      return Object.assign(defaultconfig, config, config?.mode === 'behind' ? { scene: this.five.scene } : undefined) as {\n        ratio: number\n        devicePixelRatio: number\n        autoRender: boolean\n        container: HTMLElement\n        pointerEvents: 'none' | 'auto'\n        wrapperStyle: Partial<CSSStyleDeclaration>\n      } & ({ mode: 'front' } | { mode: 'behind'; behindFiveContainer: HTMLElement; scene: THREE.Scene })\n    })()\n\n    const { autoRender } = params\n\n    if (params.mode === 'behind' && params.behindFiveContainer) {\n      this.behindFiveContainer = params.behindFiveContainer\n    }\n\n    // 自动添加dom\n    const create3DElementResult = this.create3DElement(this.five.camera, points, { ...params, autoRender: false })\n\n    if (!create3DElementResult) return undefined\n\n    let disposed = false\n    const originDispose = create3DElementResult.dispose\n    create3DElementResult.dispose = () => {\n      if (disposed) return\n      disposed = true\n      if (this.created3DElementResults.includes(create3DElementResult)) {\n        this.created3DElementResults.splice(this.created3DElementResults.indexOf(create3DElementResult), 1)\n      }\n      return originDispose()\n    }\n\n    this.created3DElementResults.push(create3DElementResult)\n\n    const oldRender = () => {\n      if (disposed || this.state.disposed) return\n      const wrapper =\n        create3DElementResult.css3DObject.mode === 'front'\n          ? this.frontFiveContainer ?? this.five.getElement()?.parentElement\n          : this.getBehindFiveElement()\n      if (!wrapper) return console.error(`${PLUGIN_NAME}: wrapper is ${wrapper}; mode is ${create3DElementResult.css3DObject.mode}`)\n      create3DElementResult.appendToElement(wrapper)\n      create3DElementResult.render!()\n    }\n\n    const render = () => {\n      waitFiveModelLoaded(this.five).then(() => oldRender())\n    }\n\n    if (autoRender) render()\n\n    return { ...create3DElementResult, ...{ render: autoRender ? undefined : render } }\n  }\n\n  public appendToFrontFiveContainer(container: Element) {\n    this.frontFiveContainer = container\n    this.created3DElementResults.forEach((result) => {\n      if (result.css3DObject.mode === 'front') {\n        result.appendToElement(container)\n      }\n    })\n  }\n\n  public appendToBehindFiveContainer(container: Element) {\n    this.behindFiveContainer = container\n    this.created3DElementResults.forEach((result) => {\n      if (result.css3DObject.mode === 'behind') {\n        result.appendToElement(container)\n      }\n    })\n  }\n\n  public getBehindFiveElement() {\n    if (this.behindFiveContainer) return this.behindFiveContainer\n    else {\n      this.behindFiveContainer = generateBehindFiveElement(this.five)\n      return this.behindFiveContainer\n    }\n  }\n\n  public dispose() {\n    if (this.state.disposed) return\n    this.clear()\n    super.dispose()\n  }\n\n  public clear() {\n    this.created3DElementResults.slice().forEach((result) => {\n      result.dispose()\n    })\n    this.created3DElementResults = []\n  }\n}\n","import type { Five, FivePlugin } from '@realsee/five-webgpu'\nimport Controller from './Controller'\n\nexport const CSS3DRenderPlugin: FivePlugin<void, InstanceType<typeof Controller>> = (five: Five) => new Controller(five)\n\nexport { CSS3DRender } from './utils/three/CSS3DRender'\nexport type { CSS3DRenderPluginParameterType, CSS3DRenderPluginExportType, CSS3DRenderExportType, Create3DDomContainerReturnType, Create3DElementReturnType, CSS3DRenderPluginState, CSS3DRenderPluginEventMap } from './typing'\nexport default CSS3DRenderPlugin\n"],"mappings":";;;;;AAQA,IAAMG,IAAU,UAEHC,IAAc,qBAAqBD,KAc3BE,IAArB,cAAwCH,EAAY;CAClD;CACA;CACA;CAEA,UAA0BC;CAE1B,eAAuCG;CAEvC,0BAAoG,CAAC;CAErG,YAAmB,GAAY;EAE7B,AADA,MAAM,GACN,KAAK,OAAOC;CACd;CAEA,SAAgB,GAAGC,GAAwE;EACzF,IAAMC,IAAS,MAAM,SAAS,GAAGD,CAAM;EAEvC,OADA,KAAK,KAAK,cAAc,IACjBC;CACT;CAqCA,wBAA+B,GAAkD,MAAsD;EACrI,IAAI,KAAK,MAAM,UAAU;EAEzB,IAAMD,IAQG,OAAO,OAAO;GANnB,OAAO;GACP,kBAAkB;GAClB,MAAM;GACN,YAAY;GACZ,cAAc,CAAC;EAEI,GAAeE,GAAQA,GAAQ,SAAS,WAAW,EAAE,OAAO,KAAK,KAAK,MAAM,IAAI,KAAA,CAAS,GAU1G,EAAE,kBAAeF;EAEvB,AAAIA,EAAO,SAAS,YAAYA,EAAO,wBACrC,KAAK,sBAAsBA,EAAO;EAIpC,IAAMG,IAAwB,KAAK,gBAAgB,KAAK,KAAK,QAAQC,GAAQ;GAAE,GAAGJ;GAAQ,YAAY;EAAM,CAAC;EAE7G,IAAI,CAACG,GAAuB;EAE5B,IAAIE,IAAW,IACTC,IAAgBH,EAAsB;EAU5C,AATA,EAAsB,gBAAgB;GACpC,IAAI,IAKJ,OAJA,IAAW,IACP,KAAK,wBAAwB,SAASA,CAAqB,KAC7D,KAAK,wBAAwB,OAAO,KAAK,wBAAwB,QAAQA,CAAqB,GAAG,CAAC,GAE7FG,EAAc;EACvB,GAEA,KAAK,wBAAwB,KAAKH,CAAqB;EAEvD,IAAMI,UAAkB;GACtB,IAAIF,KAAY,KAAK,MAAM,UAAU;GACrC,IAAMG,IACJL,EAAsB,YAAY,SAAS,UACvC,KAAK,sBAAsB,KAAK,KAAK,WAAW,CAAC,EAAE,gBACnD,KAAK,qBAAqB;GAChC,IAAI,CAACK,GAAS,OAAO,QAAQ,MAAM,GAAGZ,EAAY,eAAeY,EAAQ,YAAYL,EAAsB,YAAY,MAAM;GAE7H,AADAA,EAAsB,gBAAgBK,CAAO,GAC7CL,EAAsB,OAAQ;EAChC,GAEMM,UAAe;GACnB,EAAoB,KAAK,IAAI,CAAC,CAAC,WAAWF,EAAU,CAAC;EACvD;EAIA,OAFIG,KAAYD,EAAO,GAEhB;GAAE,GAAGN;GAA4B,QAAQO,IAAa,KAAA,IAAYD;EAAS;CACpF;CAEA,2BAAkC,GAAoB;EAEpD,AADA,KAAK,qBAAqBE,GAC1B,KAAK,wBAAwB,SAAS,MAAW;GAC/C,AAAIV,EAAO,YAAY,SAAS,WAC9BA,EAAO,gBAAgBU,CAAS;EAEpC,CAAC;CACH;CAEA,4BAAmC,GAAoB;EAErD,AADA,KAAK,sBAAsBA,GAC3B,KAAK,wBAAwB,SAAS,MAAW;GAC/C,AAAIV,EAAO,YAAY,SAAS,YAC9BA,EAAO,gBAAgBU,CAAS;EAEpC,CAAC;CACH;CAEA,uBAA8B;EAI1B,OAHE,AAEF,KAAK,wBAAsBnB,EAA0B,KAAK,IAAI,GACvD,KAAK;CAEhB;CAEA,UAAiB;EACf,AAAI,KAAK,MAAM,aACf,KAAK,MAAM,GACX,MAAM,QAAQ;CAChB;CAEA,QAAe;EAIb,AAHA,KAAK,wBAAwB,MAAM,CAAC,CAAC,SAAS,MAAW;GACvD,EAAO,QAAQ;EACjB,CAAC,GACD,KAAK,0BAA0B,CAAC;CAClC;AACF,GCrLaoB,KAAwE,MAAe,IAAIf,EAAWE,CAAI"}