mirror of
https://github.com/anatolykopyl/vue-three-d-mockup.git
synced 2026-03-26 12:55:08 +00:00
77 lines
20 KiB
JavaScript
77 lines
20 KiB
JavaScript
import{M as l,s as e}from"./chunks/screen.f0e1a01d.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.b6ea30b2.js";var d="/vue-three-d-mockup/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;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</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;">"</span><span style="color:#C3E88D;">screen.png</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</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;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></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;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</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;">"</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</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;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</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;">'</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></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;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</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;">"</span><span style="color:#82AAFF;">require</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</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;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></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;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</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;">"</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;">"</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;">"</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;">"</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;">"</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;">"</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;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</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;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</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;">'</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></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;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</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;">"</span><span style="color:#A6ACCD;">vidReady</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;">"</span><span style="color:#A6ACCD;">videoElement</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</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;">"</span><span style="color:#A6ACCD;">screenVideo</span><span style="color:#89DDFF;">"</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;">"</span><span style="color:#C3E88D;">videoElement</span><span style="color:#89DDFF;">"</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;">"</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;"> = </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">"</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;">"</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;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> ></</span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></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;">'</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">'</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;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</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;">'</span><span style="color:#C3E88D;">./assets/screen.mp4</span><span style="color:#89DDFF;">'</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;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></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><video></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>"white"</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>"white"</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'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><video></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><video></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","lastUpdated":1658667004000}'),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};
|