anatolykopyl/vue-three-d-mockup
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-three-d-mockup.git synced 2026-03-26 12:55:08 +00:00
Code Issues Projects Releases Wiki Activity

Deploy to GitHub Pages

Browse Source
This commit is contained in:
anatolykopyl
2022-07-24 12:28:06 +00:00
commit df592b6555
35 changed files with 17066 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
404.html Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/app.1b5fc780.js Normal file
View File

File diff suppressed because one or more lines are too long

3018
assets/chunks/screen.9127d83c.js Normal file
View File

File diff suppressed because one or more lines are too long

76
assets/guide.md.77d8480e.js Normal file
View File

@@ -0,0 +1,76 @@
import{M as l,s as e}from"./chunks/screen.9127d83c.js";import{r as c,o as r,c as F,a as s,b as D,u as a,d as i,e as y,f as n}from"./app.1b5fc780.js";var d="/assets/screen.273a9703.mp4";const C=n(`<h1 id="guide" tabindex="-1">Guide <a class="header-anchor" href="#guide" aria-hidden="true">#</a></h1><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-hidden="true">#</a></h2><div class="language-bash"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">npm install vue-three-d-mockup</span></span>
<span class="line"></span></code></pre></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-hidden="true">#</a></h2>`,4),h=n(`<h3 id="simple-example" tabindex="-1">Simple example <a class="header-anchor" href="#simple-example" aria-hidden="true">#</a></h3><p><code>screen.png</code> is a static asset in the public folder.</p><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">screen.png</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h3 id="using-assets-as-the-screen" tabindex="-1">Using assets as the screen <a class="header-anchor" href="#using-assets-as-the-screen" aria-hidden="true">#</a></h3><ul><li><h4 id="in-vite-powered-projects" tabindex="-1">In vite powered projects <a class="header-anchor" href="#in-vite-powered-projects" aria-hidden="true">#</a></h4></li></ul><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><ul><li><h4 id="in-vue-cli-powered-projects" tabindex="-1">In vue-cli powered projects <a class="header-anchor" href="#in-vue-cli-powered-projects" aria-hidden="true">#</a></h4></li></ul><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">require</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h3 id="multiple-phones" tabindex="-1">Multiple phones <a class="header-anchor" href="#multiple-phones" aria-hidden="true">#</a></h3>`,9),u=n(`<div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span></span>
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">, </span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">]</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">position</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[</span></span>
<span class="line"><span style="color:#89DDFF;"> {</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">50</span></span>
<span class="line"><span style="color:#89DDFF;"> },</span></span>
<span class="line"><span style="color:#89DDFF;"> {</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: </span><span style="color:#F78C6C;">50</span></span>
<span class="line"><span style="color:#89DDFF;"> },</span></span>
<span class="line"><span style="color:#89DDFF;"> ]</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">rotation</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[{}, {</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">y</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">z</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.06</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;"> }]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
<span class="line"><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h3 id="video" tabindex="-1">Video <a class="header-anchor" href="#video" aria-hidden="true">#</a></h3>`,2),A=["src"],g=n(`<div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">videoElement</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">video</span></span>
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">screenVideo</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">videoElement</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">canplay</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;"> = </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">muted</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">autoplay</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">loop</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#C3E88D;"> position: fixed;</span></span>
<span class="line"><span style="color:#C3E88D;"> top: 0;</span></span>
<span class="line"><span style="color:#C3E88D;"> left: 0;</span></span>
<span class="line"><span style="color:#C3E88D;"> visibility: hidden;</span></span>
<span class="line"><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> &gt;&lt;/</span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ref</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenVideo </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> videoElement </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> vidReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h2 id="avaliable-props" tabindex="-1">Avaliable props <a class="header-anchor" href="#avaliable-props" aria-hidden="true">#</a></h2><table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>screen</code></td><td>String | Element | Array</td><td><code>true</code></td><td>none</td><td>Path to an image that will be displayed on the phones screen or the <code>&lt;video&gt;</code> element displayed on the phones screen. When using the latter there are <a href="#caveats">caveats</a>. Can also be an array of any of the options above.</td></tr><tr><td><code>lightClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the light as a CSS-style string.</td></tr><tr><td><code>phoneClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the phone as a CSS-style string.</td></tr><tr><td><code>position</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: 0, y: 0, z: 0 }</code></td><td>The position of the phone. Can also be an array if multiple screens specified.</td></tr><tr><td><code>rotation</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: -0.2, y: 0.3, z: 0.06 }</code></td><td>The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.</td></tr></tbody></table><h2 id="caveats" tabindex="-1">Caveats <a class="header-anchor" href="#caveats" aria-hidden="true">#</a></h2><ul><li>The <code>screen</code> prop is unreactive, so when using it as a video it&#39;s important to only render the <code>Mockup</code> element when the video is loaded. Check out the examples above to see how to do this.</li><li>The video on the model will not be shown if the original <code>&lt;video&gt;</code> element is hidden with <code>display: none</code>, so use <code>visibility: hidden</code> instead.</li><li>The video may not be autoplaying if the original <code>&lt;video&gt;</code> element is scrolled off screen.</li><li>Even with the mentioned above workarounds, the video may not be working in Safari.</li></ul>`,5),x=JSON.parse('{"title":"Guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Usage","slug":"usage"},{"level":3,"title":"Simple example","slug":"simple-example"},{"level":3,"title":"Using assets as the screen","slug":"using-assets-as-the-screen"},{"level":3,"title":"Multiple phones","slug":"multiple-phones"},{"level":3,"title":"Video","slug":"video"},{"level":2,"title":"Avaliable props","slug":"avaliable-props"},{"level":2,"title":"Caveats","slug":"caveats"}],"relativePath":"guide.md"}'),v={name:"guide.md"},q=Object.assign(v,{setup(m){const p=c(null),o=c(!1);return(f,t)=>(r(),F("div",null,[C,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:a(e)},null,8,["screen"])]),h,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:[a(e),a(e)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),u,s("p",null,[o.value?(r(),i(l,{key:0,style:{width:"100%",height:"400px"},screen:p.value},null,8,["screen"])):y("",!0)]),s("div",null,[s("video",{src:a(d),ref_key:"videoElement",ref:p,onCanplay:t[0]||(t[0]=_=>o.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",visibility:"hidden"}},null,40,A)]),g]))}});export{x as __pageData,q as default};

1
assets/guide.md.77d8480e.lean.js Normal file
View File

@@ -0,0 +1 @@
import{M as l,s as e}from"./chunks/screen.9127d83c.js";import{r as c,o as r,c as F,a as s,b as D,u as a,d as i,e as y,f as n}from"./app.1b5fc780.js";var d="/assets/screen.273a9703.mp4";const C=n("",4),h=n("",9),u=n("",2),A=["src"],g=n("",5),x=JSON.parse('{"title":"Guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Usage","slug":"usage"},{"level":3,"title":"Simple example","slug":"simple-example"},{"level":3,"title":"Using assets as the screen","slug":"using-assets-as-the-screen"},{"level":3,"title":"Multiple phones","slug":"multiple-phones"},{"level":3,"title":"Video","slug":"video"},{"level":2,"title":"Avaliable props","slug":"avaliable-props"},{"level":2,"title":"Caveats","slug":"caveats"}],"relativePath":"guide.md"}'),v={name:"guide.md"},q=Object.assign(v,{setup(m){const p=c(null),o=c(!1);return(f,t)=>(r(),F("div",null,[C,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:a(e)},null,8,["screen"])]),h,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:[a(e),a(e)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),u,s("p",null,[o.value?(r(),i(l,{key:0,style:{width:"100%",height:"400px"},screen:p.value},null,8,["screen"])):y("",!0)]),s("div",null,[s("video",{src:a(d),ref_key:"videoElement",ref:p,onCanplay:t[0]||(t[0]=_=>o.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",visibility:"hidden"}},null,40,A)]),g]))}});export{x as __pageData,q as default};

1
assets/index.md.e8d327de.js Normal file
View File

@@ -0,0 +1 @@
import{M as e,s as a}from"./chunks/screen.9127d83c.js";import{o as t,c as s,a as _,b as o,u as n,_ as c,f as r}from"./app.1b5fc780.js";const d=r('<h1 class="heading" data-v-7b43e306> Vue 3D Mockup </h1><p class="tagline" data-v-7b43e306> Create interactive 3D mockups with ease. </p><div class="buttons" data-v-7b43e306><a href="/guide" class="buttons__button" data-v-7b43e306> Guide </a><a href="https://github.com/anatolykopyl/vue-three-d-mockup" class="buttons__button buttons__button--secondary" data-v-7b43e306> Github </a></div>',3),v=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home"},"headers":[],"relativePath":"index.md"}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(t(),s("div",null,[_("main",null,[o(e,{class:"mockup",screen:n(a)},null,8,["screen"]),d])]))}});var f=c(i,[["__scopeId","data-v-7b43e306"]]);export{v as __pageData,f as default};

1
assets/index.md.e8d327de.lean.js Normal file
View File

@@ -0,0 +1 @@
import{M as e,s as a}from"./chunks/screen.9127d83c.js";import{o as t,c as s,a as _,b as o,u as n,_ as c,f as r}from"./app.1b5fc780.js";const d=r("",3),v=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home"},"headers":[],"relativePath":"index.md"}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(t(),s("div",null,[_("main",null,[o(e,{class:"mockup",screen:n(a)},null,8,["screen"]),d])]))}});var f=c(i,[["__scopeId","data-v-7b43e306"]]);export{v as __pageData,f as default};

BIN
assets/inter-cyrillic-ext.0877b0d9.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-cyrillic.f8750142.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-greek-ext.3e6f6728.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-greek.117e1956.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-cyrillic.ea42a392.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-greek-ext.4fbe9427.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-greek.8f4463c4.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-latin-ext.bd8920cc.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-latin.bd3b6f56.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-vietnamese.6ce511fb.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-latin-ext.7cc429bc.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-latin.4fe6132f.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-cyrillic-ext.e75737ce.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-cyrillic.5f2c6c8c.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-greek-ext.ab0619bc.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-greek.d5a6d92a.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-latin-ext.0030eebd.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-latin.2ed14f66.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-vietnamese.14ce25a6.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-vietnamese.2c644a25.woff2 Normal file
View File

Binary file not shown.

13830
assets/iphone.4fe8eea4.obj Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
assets/screen.13e2504d.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
assets/screen.273a9703.mp4 Normal file
View File

Binary file not shown.

1
assets/style.d257e3fd.css Normal file
View File

File diff suppressed because one or more lines are too long

96
guide.html Normal file
View File

File diff suppressed because one or more lines are too long

1
hashmap.json Normal file
View File

@@ -0,0 +1 @@
{"guide.md":"77d8480e","index.md":"e8d327de"}

21
index.html Normal file
View File

File diff suppressed because one or more lines are too long