1 line
14 KiB
Plaintext
1 line
14 KiB
Plaintext
|
{"version":3,"file":"CSS3DRenderer.cjs","sources":["../../src/renderers/CSS3DRenderer.js"],"sourcesContent":["import { Matrix4, Object3D, Quaternion, Vector3 } from 'three'\n\n/**\n * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs\n */\n\nconst _position = /* @__PURE__ */ new Vector3()\nconst _quaternion = /* @__PURE__ */ new Quaternion()\nconst _scale = /* @__PURE__ */ new Vector3()\n\nclass CSS3DObject extends Object3D {\n constructor(element = document.createElement('div')) {\n super()\n\n this.isCSS3DObject = true\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.parentNode.removeChild(object.element)\n }\n })\n })\n }\n\n copy(source, recursive) {\n super.copy(source, recursive)\n\n this.element = source.element.cloneNode(true)\n\n return this\n }\n}\n\nclass CSS3DSprite extends CSS3DObject {\n constructor(element) {\n super(element)\n\n this.isCSS3DSprite = true\n\n this.rotation2D = 0\n }\n\n copy(source, recursive) {\n super.copy(source, recursive)\n\n this.rotation2D = source.rotation2D\n\n return this\n }\n}\n\n//\n\nconst _matrix = /* @__PURE__ */ new Matrix4()\nconst _matrix2 = /* @__PURE__ */ new Matrix4()\n\nclass CSS3DRenderer {\n constructor(parameters = {}) {\n const _this = this\n\n let _width, _height\n let _widthHalf, _heightHalf\n\n const cache = {\n camera: { style: '' },\n objects: new WeakMap(),\n }\n\n const domElement = parameters.element !== undefined ? parameters.element : document.createElement('div')\n\n domElement.style.overflow = 'hidden'\n\n this.domElement = domElement\n\n const viewElement = document.createElement('div')\n viewElement.style.transformOrigin = '0 0'\n viewElement.style.pointerEvents = 'none'\n domElement.appendChild(viewElement)\n\n const cameraElement = document.createElement('div')\n\n cameraElement.style.transformStyle = 'preserve-3d'\n\n viewElement.appendChild(cameraElement)\n\n this.getSize = function () {\n return {\n width: _width,\n height: _height,\n }\n }\n\n this.render = function (scene, camera) {\n const fov = camera.projectionMatrix.elements[5] * _heightHalf\n\n if (camera.view && camera.view.enabled) {\n // view offset\n viewElement.style.transform = `translate( ${-camera.view.offsetX * (_width / camera.view.width)}px, ${\n -camera.view.offsetY * (_height / camera.view.height)\n }px )`\n\n // view fullWidth and fullHeight, view width and height\n viewElement.style.transform += `scale( ${camera.view.fullWidth / camera.view.width}, ${\n camera.view.fullHeight / camera.view.height\n } )`\n } else {\n viewElement.style.transform = ''\n }\n\n if (scene.matrixWorldAutoUpdate === true) scene.updateMatrixWorld()\n if (camera.parent === null && camera.matrixWorldAutoUpdate === true) camera.updateMatrixWorld()\n\n let tx, ty\n\n if (camera.isOrthographicCamera) {\n tx = -(camera.right + camera.left) / 2\n ty = (camera.top + camera.bottom) / 2\n }\n\n const scaleByViewOffset = camera.view && camera.view.enabled ? camera.view.height / camera.view.fullHeight : 1\n const cameraCSSMatrix = camera.isOrthographicCamera\n ? `scale( ${scaleByViewOffset} )` +\n 'scale(' +\n fov +\n ')' +\n 'translate(' +\n epsilon(tx) +\n 'px,' +\n epsilon(ty) +\n 'px)' +\n getCameraCSSMatrix(camera.matrixWorldInverse)\n : `scale( ${scaleByViewOffset} )` + 'translateZ(' + fov + 'px)' + getCameraCSSMat
|