diff --git a/samples/examples/embed-style.css b/samples/examples/embed-style.css
index 163c25a3..f10c078c 100644
--- a/samples/examples/embed-style.css
+++ b/samples/examples/embed-style.css
@@ -95,7 +95,6 @@
mr-app {
grid-column: 2;
height: 100vh;
- width: 100%;
overflow: scroll;
}
@@ -114,7 +113,6 @@
background-color: var(--color-paper);
padding-top: 6vw;
display: grid;
- width: 100%;
grid-template-columns: 1fr 2fr 1fr;
gap: 1vw;
grid-auto-rows: auto;
diff --git a/samples/examples/iframe-style.css b/samples/examples/iframe-style.css
new file mode 100644
index 00000000..a3e85a11
--- /dev/null
+++ b/samples/examples/iframe-style.css
@@ -0,0 +1,255 @@
+@font-face {
+ font-family: 'Roboto';
+ src: url('/assets/fonts/Roboto-Regular.ttf') format('truetype');
+ font-weight: 100 900;
+ }
+
+ @font-face {
+ font-family: 'Bricolage';
+ src: url('/assets/fonts/BricolageGrotesque.ttf') format('truetype');
+ font-weight: 100 900;
+ }
+
+ mr-app {
+ background-image: url('/assets/textures/skybox_starmap_4k.jpg');
+ }
+
+
+ :root {
+ --font-title: "Bricolage";
+ /* --font-body: "Onest", system-ui, sans-serif; */
+ /* PADDINGS & MARGINS */
+ --space: 4rem;
+ --outer: 1.5rem;
+ --inter: 1rem;
+ --inner: 0.5rem;
+ --inlet: 0.25rem;
+ /* CONSTRAINTS */
+ --hwdth: 56rem;
+ --mwdth: 68rem;
+ /* RADIUS */
+ --border-radius-large: 2rem;
+ /* SCROLL */
+ --scroll: 0;
+ --position: 0;
+ /* NEUTRAL COLORS */
+ --neutral-hue: 40;
+ --color-title: hsl(var(--neutral-hue), 20%, 20%);
+ --color-text: hsl(var(--neutral-hue), 15%, 10%);
+ --color-text-light: hsl(var(--neutral-hue), 20%, 42%);
+ --color-paper: hsl(var(--neutral-hue), 80%, 94%);
+ --color-paper-light: hsl(var(--neutral-hue), 75%, 92%);
+ --color-paper-card: white;
+ /* BUTTONS */
+ /* --rythm-hue: 310; */
+ --rythm-hue: 300;
+ /* --rythm-hue: 40; */
+ --color-button: hsl(var(--rythm-hue), 15%, 96%);
+ --color-button-hover: hsl(var(--rythm-hue), 100%, 90%);
+ --color-button-active: hsl(var(--rythm-hue), 100%, 85%);
+ --color-button-text: hsl(var(--rythm-hue), 15%, 15%);
+ --color-button-ring: hsl(var(--rythm-hue), 100%, 70%);
+ /* CTA */
+ /* --hue: 210; */
+ --hue: 210;
+ --color-cta: hsl(var(--hue), 70%, 40%);
+ --color-cta-hover: hsl(var(--hue), 70%, 55%);
+ --color-cta-active: hsl(var(--hue), 70%, 60%);
+ --color-cta-text: hsl(var(--hue), 10%, 100%);
+ --color-cta-focus-ring: hsl(var(--hue), 100%, 100%);
+ /* OPTIONS */
+ --option-hue: 40;
+ --color-option: hsl(var(--option-hue), 50%, 83%);
+ --color-option-hover: hsl(var(--option-hue), 50%, 86%);
+ --color-option-active: hsl(var(--option-hue), 50%, 88%);
+ --color-option-text: var(--color-text);
+ --color-option-focus-ring: hsl(var(--option-hue), 50%, 50%);
+ /* OPTIONS SELECTED */
+ --color-option-selected: hsl(var(--option-hue), 100%, 100%);
+ --color-option-selected-text: hsl(var(--hue), 80%, 30%);
+ /* FOCUS */
+ --color-focus-outline: hsl(var(--hue), 100%, 50%);
+ /* BORDERS */
+ --color-border-light: hsl(var(--rythm-hue), 15%, 92%);
+ --color-border-static: hsla(var(--rythm-hue), 100%, 15%, 15%);
+ --color-border-field-hover: hsl(var(--rythm-hue), 80%, 80%);
+ --color-border-field-active: hsl(var(--rythm-hue), 100%, 70%);
+ /* SHADOWS */
+ --button-shadow: 0 0.25rem 1rem -0.5rem hsla(30, 15%, 15%, 20%);
+ --main-shadow: 0 0 1rem -0.5rem hsla(30, 50%, 25%, 50%);
+ }
+
+ body {
+ background-color: var(--c-plate);
+ font-family: var(--font-body);
+ color: var(--c-text);
+ font-size: 1px;
+ }
+
+ main {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: 6rem;
+ background: var(--c-plate);
+ padding: 4vw;
+ overflow-y: auto;
+ max-width: var(--content-max-width);
+ margin: 0 auto;
+ }
+
+ #mark {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ pointer-events: none;
+ z-index: 999;
+ padding-top: 1rem;
+ }
+
+ .layout {
+ background-color: var(--color-paper);
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ height: 100vh;
+ }
+
+ #iframe {
+ width: 100%;
+ height: 100%;
+ }
+
+ #navbar {
+ background-color: rgb(51, 50, 50);
+ border-radius: 1%;
+ position:fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 4;
+ display: grid;
+ grid-template-columns: 1fr 2fr 0.5fr 0.5fr;
+ padding: 10px;
+ }
+
+ .title {
+ margin: 0 auto;
+ font-family: var(--font-title);
+ font-weight: 500;
+ font-size: 8vw;
+ line-height: 100%;
+ color: rgba(24, 24, 24, 0.75);
+ font-variation-settings: 'opsz' 80, 'wght' 550;
+ font-weight: bold;
+ align-self: center;
+ grid-column: 2;
+
+
+ }
+
+ .company {
+ font-family: var(--font-title);
+ font-size: 4vw;
+ line-height: 100%;
+ color: rgb(55, 55, 55);
+ align-self: center;
+ grid-column: 1;
+ }
+
+ .spin-button {
+ margin: auto;
+ grid-column: 4;
+ align-self: end;
+ font-family: var(--font-title);
+ font-size: 4vw;
+ line-height: 100%;
+ }
+
+ .logo {
+ grid-column: 3;
+ z-index: 25;
+ }
+
+ #logo-model{
+ scale: 0.0005;
+ }
+
+ #table-model{
+ scale: 0.002;
+ }
+
+ .sub-title {
+ font-family: var(--font-title);
+ font-size: 6vw;
+ margin-bottom: 1vh;
+ line-height: 100%;
+ text-align: center;
+ color: rgba(24, 24, 24, 0.75);
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+
+ }
+
+ .example-link {
+ font-family: var(--font-title);
+ font-size: 2.5vw;
+ line-height: 100%;
+ color: rgba(24, 24, 24, 0.75);
+ margin: 0 auto;
+ }
+
+ .example-header {
+ font-family: var(--font-title);
+ font-size: 3.5vw;
+ line-height: 100%;
+ text-align: center;
+ margin: 0 auto;
+ color: rgba(24, 24, 24, 0.75);
+ z-index: 2;
+ }
+
+ .links {
+ display:grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1vw;
+ margin-bottom: 10px;
+ z-index: 2;
+ }
+
+ .col-1{
+ grid-column: 1;
+ }
+
+ .col-2{
+ grid-column: 2;
+ }
+
+ .col-3{
+ grid-column: 3;
+ }
+
+ .headset {
+ grid-row: 2 / 5;
+ grid-column: 1 / -1;
+ object-fit: cover;
+ z-index: 1;
+ }
+
+ /* .headset > mr-img {
+ width: 100%;
+ object-fit: cover;
+ } */
+
+ .paragraph {
+ font-family: 'Roboto';
+ line-height: 100%;
+ font-size: 16px;
+
+ grid-column: 2;
+ z-index: 2;
+ }
+
\ No newline at end of file
diff --git a/samples/examples/iframe.html b/samples/examples/iframe.html
new file mode 100644
index 00000000..b2d2a7f8
--- /dev/null
+++ b/samples/examples/iframe.html
@@ -0,0 +1,23 @@
+
+
+
+
+ mrjs - iframe
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/samples/examples/panels-style.css b/samples/examples/panels-style.css
index 64c49901..c79044d2 100644
--- a/samples/examples/panels-style.css
+++ b/samples/examples/panels-style.css
@@ -81,6 +81,11 @@
font-size: 16px;
}
+ /* mr-app.inXR {
+ width: 1080px;
+ height: 1080px;
+ } */
+
.mrjs {
font-family: var(--font-title);
font-size: 4vw;
diff --git a/samples/examples/panels.html b/samples/examples/panels.html
index a9dbf74e..b35af270 100644
--- a/samples/examples/panels.html
+++ b/samples/examples/panels.html
@@ -157,7 +157,7 @@
index += 1
}
- panel.object3D.lookAt(forwardVec)
+ // panel.object3D.lookAt(forwardVec)
}
@@ -178,7 +178,13 @@
}
+ document.addEventListener('enterXR', () => {
+ document.querySelector('mr-app').classList.add('inXR')
+ spread()
+ })
+
document.addEventListener('exitXR', () => {
+ document.querySelector('mr-app').classList.remove('inXR')
unfolded = false
spread()
})
diff --git a/src/core/MRApp.js b/src/core/MRApp.js
index 30593d21..7c951f64 100644
--- a/src/core/MRApp.js
+++ b/src/core/MRApp.js
@@ -41,14 +41,22 @@ export class MRApp extends MRElement {
*
*/
get appWidth() {
- return parseFloat(this.compStyle.width.split('px')[0]);
+ let result = parseFloat(this.compStyle.width.split('px')[0]);
+ if (mrjsUtils.xr.isPresenting) {
+ result = (result / window.innerWidth) * mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION
+ }
+ return result
}
/**
*
*/
get appHeight() {
- return parseFloat(this.compStyle.height.split('px')[0]);
+ let result = parseFloat(this.compStyle.height.split('px')[0]);
+ if (mrjsUtils.xr.isPresenting) {
+ result = (result / window.innerHeight) * mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION
+ }
+ return result
}
/**
@@ -323,6 +331,8 @@ export class MRApp extends MRElement {
this.anchor.position.setX(0.015);
this.anchor.position.setZ(-0.5);
+ this.user.updateProjectionMatrix();
+
// Audio listner needed for spatial audio
};
diff --git a/src/core/MRDivEntity.js b/src/core/MRDivEntity.js
index 744ef73c..acff26e2 100644
--- a/src/core/MRDivEntity.js
+++ b/src/core/MRDivEntity.js
@@ -47,12 +47,12 @@ export class MRDivEntity extends MREntity {
* @returns {number} - the resolved height
*/
get height() {
- const rect = this.getBoundingClientRect();
+ let result = this.getBoundingClientRect().height;
if (mrjsUtils.xr.isPresenting) {
- return (rect.height / mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION) * mrjsUtils.app.scale;
- }
- return (rect.height / global.appHeight) * global.viewPortHeight;
+ result = (result / window.innerHeight) * mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION
+ }
+ return (result / global.appHeight) * global.viewPortHeight * mrjsUtils.app.scale
}
/**
@@ -61,12 +61,13 @@ export class MRDivEntity extends MREntity {
* @returns {number} - the resolved width
*/
get width() {
- const rect = this.getBoundingClientRect();
+ let result = this.getBoundingClientRect().width;
if (mrjsUtils.xr.isPresenting) {
- return (rect.width / mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION) * mrjsUtils.app.scale;
- }
- return (rect.width / global.appWidth) * global.viewPortWidth;
+ result = (result / window.innerWidth) * mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION
+ }
+ return (result / global.appWidth) * global.viewPortWidth * mrjsUtils.app.scale
+
}
/**
diff --git a/src/core/componentSystems/PanelSystem.js b/src/core/componentSystems/PanelSystem.js
index c2fbb5d8..6253d100 100644
--- a/src/core/componentSystems/PanelSystem.js
+++ b/src/core/componentSystems/PanelSystem.js
@@ -55,8 +55,15 @@ export class PanelSystem extends MRSystem {
let windowWidth = global.viewPortWidth * mrjsUtils.app.scale;
let windowHeight = global.viewPortHeight * mrjsUtils.app.scale;
- let centeredX = rect.left - appRect.left - centerX;
- let centeredY = rect.top - appRect.top - centerY;
+
+ let top = rect.top - appRect.top
+ let left = rect.left - appRect.left
+ if(mrjsUtils.xr.isPresenting) {
+ top = (top / window.innerHeight) * mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION
+ left = (left / window.innerWidth) * mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION
+ }
+ let centeredX = left - centerX;
+ let centeredY = top - centerY;
let threeX = (centeredX / innerWidth) * windowWidth;
let threeY = (centeredY / innerHeight) * windowHeight;
diff --git a/src/core/componentSystems/TextSystem.js b/src/core/componentSystems/TextSystem.js
index beb1e5f8..b3b8f52c 100644
--- a/src/core/componentSystems/TextSystem.js
+++ b/src/core/componentSystems/TextSystem.js
@@ -198,11 +198,8 @@ export class TextSystem extends MRSystem {
* @returns {number} - the font size adjusted for the display as expected
*/
parseFontSize(val, el) {
- const result = parseFloat(val.split('px')[0]) / mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION;
- if (mrjsUtils.xr.isPresenting) {
- return result * mrjsUtils.app.scale;
- }
- return result;
+ let result = parseFloat(val.split('px')[0]) / mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION;
+ return result * mrjsUtils.app.scale;
}
/**