├── .gitignore ├── LICENSE ├── README.md ├── dist ├── aframe-websurfaces.js ├── aframe-websurfaces.js.map ├── aframe-websurfaces.modern.js ├── aframe-websurfaces.modern.js.map ├── aframe-websurfaces.module.js ├── aframe-websurfaces.module.js.map ├── aframe-websurfaces.umd.js └── aframe-websurfaces.umd.js.map ├── examples ├── example1.gif └── example1 │ └── index.html ├── package-lock.json ├── package.json └── src ├── DOMContext.js ├── DOMElement.js ├── constants.js ├── lib └── CSS3DRenderer.js └── websurface.js /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | node_modules 3 | *.code-workspace 4 | testing -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Mitarai 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # aframe-websurfaces 2 | 3 | [![Latest NPM release](https://img.shields.io/npm/v/aframe-websurfaces.svg)](https://www.npmjs.com/package/aframe-websurfaces) 4 | [![Minzipped size](https://badgen.net/bundlephobia/minzip/aframe-websurfaces)](https://bundlephobia.com/result?p=aframe-websurfaces) 5 | [![License](https://img.shields.io/badge/license-MIT-007ec6.svg)](https://github.com/ryota-mitarai/aframe-websurfaces/blob/master/LICENSE) 6 | 7 | An [aframe](https://github.com/aframevr/aframe) component for adding interactable web pages to your scene. 8 | 9 | Check out the [live example](https://codesandbox.io/s/aframe-websurfaces-example-l44vc). 10 | 11 | ![Example gif](https://github.com/ryota-mitarai/aframe-websurfaces/blob/master/examples/example1.gif) 12 | 13 | ## Usage 14 | 15 | To create a websurface, just add the **websurface** component. This will create an iframe and project it's contents onto a plane: 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | ### Properties 22 | 23 | | Property | Description | Default | 24 | | ---------------- | ----------------------------------------- | ------------------- | 25 | | url | the url of the web page | "https://aframe.io" | 26 | | width | width of the websurface | 1 | 27 | | height | height of the websurface | 0.75 | 28 | | isInteractable | enables mouse interaction | true | 29 | | | | | 30 | | frameSkips | updates render\* on every n cycles | 1 | 31 | | autoSceneStyling | sets _scene.style.position_ to "absolute" | true | 32 | 33 | \*note - only the shape of the web page in the scene is affected by this, the web page will still play at normal speed 34 | 35 | ### Members 36 | 37 | | Property | Description | 38 | | --------------------------- | ----------------------------------- | 39 | | el.websurface_iframe | gives the used iframe | 40 | | el.css3d_context | gives the DOMContext | 41 | | el.css3d_context.domElement | gives the div that stores the css3d | 42 | 43 | ## Additional Info 44 | 45 | The web page is not actually present inside the aframe scene, only an empty plane is. Because of this, the web page is not visible in VR. 46 | 47 | Under the hood this uses a modified version of [three-dom-elements](https://github.com/CodyJasonBennett/three-dom-elements), massive props there. 48 | -------------------------------------------------------------------------------- /dist/aframe-websurfaces.js: -------------------------------------------------------------------------------- 1 | function e(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,t(e,n)}function t(e,n){return(t=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,n)}var n=function(t){function n(e){var n;return(n=t.call(this)||this).element=e||document.createElement("div"),n.element.style.position="absolute",n.element.style.pointerEvents="auto",n.addEventListener("removed",function(){this.traverse(function(e){e.element instanceof Element&&null!==e.element.parentNode&&e.element.parentNode.removeChild(e.element)})}),n}return e(n,t),n.prototype.copy=function(e,n){return t.prototype.copy.call(this,e,n),this.element=e.element.cloneNode(!0),this},n}(THREE.Object3D);n.prototype.isCSS3DObject=!0,function(t){function n(e){var n;return(n=t.call(this,e)||this).rotation2D=0,n}return e(n,t),n.prototype.copy=function(e,n){return t.prototype.copy.call(this,e,n),this.rotation2D=e.rotation2D,this},n}(n).prototype.isCSS3DSprite=!0;var i=new THREE.Matrix4,s=new THREE.Matrix4,o=function(){var e,t,n,o,a=this,r={camera:{fov:0,style:""},objects:new WeakMap},c=document.createElement("div");c.style.overflow="hidden",this.domElement=c;var l=document.createElement("div");function d(e){return Math.abs(e)<1e-10?0:e}function m(e){var t=e.elements;return"matrix3d("+d(t[0])+","+d(-t[1])+","+d(t[2])+","+d(t[3])+","+d(t[4])+","+d(-t[5])+","+d(t[6])+","+d(t[7])+","+d(t[8])+","+d(-t[9])+","+d(t[10])+","+d(t[11])+","+d(t[12])+","+d(-t[13])+","+d(t[14])+","+d(t[15])+")"}function h(e){var t=e.elements;return"translate(-50%,-50%)matrix3d("+d(t[0])+","+d(t[1])+","+d(t[2])+","+d(t[3])+","+d(-t[4])+","+d(-t[5])+","+d(-t[6])+","+d(-t[7])+","+d(t[8])+","+d(t[9])+","+d(t[10])+","+d(t[11])+","+d(t[12])+","+d(t[13])+","+d(t[14])+","+d(t[15])+")"}function p(e,t,n,o){if(e.isCSS3DObject){var c;e.onBeforeRender(a,t,n),e.isCSS3DSprite?(i.copy(n.matrixWorldInverse),i.transpose(),0!==e.rotation2D&&i.multiply(s.makeRotationZ(e.rotation2D)),i.copyPosition(e.matrixWorld),i.scale(e.scale),i.elements[3]=0,i.elements[7]=0,i.elements[11]=0,i.elements[15]=1,c=h(i)):c=h(e.matrixWorld);var d=e.element,m=r.objects.get(e);void 0!==m&&m.style===c||(d.style.transform=c,r.objects.set(e,{style:c})),d.style.display=e.visible?"":"none",d.parentNode!==l&&l.appendChild(d),e.onAfterRender(a,t,n)}for(var u=0,f=e.children.length;u {\r\n context.setSize(window.innerWidth, window.innerHeight);\r\n });\r\n });\r\n data.frames = 0;\r\n data.isCamLoaded = false;\r\n },\r\n\r\n tick: function () {\r\n const el = this.el;\r\n const data = this.data;\r\n\r\n if (data.isPaused == true) return;\r\n\r\n if (data.isCamLoaded == false) {\r\n const camera = el.sceneEl.camera;\r\n if (camera) {\r\n this.el.emit('cam-loaded');\r\n data.isCamLoaded = true;\r\n }\r\n return;\r\n }\r\n\r\n const context = data.context;\r\n const element = data.element;\r\n if (data.frames % data.frameSkips == 0) {\r\n if (context) {\r\n context.update();\r\n }\r\n if (element) {\r\n element.update(el.object3D);\r\n }\r\n }\r\n\r\n data.frames++;\r\n },\r\n\r\n pause: function () {\r\n const data = this.data;\r\n\r\n data.isPaused = true;\r\n },\r\n\r\n play: function () {\r\n const data = this.data;\r\n\r\n data.isPaused = false;\r\n },\r\n});\r\n"],"names":["CSS3DObject","element","_this2","document","createElement","style","position","pointerEvents","addEventListener","this","traverse","object","Element","parentNode","removeChild","copy","source","recursive","_THREE$Object3D","cloneNode","THREE","Object3D","prototype","isCSS3DObject","_this3","rotation2D","_CSS3DObject","isCSS3DSprite","_matrix","Matrix4","_matrix2","CSS3DRenderer","_width","_height","_widthHalf","_heightHalf","_this","cache","camera","fov","objects","WeakMap","domElement","overflow","cameraElement","epsilon","value","Math","abs","getCameraCSSMatrix","matrix","elements","getObjectCSSMatrix","renderObject","scene","cameraCSSMatrix","onBeforeRender","matrixWorldInverse","transpose","multiply","makeRotationZ","copyPosition","matrixWorld","scale","cachedObject","get","undefined","transform","set","display","visible","appendChild","onAfterRender","i","l","children","length","transformStyle","getSize","width","height","render","tx","ty","projectionMatrix","perspective","isPerspectiveCamera","autoUpdate","updateMatrixWorld","parent","isOrthographicCamera","right","left","top","bottom","setSize","DOMContext","websurfaceEntity","enabled","cssRenderer","zIndex","cssCamera","PerspectiveCamera","aspect","near","far","cssScene","Scene","update","bind","updateProjectionMatrix","getWorldPosition","multiplyScalar","getWorldQuaternion","quaternion","DOMElement","context","elementWidth","geometry","PlaneGeometry","material","MeshBasicMaterial","opacity","blending","NoBlending","side","DoubleSide","color","Color","aspectRatio","elementHeight","resizeElement","cssObject","cssObjectInitialScale","size","Vector3","box","Box3","handleAdded","handleRemoved","add","remove","setElement","obj","setFromObject","scaleFactor","oldScaleFactor","x","y","z","dispose","removeEventListener","Mesh","component","AFRAME","registerComponent","schema","url","default","isInteractable","frameSkips","autoSceneStyling","init","el","data","sceneEl","mouseHasLeftScreen","setAttribute","exitPointerLock","iframe","border","window","innerWidth","innerHeight","body","object3D","div","websurface_iframe","css3d_context","frames","isCamLoaded","tick","isPaused","emit","pause","play"],"mappings":"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"} -------------------------------------------------------------------------------- /dist/aframe-websurfaces.modern.js: -------------------------------------------------------------------------------- 1 | class e extends THREE.Object3D{constructor(e){super(),this.element=e||document.createElement("div"),this.element.style.position="absolute",this.element.style.pointerEvents="auto",this.addEventListener("removed",function(){this.traverse(function(e){e.element instanceof Element&&null!==e.element.parentNode&&e.element.parentNode.removeChild(e.element)})})}copy(e,t){return super.copy(e,t),this.element=e.element.cloneNode(!0),this}}e.prototype.isCSS3DObject=!0;const t=new THREE.Matrix4,s=new THREE.Matrix4;class i{constructor(){const e=this;let i,n,a,o;const r={camera:{fov:0,style:""},objects:new WeakMap},c=document.createElement("div");c.style.overflow="hidden",this.domElement=c;const l=document.createElement("div");function d(e){return Math.abs(e)<1e-10?0:e}function h(e){const t=e.elements;return"matrix3d("+d(t[0])+","+d(-t[1])+","+d(t[2])+","+d(t[3])+","+d(t[4])+","+d(-t[5])+","+d(t[6])+","+d(t[7])+","+d(t[8])+","+d(-t[9])+","+d(t[10])+","+d(t[11])+","+d(t[12])+","+d(-t[13])+","+d(t[14])+","+d(t[15])+")"}function m(e){const t=e.elements;return"translate(-50%,-50%)matrix3d("+d(t[0])+","+d(t[1])+","+d(t[2])+","+d(t[3])+","+d(-t[4])+","+d(-t[5])+","+d(-t[6])+","+d(-t[7])+","+d(t[8])+","+d(t[9])+","+d(t[10])+","+d(t[11])+","+d(t[12])+","+d(t[13])+","+d(t[14])+","+d(t[15])+")"}function p(i,n,a,o){if(i.isCSS3DObject){let o;i.onBeforeRender(e,n,a),i.isCSS3DSprite?(t.copy(a.matrixWorldInverse),t.transpose(),0!==i.rotation2D&&t.multiply(s.makeRotationZ(i.rotation2D)),t.copyPosition(i.matrixWorld),t.scale(i.scale),t.elements[3]=0,t.elements[7]=0,t.elements[11]=0,t.elements[15]=1,o=m(t)):o=m(i.matrixWorld);const c=i.element,d=r.objects.get(i);void 0!==d&&d.style===o||(c.style.transform=o,r.objects.set(i,{style:o})),c.style.display=i.visible?"":"none",c.parentNode!==l&&l.appendChild(c),i.onAfterRender(e,n,a)}for(let e=0,t=i.children.length;e{i.setSize(window.innerWidth,window.innerHeight)})}),t.frames=0,t.isCamLoaded=!1},tick:function(){const e=this.el,t=this.data;if(1==t.isPaused)return;if(0==t.isCamLoaded)return void(e.sceneEl.camera&&(this.el.emit("cam-loaded"),t.isCamLoaded=!0));const s=t.context,i=t.element;t.frames%t.frameSkips==0&&(s&&s.update(),i&&i.update(e.object3D)),t.frames++},pause:function(){this.data.isPaused=!0},play:function(){this.data.isPaused=!1}});export{o as component}; 2 | //# sourceMappingURL=aframe-websurfaces.modern.js.map 3 | -------------------------------------------------------------------------------- /dist/aframe-websurfaces.modern.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"aframe-websurfaces.modern.js","sources":["../src/lib/CSS3DRenderer.js","../src/DOMContext.js","../src/constants.js","../src/DOMElement.js","../src/websurface.js"],"sourcesContent":["/**\r\n * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs\r\n */\r\n\r\nclass CSS3DObject extends THREE.Object3D {\r\n constructor(element) {\r\n super();\r\n\r\n this.element = element || document.createElement('div');\r\n this.element.style.position = 'absolute';\r\n this.element.style.pointerEvents = 'auto';\r\n\r\n this.addEventListener('removed', function () {\r\n this.traverse(function (object) {\r\n if (object.element instanceof Element && object.element.parentNode !== null) {\r\n object.element.parentNode.removeChild(object.element);\r\n }\r\n });\r\n });\r\n }\r\n\r\n copy(source, recursive) {\r\n super.copy(source, recursive);\r\n\r\n this.element = source.element.cloneNode(true);\r\n\r\n return this;\r\n }\r\n}\r\n\r\nCSS3DObject.prototype.isCSS3DObject = true;\r\n\r\nclass CSS3DSprite extends CSS3DObject {\r\n constructor(element) {\r\n super(element);\r\n\r\n this.rotation2D = 0;\r\n }\r\n\r\n copy(source, recursive) {\r\n super.copy(source, recursive);\r\n\r\n this.rotation2D = source.rotation2D;\r\n\r\n return this;\r\n }\r\n}\r\n\r\nCSS3DSprite.prototype.isCSS3DSprite = true;\r\n\r\n//\r\n\r\nconst _matrix = new THREE.Matrix4();\r\nconst _matrix2 = new THREE.Matrix4();\r\n\r\nclass CSS3DRenderer {\r\n constructor() {\r\n const _this = this;\r\n\r\n let _width, _height;\r\n let _widthHalf, _heightHalf;\r\n\r\n const cache = {\r\n camera: { fov: 0, style: '' },\r\n objects: new WeakMap(),\r\n };\r\n\r\n const domElement = document.createElement('div');\r\n domElement.style.overflow = 'hidden';\r\n\r\n this.domElement = domElement;\r\n\r\n const cameraElement = document.createElement('div');\r\n\r\n cameraElement.style.transformStyle = 'preserve-3d';\r\n cameraElement.style.pointerEvents = 'none';\r\n\r\n domElement.appendChild(cameraElement);\r\n\r\n this.getSize = function () {\r\n return {\r\n width: _width,\r\n height: _height,\r\n };\r\n };\r\n\r\n this.render = function (scene, camera) {\r\n const fov = camera.projectionMatrix.elements[5] * _heightHalf;\r\n\r\n if (cache.camera.fov !== fov) {\r\n domElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : '';\r\n cache.camera.fov = fov;\r\n }\r\n\r\n if (scene.autoUpdate === true) scene.updateMatrixWorld();\r\n if (camera.parent === null) camera.updateMatrixWorld();\r\n\r\n let tx, ty;\r\n\r\n if (camera.isOrthographicCamera) {\r\n tx = -(camera.right + camera.left) / 2;\r\n ty = (camera.top + camera.bottom) / 2;\r\n }\r\n\r\n const cameraCSSMatrix = camera.isOrthographicCamera\r\n ? 'scale(' +\r\n fov +\r\n ')' +\r\n 'translate(' +\r\n epsilon(tx) +\r\n 'px,' +\r\n epsilon(ty) +\r\n 'px)' +\r\n getCameraCSSMatrix(camera.matrixWorldInverse)\r\n : 'translateZ(' + fov + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse);\r\n\r\n const style = cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';\r\n\r\n if (cache.camera.style !== style) {\r\n cameraElement.style.transform = style;\r\n\r\n cache.camera.style = style;\r\n }\r\n\r\n renderObject(scene, scene, camera, cameraCSSMatrix);\r\n };\r\n\r\n this.setSize = function (width, height) {\r\n _width = width;\r\n _height = height;\r\n _widthHalf = _width / 2;\r\n _heightHalf = _height / 2;\r\n\r\n domElement.style.width = width + 'px';\r\n domElement.style.height = height + 'px';\r\n\r\n cameraElement.style.width = width + 'px';\r\n cameraElement.style.height = height + 'px';\r\n };\r\n\r\n function epsilon(value) {\r\n return Math.abs(value) < 1e-10 ? 0 : value;\r\n }\r\n\r\n function getCameraCSSMatrix(matrix) {\r\n const elements = matrix.elements;\r\n\r\n return (\r\n 'matrix3d(' +\r\n epsilon(elements[0]) +\r\n ',' +\r\n epsilon(-elements[1]) +\r\n ',' +\r\n epsilon(elements[2]) +\r\n ',' +\r\n epsilon(elements[3]) +\r\n ',' +\r\n epsilon(elements[4]) +\r\n ',' +\r\n epsilon(-elements[5]) +\r\n ',' +\r\n epsilon(elements[6]) +\r\n ',' +\r\n epsilon(elements[7]) +\r\n ',' +\r\n epsilon(elements[8]) +\r\n ',' +\r\n epsilon(-elements[9]) +\r\n ',' +\r\n epsilon(elements[10]) +\r\n ',' +\r\n epsilon(elements[11]) +\r\n ',' +\r\n epsilon(elements[12]) +\r\n ',' +\r\n epsilon(-elements[13]) +\r\n ',' +\r\n epsilon(elements[14]) +\r\n ',' +\r\n epsilon(elements[15]) +\r\n ')'\r\n );\r\n }\r\n\r\n function getObjectCSSMatrix(matrix) {\r\n const elements = matrix.elements;\r\n const matrix3d =\r\n 'matrix3d(' +\r\n epsilon(elements[0]) +\r\n ',' +\r\n epsilon(elements[1]) +\r\n ',' +\r\n epsilon(elements[2]) +\r\n ',' +\r\n epsilon(elements[3]) +\r\n ',' +\r\n epsilon(-elements[4]) +\r\n ',' +\r\n epsilon(-elements[5]) +\r\n ',' +\r\n epsilon(-elements[6]) +\r\n ',' +\r\n epsilon(-elements[7]) +\r\n ',' +\r\n epsilon(elements[8]) +\r\n ',' +\r\n epsilon(elements[9]) +\r\n ',' +\r\n epsilon(elements[10]) +\r\n ',' +\r\n epsilon(elements[11]) +\r\n ',' +\r\n epsilon(elements[12]) +\r\n ',' +\r\n epsilon(elements[13]) +\r\n ',' +\r\n epsilon(elements[14]) +\r\n ',' +\r\n epsilon(elements[15]) +\r\n ')';\r\n\r\n return 'translate(-50%,-50%)' + matrix3d;\r\n }\r\n\r\n function renderObject(object, scene, camera, cameraCSSMatrix) {\r\n if (object.isCSS3DObject) {\r\n object.onBeforeRender(_this, scene, camera);\r\n\r\n let style;\r\n\r\n if (object.isCSS3DSprite) {\r\n // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/\r\n\r\n _matrix.copy(camera.matrixWorldInverse);\r\n _matrix.transpose();\r\n\r\n if (object.rotation2D !== 0) _matrix.multiply(_matrix2.makeRotationZ(object.rotation2D));\r\n\r\n _matrix.copyPosition(object.matrixWorld);\r\n _matrix.scale(object.scale);\r\n\r\n _matrix.elements[3] = 0;\r\n _matrix.elements[7] = 0;\r\n _matrix.elements[11] = 0;\r\n _matrix.elements[15] = 1;\r\n\r\n style = getObjectCSSMatrix(_matrix);\r\n } else {\r\n style = getObjectCSSMatrix(object.matrixWorld);\r\n }\r\n\r\n const element = object.element;\r\n const cachedObject = cache.objects.get(object);\r\n\r\n if (cachedObject === undefined || cachedObject.style !== style) {\r\n element.style.transform = style;\r\n\r\n const objectData = { style: style };\r\n cache.objects.set(object, objectData);\r\n }\r\n\r\n element.style.display = object.visible ? '' : 'none';\r\n\r\n if (element.parentNode !== cameraElement) {\r\n cameraElement.appendChild(element);\r\n }\r\n\r\n object.onAfterRender(_this, scene, camera);\r\n }\r\n\r\n for (let i = 0, l = object.children.length; i < l; i++) {\r\n renderObject(object.children[i], scene, camera, cameraCSSMatrix);\r\n }\r\n }\r\n }\r\n}\r\n\r\nexport { CSS3DObject, CSS3DSprite, CSS3DRenderer };\r\n","import { CSS3DRenderer } from './lib/CSS3DRenderer';\r\nimport { cssFactor } from './constants';\r\nexport class DOMContext {\r\n /**\r\n * DOM context instance\r\n * @param camera A perspective camera instance to draw from\r\n */\r\n constructor(camera, websurfaceEntity) {\r\n this.websurfaceEntity = websurfaceEntity;\r\n // Set default settings\r\n this.enabled = true;\r\n // Init renderer\r\n this.cssRenderer = new CSS3DRenderer();\r\n this.domElement = this.cssRenderer.domElement;\r\n this.domElement.style.position = 'fixed';\r\n this.domElement.style.zIndex = '-2';\r\n // Init camera\r\n this.cssCamera = new THREE.PerspectiveCamera(\r\n camera.fov,\r\n camera.aspect,\r\n camera.near * cssFactor,\r\n camera.far * cssFactor\r\n );\r\n this.camera = camera;\r\n // Init scene\r\n this.cssScene = new THREE.Scene();\r\n // Bind update\r\n this.update = this.update.bind(this);\r\n }\r\n /**\r\n * Resizes the DOM context's renderer and camera\r\n * @param width Target width\r\n * @param height Target height\r\n */\r\n setSize(width, height) {\r\n this.cssRenderer.setSize(width, height);\r\n this.cssCamera.aspect = width / height;\r\n this.cssCamera.updateProjectionMatrix();\r\n }\r\n /**\r\n * Updates the DOM context's renderer and camera states\r\n */\r\n update() {\r\n // Sync CSS camera with WebGL camera\r\n this.camera.getWorldPosition(this.cssCamera.position);\r\n this.cssCamera.position.multiplyScalar(cssFactor);\r\n this.camera.getWorldQuaternion(this.cssCamera.quaternion);\r\n\r\n // Render projection\r\n this.cssRenderer.render(this.cssScene, this.cssCamera);\r\n }\r\n}\r\n","/**\r\n * Useful for projecting to scale high-resolution DOM elements\r\n */\r\nexport const cssFactor = 100;\r\n","import { CSS3DObject } from './lib/CSS3DRenderer';\r\nimport { cssFactor } from './constants';\r\nexport class DOMElement extends THREE.Mesh {\r\n /**\r\n * DOM element that is projected into 3D space\r\n * @param context A DOM context instance to draw on\r\n * @param domElement A DOM element to project\r\n * @param options DOM element options\r\n * @param options.elementWidth DOM element width\r\n * @param options.width 3D plane width\r\n * @param options.height 3D plane height\r\n */\r\n constructor(context, domElement, width, height, { elementWidth = 1280 } = {}) {\r\n // Create portal mesh\r\n const geometry = new THREE.PlaneGeometry(width, height);\r\n const material = new THREE.MeshBasicMaterial({\r\n opacity: 0,\r\n blending: THREE.NoBlending,\r\n side: THREE.DoubleSide,\r\n color: new THREE.Color(0, 0, 0),\r\n });\r\n super(geometry, material);\r\n // Expose params\r\n this.context = context;\r\n this.domElement = domElement;\r\n this.aspectRatio = height / width;\r\n this.elementWidth = elementWidth;\r\n this.elementHeight = this.elementWidth * this.aspectRatio;\r\n this.width = width;\r\n this.height = height;\r\n // Set initial size\r\n this.resizeElement();\r\n // Init 3D DOM\r\n this.cssObject = new CSS3DObject(this.domElement);\r\n this.cssObject.scale.multiplyScalar(cssFactor / (this.elementWidth / this.width));\r\n //@custom\r\n this.cssObjectInitialScale = this.cssObject.scale;\r\n // Init helpers\r\n this.size = new THREE.Vector3();\r\n this.box = new THREE.Box3();\r\n // Init events\r\n this.addEventListener('added', this.handleAdded);\r\n this.addEventListener('removed', this.handleRemoved);\r\n // Bind update\r\n this.update = this.update.bind(this);\r\n }\r\n /**\r\n * Adds the current cssObject to the scene\r\n */\r\n handleAdded() {\r\n this.context.cssScene.add(this.cssObject);\r\n }\r\n /**\r\n * Removes the current cssObject from the scene\r\n */\r\n handleRemoved() {\r\n this.context.cssScene.remove(this.cssObject);\r\n }\r\n /**\r\n * Resizes DOM element to sync with projection\r\n */\r\n resizeElement() {\r\n this.domElement.style.width = `${this.elementWidth}px`;\r\n this.domElement.style.height = `${this.elementHeight}px`;\r\n }\r\n /**\r\n * Updates the projected DOM element\r\n * @param domElement A DOM element to project\r\n */\r\n setElement(domElement) {\r\n // Cleanup previous element\r\n if (this.domElement.parentNode) {\r\n this.domElement.parentNode.removeChild(this.domElement);\r\n }\r\n // Set new element\r\n this.domElement = domElement;\r\n this.cssObject.element = domElement;\r\n // Reset element size\r\n this.resizeElement();\r\n }\r\n /**\r\n * Updates the DOM element and its projection states\r\n */\r\n //@custom\r\n update(obj) {\r\n // Sync CSS properties with WebGL mesh\r\n this.cssObject.quaternion.copy(obj.quaternion);\r\n this.cssObject.position.copy(obj.position).multiplyScalar(cssFactor);\r\n // Calculate CSS scale factor\r\n this.box.setFromObject(this).getSize(this.size);\r\n const scaleFactor = obj.scale;\r\n // Sync CSS scale with WebGL projection\r\n if (this.oldScaleFactor != scaleFactor) {\r\n this.oldScaleFactor = scaleFactor;\r\n this.cssObject.scale.set(\r\n this.cssObjectInitialScale.x,\r\n this.cssObjectInitialScale.y,\r\n this.cssObjectInitialScale.z\r\n );\r\n this.cssObject.scale.multiply(scaleFactor);\r\n }\r\n this.cssObject.visible = obj.visible;\r\n }\r\n /**\r\n * Disposes WebGL and DOM elements\r\n */\r\n dispose() {\r\n // Cleanup events\r\n this.removeEventListener('added', this.handleAdded);\r\n this.removeEventListener('removed', this.handleRemoved);\r\n // Cleanup DOM\r\n this.domElement.remove();\r\n // Cleanup WebGL\r\n this.geometry.dispose();\r\n this.material.dispose();\r\n }\r\n}\r\n","//uses a modified version of https://github.com/CodyJasonBennett/three-dom-elements\r\nimport { DOMContext } from './DOMContext';\r\nimport { DOMElement } from './DOMElement';\r\nexport const component = AFRAME.registerComponent('websurface', {\r\n schema: {\r\n url: { default: 'https://aframe.io' },\r\n width: { default: 1 },\r\n height: { default: 0.75 },\r\n isInteractable: { default: true },\r\n frameSkips: { default: 1 },\r\n autoSceneStyling: { default: true },\r\n },\r\n\r\n init: function () {\r\n const el = this.el;\r\n const data = this.data;\r\n\r\n if (data.autoSceneStyling == true) {\r\n el.sceneEl.style.position = 'absolute';\r\n el.sceneEl.style.zIndex = '1';\r\n }\r\n\r\n if (data.isInteractable == true) {\r\n data.mouseHasLeftScreen = true;\r\n //geometry for click detection\r\n el.setAttribute('geometry', `primitive:plane; width:${data.width}; height:${data.height};`);\r\n\r\n el.addEventListener('click', function () {\r\n if (data.mouseHasLeftScreen == false) return;\r\n document.exitPointerLock();\r\n el.sceneEl.style.zIndex = '-1';\r\n data.mouseHasLeftScreen = false;\r\n });\r\n\r\n el.addEventListener('mouseenter', function () {\r\n data.context.domElement.style.zIndex = '0';\r\n });\r\n\r\n el.addEventListener('mouseleave', function () {\r\n data.context.domElement.style.zIndex = '-2';\r\n data.mouseHasLeftScreen = true;\r\n });\r\n }\r\n\r\n el.addEventListener('cam-loaded', function () {\r\n const iframe = document.createElement('iframe');\r\n iframe.setAttribute('src', data.url);\r\n iframe.style.border = 'none';\r\n\r\n const camera = el.sceneEl.camera;\r\n const context = new DOMContext(camera, el);\r\n context.setSize(window.innerWidth, window.innerHeight);\r\n document.body.appendChild(context.domElement);\r\n\r\n const element = new DOMElement(context, iframe, data.width, data.height);\r\n el.object3D.add(element);\r\n\r\n if (data.isInteractable == true) {\r\n const div = document.createElement('div');\r\n div.style.position = 'fixed';\r\n div.style.top = '0';\r\n div.style.width = '100%';\r\n div.style.height = '100%';\r\n div.style.zIndex = '-1';\r\n context.domElement.appendChild(div);\r\n div.addEventListener('click', function () {\r\n el.sceneEl.style.zIndex = 1;\r\n });\r\n }\r\n\r\n this.websurface_iframe = iframe;\r\n this.css3d_context = context;\r\n\r\n data.context = context;\r\n data.element = element;\r\n\r\n window.addEventListener('resize', () => {\r\n context.setSize(window.innerWidth, window.innerHeight);\r\n });\r\n });\r\n data.frames = 0;\r\n data.isCamLoaded = false;\r\n },\r\n\r\n tick: function () {\r\n const el = this.el;\r\n const data = this.data;\r\n\r\n if (data.isPaused == true) return;\r\n\r\n if (data.isCamLoaded == false) {\r\n const camera = el.sceneEl.camera;\r\n if (camera) {\r\n this.el.emit('cam-loaded');\r\n data.isCamLoaded = true;\r\n }\r\n return;\r\n }\r\n\r\n const context = data.context;\r\n const element = data.element;\r\n if (data.frames % data.frameSkips == 0) {\r\n if (context) {\r\n context.update();\r\n }\r\n if (element) {\r\n element.update(el.object3D);\r\n }\r\n }\r\n\r\n data.frames++;\r\n },\r\n\r\n pause: function () {\r\n const data = this.data;\r\n\r\n data.isPaused = true;\r\n },\r\n\r\n play: function () {\r\n const data = this.data;\r\n\r\n data.isPaused = false;\r\n },\r\n});\r\n"],"names":["CSS3DObject","THREE","Object3D","constructor","element","super","this","document","createElement","style","position","pointerEvents","addEventListener","traverse","object","Element","parentNode","removeChild","copy","source","recursive","cloneNode","prototype","isCSS3DObject","_matrix","Matrix4","_matrix2","CSS3DRenderer","_this","_width","_height","_widthHalf","_heightHalf","cache","camera","fov","objects","WeakMap","domElement","overflow","cameraElement","epsilon","value","Math","abs","getCameraCSSMatrix","matrix","elements","getObjectCSSMatrix","renderObject","scene","cameraCSSMatrix","onBeforeRender","isCSS3DSprite","matrixWorldInverse","transpose","rotation2D","multiply","makeRotationZ","copyPosition","matrixWorld","scale","cachedObject","get","undefined","transform","set","display","visible","appendChild","onAfterRender","i","l","children","length","transformStyle","getSize","width","height","render","projectionMatrix","tx","ty","perspective","isPerspectiveCamera","autoUpdate","updateMatrixWorld","parent","isOrthographicCamera","right","left","top","bottom","setSize","DOMContext","websurfaceEntity","enabled","cssRenderer","zIndex","cssCamera","PerspectiveCamera","aspect","near","far","cssScene","Scene","update","bind","updateProjectionMatrix","getWorldPosition","multiplyScalar","getWorldQuaternion","quaternion","DOMElement","Mesh","context","elementWidth","PlaneGeometry","MeshBasicMaterial","opacity","blending","NoBlending","side","DoubleSide","color","Color","aspectRatio","elementHeight","resizeElement","cssObject","cssObjectInitialScale","size","Vector3","box","Box3","handleAdded","handleRemoved","add","remove","setElement","obj","setFromObject","scaleFactor","oldScaleFactor","x","y","z","dispose","removeEventListener","geometry","material","component","AFRAME","registerComponent","schema","url","default","isInteractable","frameSkips","autoSceneStyling","init","el","data","sceneEl","mouseHasLeftScreen","setAttribute","exitPointerLock","iframe","border","window","innerWidth","innerHeight","body","object3D","div","websurface_iframe","css3d_context","frames","isCamLoaded","tick","isPaused","emit","pause","play"],"mappings":"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"} -------------------------------------------------------------------------------- /dist/aframe-websurfaces.module.js: -------------------------------------------------------------------------------- 1 | function e(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,t(e,n)}function t(e,n){return(t=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,n)}var n=function(t){function n(e){var n;return(n=t.call(this)||this).element=e||document.createElement("div"),n.element.style.position="absolute",n.element.style.pointerEvents="auto",n.addEventListener("removed",function(){this.traverse(function(e){e.element instanceof Element&&null!==e.element.parentNode&&e.element.parentNode.removeChild(e.element)})}),n}return e(n,t),n.prototype.copy=function(e,n){return t.prototype.copy.call(this,e,n),this.element=e.element.cloneNode(!0),this},n}(THREE.Object3D);n.prototype.isCSS3DObject=!0,function(t){function n(e){var n;return(n=t.call(this,e)||this).rotation2D=0,n}return e(n,t),n.prototype.copy=function(e,n){return t.prototype.copy.call(this,e,n),this.rotation2D=e.rotation2D,this},n}(n).prototype.isCSS3DSprite=!0;var i=new THREE.Matrix4,s=new THREE.Matrix4,o=function(){var e,t,n,o,a=this,r={camera:{fov:0,style:""},objects:new WeakMap},c=document.createElement("div");c.style.overflow="hidden",this.domElement=c;var l=document.createElement("div");function d(e){return Math.abs(e)<1e-10?0:e}function m(e){var t=e.elements;return"matrix3d("+d(t[0])+","+d(-t[1])+","+d(t[2])+","+d(t[3])+","+d(t[4])+","+d(-t[5])+","+d(t[6])+","+d(t[7])+","+d(t[8])+","+d(-t[9])+","+d(t[10])+","+d(t[11])+","+d(t[12])+","+d(-t[13])+","+d(t[14])+","+d(t[15])+")"}function h(e){var t=e.elements;return"translate(-50%,-50%)matrix3d("+d(t[0])+","+d(t[1])+","+d(t[2])+","+d(t[3])+","+d(-t[4])+","+d(-t[5])+","+d(-t[6])+","+d(-t[7])+","+d(t[8])+","+d(t[9])+","+d(t[10])+","+d(t[11])+","+d(t[12])+","+d(t[13])+","+d(t[14])+","+d(t[15])+")"}function u(e,t,n,o){if(e.isCSS3DObject){var c;e.onBeforeRender(a,t,n),e.isCSS3DSprite?(i.copy(n.matrixWorldInverse),i.transpose(),0!==e.rotation2D&&i.multiply(s.makeRotationZ(e.rotation2D)),i.copyPosition(e.matrixWorld),i.scale(e.scale),i.elements[3]=0,i.elements[7]=0,i.elements[11]=0,i.elements[15]=1,c=h(i)):c=h(e.matrixWorld);var d=e.element,m=r.objects.get(e);void 0!==m&&m.style===c||(d.style.transform=c,r.objects.set(e,{style:c})),d.style.display=e.visible?"":"none",d.parentNode!==l&&l.appendChild(d),e.onAfterRender(a,t,n)}for(var p=0,f=e.children.length;p {\r\n context.setSize(window.innerWidth, window.innerHeight);\r\n });\r\n });\r\n data.frames = 0;\r\n data.isCamLoaded = false;\r\n },\r\n\r\n tick: function () {\r\n const el = this.el;\r\n const data = this.data;\r\n\r\n if (data.isPaused == true) return;\r\n\r\n if (data.isCamLoaded == false) {\r\n const camera = el.sceneEl.camera;\r\n if (camera) {\r\n this.el.emit('cam-loaded');\r\n data.isCamLoaded = true;\r\n }\r\n return;\r\n }\r\n\r\n const context = data.context;\r\n const element = data.element;\r\n if (data.frames % data.frameSkips == 0) {\r\n if (context) {\r\n context.update();\r\n }\r\n if (element) {\r\n element.update(el.object3D);\r\n }\r\n }\r\n\r\n data.frames++;\r\n },\r\n\r\n pause: function () {\r\n const data = this.data;\r\n\r\n data.isPaused = true;\r\n },\r\n\r\n play: function () {\r\n const data = this.data;\r\n\r\n data.isPaused = false;\r\n },\r\n});\r\n"],"names":["CSS3DObject","element","_this2","document","createElement","style","position","pointerEvents","addEventListener","this","traverse","object","Element","parentNode","removeChild","copy","source","recursive","_THREE$Object3D","cloneNode","THREE","Object3D","prototype","isCSS3DObject","_this3","rotation2D","_CSS3DObject","isCSS3DSprite","_matrix","Matrix4","_matrix2","CSS3DRenderer","_width","_height","_widthHalf","_heightHalf","_this","cache","camera","fov","objects","WeakMap","domElement","overflow","cameraElement","epsilon","value","Math","abs","getCameraCSSMatrix","matrix","elements","getObjectCSSMatrix","renderObject","scene","cameraCSSMatrix","onBeforeRender","matrixWorldInverse","transpose","multiply","makeRotationZ","copyPosition","matrixWorld","scale","cachedObject","get","undefined","transform","set","display","visible","appendChild","onAfterRender","i","l","children","length","transformStyle","getSize","width","height","render","tx","ty","projectionMatrix","perspective","isPerspectiveCamera","autoUpdate","updateMatrixWorld","parent","isOrthographicCamera","right","left","top","bottom","setSize","DOMContext","websurfaceEntity","enabled","cssRenderer","zIndex","cssCamera","PerspectiveCamera","aspect","near","far","cssScene","Scene","update","bind","updateProjectionMatrix","getWorldPosition","multiplyScalar","getWorldQuaternion","quaternion","DOMElement","context","elementWidth","geometry","PlaneGeometry","material","MeshBasicMaterial","opacity","blending","NoBlending","side","DoubleSide","color","Color","aspectRatio","elementHeight","resizeElement","cssObject","cssObjectInitialScale","size","Vector3","box","Box3","handleAdded","handleRemoved","add","remove","setElement","obj","setFromObject","scaleFactor","oldScaleFactor","x","y","z","dispose","removeEventListener","Mesh","component","AFRAME","registerComponent","schema","url","default","isInteractable","frameSkips","autoSceneStyling","init","el","data","sceneEl","mouseHasLeftScreen","setAttribute","exitPointerLock","iframe","border","window","innerWidth","innerHeight","body","object3D","div","websurface_iframe","css3d_context","frames","isCamLoaded","tick","isPaused","emit","pause","play"],"mappings":"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"} -------------------------------------------------------------------------------- /dist/aframe-websurfaces.umd.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e||self).aframeWebsurfaces={})}(this,function(e){function t(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,n(e,t)}function n(e,t){return(n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var i=function(e){function n(t){var n;return(n=e.call(this)||this).element=t||document.createElement("div"),n.element.style.position="absolute",n.element.style.pointerEvents="auto",n.addEventListener("removed",function(){this.traverse(function(e){e.element instanceof Element&&null!==e.element.parentNode&&e.element.parentNode.removeChild(e.element)})}),n}return t(n,e),n.prototype.copy=function(t,n){return e.prototype.copy.call(this,t,n),this.element=t.element.cloneNode(!0),this},n}(THREE.Object3D);i.prototype.isCSS3DObject=!0,function(e){function n(t){var n;return(n=e.call(this,t)||this).rotation2D=0,n}return t(n,e),n.prototype.copy=function(t,n){return e.prototype.copy.call(this,t,n),this.rotation2D=t.rotation2D,this},n}(i).prototype.isCSS3DSprite=!0;var s=new THREE.Matrix4,o=new THREE.Matrix4,a=function(){var e,t,n,i,a=this,r={camera:{fov:0,style:""},objects:new WeakMap},c=document.createElement("div");c.style.overflow="hidden",this.domElement=c;var l=document.createElement("div");function d(e){return Math.abs(e)<1e-10?0:e}function m(e){var t=e.elements;return"matrix3d("+d(t[0])+","+d(-t[1])+","+d(t[2])+","+d(t[3])+","+d(t[4])+","+d(-t[5])+","+d(t[6])+","+d(t[7])+","+d(t[8])+","+d(-t[9])+","+d(t[10])+","+d(t[11])+","+d(t[12])+","+d(-t[13])+","+d(t[14])+","+d(t[15])+")"}function h(e){var t=e.elements;return"translate(-50%,-50%)matrix3d("+d(t[0])+","+d(t[1])+","+d(t[2])+","+d(t[3])+","+d(-t[4])+","+d(-t[5])+","+d(-t[6])+","+d(-t[7])+","+d(t[8])+","+d(t[9])+","+d(t[10])+","+d(t[11])+","+d(t[12])+","+d(t[13])+","+d(t[14])+","+d(t[15])+")"}function u(e,t,n,i){if(e.isCSS3DObject){var c;e.onBeforeRender(a,t,n),e.isCSS3DSprite?(s.copy(n.matrixWorldInverse),s.transpose(),0!==e.rotation2D&&s.multiply(o.makeRotationZ(e.rotation2D)),s.copyPosition(e.matrixWorld),s.scale(e.scale),s.elements[3]=0,s.elements[7]=0,s.elements[11]=0,s.elements[15]=1,c=h(s)):c=h(e.matrixWorld);var d=e.element,m=r.objects.get(e);void 0!==m&&m.style===c||(d.style.transform=c,r.objects.set(e,{style:c})),d.style.display=e.visible?"":"none",d.parentNode!==l&&l.appendChild(d),e.onAfterRender(a,t,n)}for(var p=0,f=e.children.length;p {\r\n context.setSize(window.innerWidth, window.innerHeight);\r\n });\r\n });\r\n data.frames = 0;\r\n data.isCamLoaded = false;\r\n },\r\n\r\n tick: function () {\r\n const el = this.el;\r\n const data = this.data;\r\n\r\n if (data.isPaused == true) return;\r\n\r\n if (data.isCamLoaded == false) {\r\n const camera = el.sceneEl.camera;\r\n if (camera) {\r\n this.el.emit('cam-loaded');\r\n data.isCamLoaded = true;\r\n }\r\n return;\r\n }\r\n\r\n const context = data.context;\r\n const element = data.element;\r\n if (data.frames % data.frameSkips == 0) {\r\n if (context) {\r\n context.update();\r\n }\r\n if (element) {\r\n element.update(el.object3D);\r\n }\r\n }\r\n\r\n data.frames++;\r\n },\r\n\r\n pause: function () {\r\n const data = this.data;\r\n\r\n data.isPaused = true;\r\n },\r\n\r\n play: function () {\r\n const data = this.data;\r\n\r\n data.isPaused = false;\r\n },\r\n});\r\n"],"names":["CSS3DObject","element","_this2","document","createElement","style","position","pointerEvents","addEventListener","this","traverse","object","Element","parentNode","removeChild","copy","source","recursive","_THREE$Object3D","cloneNode","THREE","Object3D","prototype","isCSS3DObject","_this3","rotation2D","_CSS3DObject","isCSS3DSprite","_matrix","Matrix4","_matrix2","CSS3DRenderer","_width","_height","_widthHalf","_heightHalf","_this","cache","camera","fov","objects","WeakMap","domElement","overflow","cameraElement","epsilon","value","Math","abs","getCameraCSSMatrix","matrix","elements","getObjectCSSMatrix","renderObject","scene","cameraCSSMatrix","onBeforeRender","matrixWorldInverse","transpose","multiply","makeRotationZ","copyPosition","matrixWorld","scale","cachedObject","get","undefined","transform","set","display","visible","appendChild","onAfterRender","i","l","children","length","transformStyle","getSize","width","height","render","tx","ty","projectionMatrix","perspective","isPerspectiveCamera","autoUpdate","updateMatrixWorld","parent","isOrthographicCamera","right","left","top","bottom","setSize","cssFactor","DOMContext","websurfaceEntity","enabled","cssRenderer","zIndex","cssCamera","PerspectiveCamera","aspect","near","far","cssScene","Scene","update","bind","updateProjectionMatrix","getWorldPosition","multiplyScalar","getWorldQuaternion","quaternion","DOMElement","context","elementWidth","geometry","PlaneGeometry","material","MeshBasicMaterial","opacity","blending","NoBlending","side","DoubleSide","color","Color","aspectRatio","elementHeight","resizeElement","cssObject","cssObjectInitialScale","size","Vector3","box","Box3","handleAdded","handleRemoved","add","remove","setElement","obj","setFromObject","scaleFactor","oldScaleFactor","x","y","z","dispose","removeEventListener","Mesh","component","AFRAME","registerComponent","schema","url","default","isInteractable","frameSkips","autoSceneStyling","init","el","data","sceneEl","mouseHasLeftScreen","setAttribute","exitPointerLock","iframe","border","window","innerWidth","innerHeight","body","object3D","div","websurface_iframe","css3d_context","frames","isCamLoaded","tick","isPaused","emit","pause","play"],"mappings":"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"} -------------------------------------------------------------------------------- /examples/example1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryota-mitarai/aframe-websurfaces/ac33f5befcdff59042090744ceb18aabc3e224ec/examples/example1.gif -------------------------------------------------------------------------------- /examples/example1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aframe-websurfaces", 3 | "version": "1.4.0", 4 | "homepage": "https://github.com/ryota-mitarai/aframe-websurfaces", 5 | "description": "An aframe component for adding interactable web pages to your scene.", 6 | "repository": "https://github.com/ryota-mitarai/aframe-websurfaces.git", 7 | "author": "ryota-mitarai", 8 | "license": "MIT", 9 | "files": [ 10 | "dist/*.js*" 11 | ], 12 | "source": "src/websurface.js", 13 | "main": "dist/aframe-websurfaces.js", 14 | "exports": "dist/aframe-websurfaces.modern.js", 15 | "module": "dist/aframe-websurfaces.module.js", 16 | "unpkg": "dist/aframe-websurfaces.umd.js", 17 | "peerDependencies": { 18 | "aframe": "*" 19 | }, 20 | "devDependencies": { 21 | "microbundle": "^0.13.0" 22 | }, 23 | "scripts": { 24 | "build": "microbundle --globals aframe=AFRAME --external aframe", 25 | "dev": "microbundle watch" 26 | }, 27 | "keywords": [ 28 | "aframe", 29 | "a-frame", 30 | "css3d", 31 | "websurface" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /src/DOMContext.js: -------------------------------------------------------------------------------- 1 | import { CSS3DRenderer } from './lib/CSS3DRenderer'; 2 | import { cssFactor } from './constants'; 3 | export class DOMContext { 4 | /** 5 | * DOM context instance 6 | * @param camera A perspective camera instance to draw from 7 | */ 8 | constructor(camera, websurfaceEntity) { 9 | this.websurfaceEntity = websurfaceEntity; 10 | // Set default settings 11 | this.enabled = true; 12 | // Init renderer 13 | this.cssRenderer = new CSS3DRenderer(); 14 | this.domElement = this.cssRenderer.domElement; 15 | this.domElement.style.position = 'fixed'; 16 | this.domElement.style.zIndex = '-2'; 17 | // Init camera 18 | this.cssCamera = new THREE.PerspectiveCamera( 19 | camera.fov, 20 | camera.aspect, 21 | camera.near * cssFactor, 22 | camera.far * cssFactor 23 | ); 24 | this.camera = camera; 25 | // Init scene 26 | this.cssScene = new THREE.Scene(); 27 | // Bind update 28 | this.update = this.update.bind(this); 29 | } 30 | /** 31 | * Resizes the DOM context's renderer and camera 32 | * @param width Target width 33 | * @param height Target height 34 | */ 35 | setSize(width, height) { 36 | this.cssRenderer.setSize(width, height); 37 | this.cssCamera.aspect = width / height; 38 | this.cssCamera.updateProjectionMatrix(); 39 | } 40 | /** 41 | * Updates the DOM context's renderer and camera states 42 | */ 43 | update() { 44 | // Sync CSS camera with WebGL camera 45 | this.camera.getWorldPosition(this.cssCamera.position); 46 | this.cssCamera.position.multiplyScalar(cssFactor); 47 | this.camera.getWorldQuaternion(this.cssCamera.quaternion); 48 | 49 | // Render projection 50 | this.cssRenderer.render(this.cssScene, this.cssCamera); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/DOMElement.js: -------------------------------------------------------------------------------- 1 | import { CSS3DObject } from './lib/CSS3DRenderer'; 2 | import { cssFactor } from './constants'; 3 | export class DOMElement extends THREE.Mesh { 4 | /** 5 | * DOM element that is projected into 3D space 6 | * @param context A DOM context instance to draw on 7 | * @param domElement A DOM element to project 8 | * @param options DOM element options 9 | * @param options.elementWidth DOM element width 10 | * @param options.width 3D plane width 11 | * @param options.height 3D plane height 12 | */ 13 | constructor(context, domElement, width, height, { elementWidth = 1280 } = {}) { 14 | // Create portal mesh 15 | const geometry = new THREE.PlaneGeometry(width, height); 16 | const material = new THREE.MeshBasicMaterial({ 17 | opacity: 0, 18 | blending: THREE.NoBlending, 19 | side: THREE.DoubleSide, 20 | color: new THREE.Color(0, 0, 0), 21 | }); 22 | super(geometry, material); 23 | // Expose params 24 | this.context = context; 25 | this.domElement = domElement; 26 | this.aspectRatio = height / width; 27 | this.elementWidth = elementWidth; 28 | this.elementHeight = this.elementWidth * this.aspectRatio; 29 | this.width = width; 30 | this.height = height; 31 | // Set initial size 32 | this.resizeElement(); 33 | // Init 3D DOM 34 | this.cssObject = new CSS3DObject(this.domElement); 35 | this.cssObject.scale.multiplyScalar(cssFactor / (this.elementWidth / this.width)); 36 | //@custom 37 | this.cssObjectInitialScale = this.cssObject.scale; 38 | // Init helpers 39 | this.size = new THREE.Vector3(); 40 | this.box = new THREE.Box3(); 41 | // Init events 42 | this.addEventListener('added', this.handleAdded); 43 | this.addEventListener('removed', this.handleRemoved); 44 | // Bind update 45 | this.update = this.update.bind(this); 46 | } 47 | /** 48 | * Adds the current cssObject to the scene 49 | */ 50 | handleAdded() { 51 | this.context.cssScene.add(this.cssObject); 52 | } 53 | /** 54 | * Removes the current cssObject from the scene 55 | */ 56 | handleRemoved() { 57 | this.context.cssScene.remove(this.cssObject); 58 | } 59 | /** 60 | * Resizes DOM element to sync with projection 61 | */ 62 | resizeElement() { 63 | this.domElement.style.width = `${this.elementWidth}px`; 64 | this.domElement.style.height = `${this.elementHeight}px`; 65 | } 66 | /** 67 | * Updates the projected DOM element 68 | * @param domElement A DOM element to project 69 | */ 70 | setElement(domElement) { 71 | // Cleanup previous element 72 | if (this.domElement.parentNode) { 73 | this.domElement.parentNode.removeChild(this.domElement); 74 | } 75 | // Set new element 76 | this.domElement = domElement; 77 | this.cssObject.element = domElement; 78 | // Reset element size 79 | this.resizeElement(); 80 | } 81 | /** 82 | * Updates the DOM element and its projection states 83 | */ 84 | //@custom 85 | update(obj) { 86 | // Sync CSS properties with WebGL mesh 87 | this.cssObject.quaternion.copy(obj.quaternion); 88 | this.cssObject.position.copy(obj.position).multiplyScalar(cssFactor); 89 | // Calculate CSS scale factor 90 | this.box.setFromObject(this).getSize(this.size); 91 | const scaleFactor = obj.scale; 92 | // Sync CSS scale with WebGL projection 93 | if (this.oldScaleFactor != scaleFactor) { 94 | this.oldScaleFactor = scaleFactor; 95 | this.cssObject.scale.set( 96 | this.cssObjectInitialScale.x, 97 | this.cssObjectInitialScale.y, 98 | this.cssObjectInitialScale.z 99 | ); 100 | this.cssObject.scale.multiply(scaleFactor); 101 | } 102 | this.cssObject.visible = obj.visible; 103 | } 104 | /** 105 | * Disposes WebGL and DOM elements 106 | */ 107 | dispose() { 108 | // Cleanup events 109 | this.removeEventListener('added', this.handleAdded); 110 | this.removeEventListener('removed', this.handleRemoved); 111 | // Cleanup DOM 112 | this.domElement.remove(); 113 | // Cleanup WebGL 114 | this.geometry.dispose(); 115 | this.material.dispose(); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Useful for projecting to scale high-resolution DOM elements 3 | */ 4 | export const cssFactor = 100; 5 | -------------------------------------------------------------------------------- /src/lib/CSS3DRenderer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs 3 | */ 4 | 5 | class CSS3DObject extends THREE.Object3D { 6 | constructor(element) { 7 | super(); 8 | 9 | this.element = element || document.createElement('div'); 10 | this.element.style.position = 'absolute'; 11 | this.element.style.pointerEvents = 'auto'; 12 | 13 | this.addEventListener('removed', function () { 14 | this.traverse(function (object) { 15 | if (object.element instanceof Element && object.element.parentNode !== null) { 16 | object.element.parentNode.removeChild(object.element); 17 | } 18 | }); 19 | }); 20 | } 21 | 22 | copy(source, recursive) { 23 | super.copy(source, recursive); 24 | 25 | this.element = source.element.cloneNode(true); 26 | 27 | return this; 28 | } 29 | } 30 | 31 | CSS3DObject.prototype.isCSS3DObject = true; 32 | 33 | class CSS3DSprite extends CSS3DObject { 34 | constructor(element) { 35 | super(element); 36 | 37 | this.rotation2D = 0; 38 | } 39 | 40 | copy(source, recursive) { 41 | super.copy(source, recursive); 42 | 43 | this.rotation2D = source.rotation2D; 44 | 45 | return this; 46 | } 47 | } 48 | 49 | CSS3DSprite.prototype.isCSS3DSprite = true; 50 | 51 | // 52 | 53 | const _matrix = new THREE.Matrix4(); 54 | const _matrix2 = new THREE.Matrix4(); 55 | 56 | class CSS3DRenderer { 57 | constructor() { 58 | const _this = this; 59 | 60 | let _width, _height; 61 | let _widthHalf, _heightHalf; 62 | 63 | const cache = { 64 | camera: { fov: 0, style: '' }, 65 | objects: new WeakMap(), 66 | }; 67 | 68 | const domElement = document.createElement('div'); 69 | domElement.style.overflow = 'hidden'; 70 | 71 | this.domElement = domElement; 72 | 73 | const cameraElement = document.createElement('div'); 74 | 75 | cameraElement.style.transformStyle = 'preserve-3d'; 76 | cameraElement.style.pointerEvents = 'none'; 77 | 78 | domElement.appendChild(cameraElement); 79 | 80 | this.getSize = function () { 81 | return { 82 | width: _width, 83 | height: _height, 84 | }; 85 | }; 86 | 87 | this.render = function (scene, camera) { 88 | const fov = camera.projectionMatrix.elements[5] * _heightHalf; 89 | 90 | if (cache.camera.fov !== fov) { 91 | domElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : ''; 92 | cache.camera.fov = fov; 93 | } 94 | 95 | if (scene.autoUpdate === true) scene.updateMatrixWorld(); 96 | if (camera.parent === null) camera.updateMatrixWorld(); 97 | 98 | let tx, ty; 99 | 100 | if (camera.isOrthographicCamera) { 101 | tx = -(camera.right + camera.left) / 2; 102 | ty = (camera.top + camera.bottom) / 2; 103 | } 104 | 105 | const cameraCSSMatrix = camera.isOrthographicCamera 106 | ? 'scale(' + 107 | fov + 108 | ')' + 109 | 'translate(' + 110 | epsilon(tx) + 111 | 'px,' + 112 | epsilon(ty) + 113 | 'px)' + 114 | getCameraCSSMatrix(camera.matrixWorldInverse) 115 | : 'translateZ(' + fov + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse); 116 | 117 | const style = cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'; 118 | 119 | if (cache.camera.style !== style) { 120 | cameraElement.style.transform = style; 121 | 122 | cache.camera.style = style; 123 | } 124 | 125 | renderObject(scene, scene, camera, cameraCSSMatrix); 126 | }; 127 | 128 | this.setSize = function (width, height) { 129 | _width = width; 130 | _height = height; 131 | _widthHalf = _width / 2; 132 | _heightHalf = _height / 2; 133 | 134 | domElement.style.width = width + 'px'; 135 | domElement.style.height = height + 'px'; 136 | 137 | cameraElement.style.width = width + 'px'; 138 | cameraElement.style.height = height + 'px'; 139 | }; 140 | 141 | function epsilon(value) { 142 | return Math.abs(value) < 1e-10 ? 0 : value; 143 | } 144 | 145 | function getCameraCSSMatrix(matrix) { 146 | const elements = matrix.elements; 147 | 148 | return ( 149 | 'matrix3d(' + 150 | epsilon(elements[0]) + 151 | ',' + 152 | epsilon(-elements[1]) + 153 | ',' + 154 | epsilon(elements[2]) + 155 | ',' + 156 | epsilon(elements[3]) + 157 | ',' + 158 | epsilon(elements[4]) + 159 | ',' + 160 | epsilon(-elements[5]) + 161 | ',' + 162 | epsilon(elements[6]) + 163 | ',' + 164 | epsilon(elements[7]) + 165 | ',' + 166 | epsilon(elements[8]) + 167 | ',' + 168 | epsilon(-elements[9]) + 169 | ',' + 170 | epsilon(elements[10]) + 171 | ',' + 172 | epsilon(elements[11]) + 173 | ',' + 174 | epsilon(elements[12]) + 175 | ',' + 176 | epsilon(-elements[13]) + 177 | ',' + 178 | epsilon(elements[14]) + 179 | ',' + 180 | epsilon(elements[15]) + 181 | ')' 182 | ); 183 | } 184 | 185 | function getObjectCSSMatrix(matrix) { 186 | const elements = matrix.elements; 187 | const matrix3d = 188 | 'matrix3d(' + 189 | epsilon(elements[0]) + 190 | ',' + 191 | epsilon(elements[1]) + 192 | ',' + 193 | epsilon(elements[2]) + 194 | ',' + 195 | epsilon(elements[3]) + 196 | ',' + 197 | epsilon(-elements[4]) + 198 | ',' + 199 | epsilon(-elements[5]) + 200 | ',' + 201 | epsilon(-elements[6]) + 202 | ',' + 203 | epsilon(-elements[7]) + 204 | ',' + 205 | epsilon(elements[8]) + 206 | ',' + 207 | epsilon(elements[9]) + 208 | ',' + 209 | epsilon(elements[10]) + 210 | ',' + 211 | epsilon(elements[11]) + 212 | ',' + 213 | epsilon(elements[12]) + 214 | ',' + 215 | epsilon(elements[13]) + 216 | ',' + 217 | epsilon(elements[14]) + 218 | ',' + 219 | epsilon(elements[15]) + 220 | ')'; 221 | 222 | return 'translate(-50%,-50%)' + matrix3d; 223 | } 224 | 225 | function renderObject(object, scene, camera, cameraCSSMatrix) { 226 | if (object.isCSS3DObject) { 227 | object.onBeforeRender(_this, scene, camera); 228 | 229 | let style; 230 | 231 | if (object.isCSS3DSprite) { 232 | // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/ 233 | 234 | _matrix.copy(camera.matrixWorldInverse); 235 | _matrix.transpose(); 236 | 237 | if (object.rotation2D !== 0) _matrix.multiply(_matrix2.makeRotationZ(object.rotation2D)); 238 | 239 | _matrix.copyPosition(object.matrixWorld); 240 | _matrix.scale(object.scale); 241 | 242 | _matrix.elements[3] = 0; 243 | _matrix.elements[7] = 0; 244 | _matrix.elements[11] = 0; 245 | _matrix.elements[15] = 1; 246 | 247 | style = getObjectCSSMatrix(_matrix); 248 | } else { 249 | style = getObjectCSSMatrix(object.matrixWorld); 250 | } 251 | 252 | const element = object.element; 253 | const cachedObject = cache.objects.get(object); 254 | 255 | if (cachedObject === undefined || cachedObject.style !== style) { 256 | element.style.transform = style; 257 | 258 | const objectData = { style: style }; 259 | cache.objects.set(object, objectData); 260 | } 261 | 262 | element.style.display = object.visible ? '' : 'none'; 263 | 264 | if (element.parentNode !== cameraElement) { 265 | cameraElement.appendChild(element); 266 | } 267 | 268 | object.onAfterRender(_this, scene, camera); 269 | } 270 | 271 | for (let i = 0, l = object.children.length; i < l; i++) { 272 | renderObject(object.children[i], scene, camera, cameraCSSMatrix); 273 | } 274 | } 275 | } 276 | } 277 | 278 | export { CSS3DObject, CSS3DSprite, CSS3DRenderer }; 279 | -------------------------------------------------------------------------------- /src/websurface.js: -------------------------------------------------------------------------------- 1 | //uses a modified version of https://github.com/CodyJasonBennett/three-dom-elements 2 | import { DOMContext } from './DOMContext'; 3 | import { DOMElement } from './DOMElement'; 4 | export const component = AFRAME.registerComponent('websurface', { 5 | schema: { 6 | url: { default: 'https://aframe.io' }, 7 | width: { default: 1 }, 8 | height: { default: 0.75 }, 9 | isInteractable: { default: true }, 10 | frameSkips: { default: 1 }, 11 | autoSceneStyling: { default: true }, 12 | }, 13 | 14 | init: function () { 15 | const el = this.el; 16 | const data = this.data; 17 | 18 | if (data.autoSceneStyling == true) { 19 | el.sceneEl.style.position = 'absolute'; 20 | el.sceneEl.style.zIndex = '1'; 21 | } 22 | 23 | if (data.isInteractable == true) { 24 | data.mouseHasLeftScreen = true; 25 | //geometry for click detection 26 | el.setAttribute('geometry', `primitive:plane; width:${data.width}; height:${data.height};`); 27 | 28 | el.addEventListener('click', function () { 29 | if (data.mouseHasLeftScreen == false) return; 30 | document.exitPointerLock(); 31 | el.sceneEl.style.zIndex = '-1'; 32 | data.mouseHasLeftScreen = false; 33 | }); 34 | 35 | el.addEventListener('mouseenter', function () { 36 | data.context.domElement.style.zIndex = '0'; 37 | }); 38 | 39 | el.addEventListener('mouseleave', function () { 40 | data.context.domElement.style.zIndex = '-2'; 41 | data.mouseHasLeftScreen = true; 42 | }); 43 | } 44 | 45 | el.addEventListener('cam-loaded', function () { 46 | const iframe = document.createElement('iframe'); 47 | iframe.setAttribute('src', data.url); 48 | iframe.style.border = 'none'; 49 | 50 | const camera = el.sceneEl.camera; 51 | const context = new DOMContext(camera, el); 52 | context.setSize(window.innerWidth, window.innerHeight); 53 | document.body.appendChild(context.domElement); 54 | 55 | const element = new DOMElement(context, iframe, data.width, data.height); 56 | el.object3D.add(element); 57 | 58 | if (data.isInteractable == true) { 59 | const div = document.createElement('div'); 60 | div.style.position = 'fixed'; 61 | div.style.top = '0'; 62 | div.style.width = '100%'; 63 | div.style.height = '100%'; 64 | div.style.zIndex = '-1'; 65 | context.domElement.appendChild(div); 66 | div.addEventListener('click', function () { 67 | el.sceneEl.style.zIndex = 1; 68 | }); 69 | } 70 | 71 | this.websurface_iframe = iframe; 72 | this.css3d_context = context; 73 | 74 | data.context = context; 75 | data.element = element; 76 | 77 | window.addEventListener('resize', () => { 78 | context.setSize(window.innerWidth, window.innerHeight); 79 | }); 80 | }); 81 | data.frames = 0; 82 | data.isCamLoaded = false; 83 | }, 84 | 85 | tick: function () { 86 | const el = this.el; 87 | const data = this.data; 88 | 89 | if (data.isPaused == true) return; 90 | 91 | if (data.isCamLoaded == false) { 92 | const camera = el.sceneEl.camera; 93 | if (camera) { 94 | this.el.emit('cam-loaded'); 95 | data.isCamLoaded = true; 96 | } 97 | return; 98 | } 99 | 100 | const context = data.context; 101 | const element = data.element; 102 | if (data.frames % data.frameSkips == 0) { 103 | if (context) { 104 | context.update(); 105 | } 106 | if (element) { 107 | element.update(el.object3D); 108 | } 109 | } 110 | 111 | data.frames++; 112 | }, 113 | 114 | pause: function () { 115 | const data = this.data; 116 | 117 | data.isPaused = true; 118 | }, 119 | 120 | play: function () { 121 | const data = this.data; 122 | 123 | data.isPaused = false; 124 | }, 125 | }); 126 | --------------------------------------------------------------------------------