-
Notifications
You must be signed in to change notification settings - Fork 1
/
example-components.html
47 lines (46 loc) · 20.5 KB
/
example-components.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Example components usage | VueGL</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3600741293730423" async="true" crossorigin="anonymous"></script>
<meta name="description" content="Vue.js components rendering 3D graphics reactively via three.js">
<link rel="preload" href="/assets/css/2.styles.1fe08c25.css" as="style"><link rel="preload" href="/assets/js/app.810b77ab.js" as="script"><link rel="preload" href="/assets/js/4.345d234f.js" as="script"><link rel="preload" href="/assets/js/68.c7f307ae.js" as="script"><link rel="prefetch" href="/assets/js/0.2ec8bcba.js"><link rel="prefetch" href="/assets/js/1.80f3d77e.js"><link rel="prefetch" href="/assets/js/10.9dfe3fc5.js"><link rel="prefetch" href="/assets/js/100.8aa704da.js"><link rel="prefetch" href="/assets/js/101.99f47b16.js"><link rel="prefetch" href="/assets/js/102.37c30e5e.js"><link rel="prefetch" href="/assets/js/103.b5a18886.js"><link rel="prefetch" href="/assets/js/104.e3d89514.js"><link rel="prefetch" href="/assets/js/105.1d488bc8.js"><link rel="prefetch" href="/assets/js/106.d752df1b.js"><link rel="prefetch" href="/assets/js/107.de6a90fb.js"><link rel="prefetch" href="/assets/js/108.76975dea.js"><link rel="prefetch" href="/assets/js/109.dfe688f5.js"><link rel="prefetch" href="/assets/js/11.c0525fb7.js"><link rel="prefetch" href="/assets/js/110.242a9b56.js"><link rel="prefetch" href="/assets/js/111.16787aba.js"><link rel="prefetch" href="/assets/js/112.ae285924.js"><link rel="prefetch" href="/assets/js/113.22de11f3.js"><link rel="prefetch" href="/assets/js/114.b71470e0.js"><link rel="prefetch" href="/assets/js/115.f7af5fcf.js"><link rel="prefetch" href="/assets/js/116.766d82f0.js"><link rel="prefetch" href="/assets/js/117.4d00a391.js"><link rel="prefetch" href="/assets/js/118.08026720.js"><link rel="prefetch" href="/assets/js/119.2029d950.js"><link rel="prefetch" href="/assets/js/12.2915b670.js"><link rel="prefetch" href="/assets/js/120.e58209ed.js"><link rel="prefetch" href="/assets/js/121.82def9fe.js"><link rel="prefetch" href="/assets/js/122.3e1c531c.js"><link rel="prefetch" href="/assets/js/123.e44782d1.js"><link rel="prefetch" href="/assets/js/124.7fbc2c5b.js"><link rel="prefetch" href="/assets/js/125.c950006d.js"><link rel="prefetch" href="/assets/js/126.32278b64.js"><link rel="prefetch" href="/assets/js/127.5fc5abd3.js"><link rel="prefetch" href="/assets/js/128.b33440bc.js"><link rel="prefetch" href="/assets/js/129.4f6f31ee.js"><link rel="prefetch" href="/assets/js/13.a419e8d3.js"><link rel="prefetch" href="/assets/js/130.9297c0e7.js"><link rel="prefetch" href="/assets/js/131.3461fac8.js"><link rel="prefetch" href="/assets/js/132.5d01e860.js"><link rel="prefetch" href="/assets/js/133.bdbfb34c.js"><link rel="prefetch" href="/assets/js/134.a2b60677.js"><link rel="prefetch" href="/assets/js/135.996d2d18.js"><link rel="prefetch" href="/assets/js/136.6d6e2fde.js"><link rel="prefetch" href="/assets/js/137.698b20c4.js"><link rel="prefetch" href="/assets/js/138.5a966b9a.js"><link rel="prefetch" href="/assets/js/139.1b307026.js"><link rel="prefetch" href="/assets/js/14.f7786200.js"><link rel="prefetch" href="/assets/js/140.94aff60a.js"><link rel="prefetch" href="/assets/js/141.fdfb84b1.js"><link rel="prefetch" href="/assets/js/142.2e77844f.js"><link rel="prefetch" href="/assets/js/143.118738eb.js"><link rel="prefetch" href="/assets/js/144.f4ec97ca.js"><link rel="prefetch" href="/assets/js/145.dbd70cd6.js"><link rel="prefetch" href="/assets/js/146.13c3353a.js"><link rel="prefetch" href="/assets/js/147.d19519e3.js"><link rel="prefetch" href="/assets/js/148.b900caf3.js"><link rel="prefetch" href="/assets/js/149.ff1ac3a4.js"><link rel="prefetch" href="/assets/js/15.33635660.js"><link rel="prefetch" href="/assets/js/150.5f890697.js"><link rel="prefetch" href="/assets/js/151.4d686461.js"><link rel="prefetch" href="/assets/js/152.f8f7348f.js"><link rel="prefetch" href="/assets/js/153.2578a4e9.js"><link rel="prefetch" href="/assets/js/154.3d544c78.js"><link rel="prefetch" href="/assets/js/155.4ccb2ca9.js"><link rel="prefetch" href="/assets/js/156.aa2358d5.js"><link rel="prefetch" href="/assets/js/16.7749425a.js"><link rel="prefetch" href="/assets/js/17.9e33595d.js"><link rel="prefetch" href="/assets/js/18.8e2318a5.js"><link rel="prefetch" href="/assets/js/19.cb1d9ddf.js"><link rel="prefetch" href="/assets/js/20.70d87533.js"><link rel="prefetch" href="/assets/js/21.dc7e4d8d.js"><link rel="prefetch" href="/assets/js/22.14378c33.js"><link rel="prefetch" href="/assets/js/23.b3285682.js"><link rel="prefetch" href="/assets/js/24.8e40f6a7.js"><link rel="prefetch" href="/assets/js/25.1daa2632.js"><link rel="prefetch" href="/assets/js/26.cd801e48.js"><link rel="prefetch" href="/assets/js/27.9bfff3e8.js"><link rel="prefetch" href="/assets/js/28.0f8fb02d.js"><link rel="prefetch" href="/assets/js/29.96019fee.js"><link rel="prefetch" href="/assets/js/30.2bfc6fb0.js"><link rel="prefetch" href="/assets/js/31.554ef70f.js"><link rel="prefetch" href="/assets/js/32.b99839d2.js"><link rel="prefetch" href="/assets/js/33.2582561c.js"><link rel="prefetch" href="/assets/js/34.e7c0d3da.js"><link rel="prefetch" href="/assets/js/35.acfea660.js"><link rel="prefetch" href="/assets/js/36.e00f75c5.js"><link rel="prefetch" href="/assets/js/37.f5a7e287.js"><link rel="prefetch" href="/assets/js/38.edb177fe.js"><link rel="prefetch" href="/assets/js/39.88a69496.js"><link rel="prefetch" href="/assets/js/40.e8dc78a4.js"><link rel="prefetch" href="/assets/js/41.1f905095.js"><link rel="prefetch" href="/assets/js/42.8642dd25.js"><link rel="prefetch" href="/assets/js/43.cf563e4c.js"><link rel="prefetch" href="/assets/js/44.997f4b3f.js"><link rel="prefetch" href="/assets/js/45.5a9fa8db.js"><link rel="prefetch" href="/assets/js/46.0bdccce7.js"><link rel="prefetch" href="/assets/js/47.ad6c1ba7.js"><link rel="prefetch" href="/assets/js/48.862614c6.js"><link rel="prefetch" href="/assets/js/49.e5001492.js"><link rel="prefetch" href="/assets/js/5.1a624111.js"><link rel="prefetch" href="/assets/js/50.72265ac2.js"><link rel="prefetch" href="/assets/js/51.c73556fb.js"><link rel="prefetch" href="/assets/js/52.96a5810e.js"><link rel="prefetch" href="/assets/js/53.4e247c00.js"><link rel="prefetch" href="/assets/js/54.8ffcf890.js"><link rel="prefetch" href="/assets/js/55.96cb72ef.js"><link rel="prefetch" href="/assets/js/56.59c759d0.js"><link rel="prefetch" href="/assets/js/57.9ad889d6.js"><link rel="prefetch" href="/assets/js/58.0d919e20.js"><link rel="prefetch" href="/assets/js/59.7193fbc9.js"><link rel="prefetch" href="/assets/js/6.ebb17d34.js"><link rel="prefetch" href="/assets/js/60.4925f8bb.js"><link rel="prefetch" href="/assets/js/61.598a35e6.js"><link rel="prefetch" href="/assets/js/62.186e63c0.js"><link rel="prefetch" href="/assets/js/63.88507273.js"><link rel="prefetch" href="/assets/js/64.84e4bdd8.js"><link rel="prefetch" href="/assets/js/65.cd9d36d0.js"><link rel="prefetch" href="/assets/js/66.208a04b2.js"><link rel="prefetch" href="/assets/js/67.d9ab1152.js"><link rel="prefetch" href="/assets/js/69.6db24382.js"><link rel="prefetch" href="/assets/js/7.eec268fe.js"><link rel="prefetch" href="/assets/js/70.a2af6a5c.js"><link rel="prefetch" href="/assets/js/71.352b65c0.js"><link rel="prefetch" href="/assets/js/72.427baeae.js"><link rel="prefetch" href="/assets/js/73.cf185a92.js"><link rel="prefetch" href="/assets/js/74.343e6969.js"><link rel="prefetch" href="/assets/js/75.360c3027.js"><link rel="prefetch" href="/assets/js/76.da2e7aaa.js"><link rel="prefetch" href="/assets/js/77.00ba1c3a.js"><link rel="prefetch" href="/assets/js/78.af20a7c3.js"><link rel="prefetch" href="/assets/js/79.0c8e03f9.js"><link rel="prefetch" href="/assets/js/8.40881930.js"><link rel="prefetch" href="/assets/js/80.fb4370ea.js"><link rel="prefetch" href="/assets/js/81.577ed741.js"><link rel="prefetch" href="/assets/js/82.533cf4d3.js"><link rel="prefetch" href="/assets/js/83.6c0d0a9f.js"><link rel="prefetch" href="/assets/js/84.ac2edfde.js"><link rel="prefetch" href="/assets/js/85.fe5e8333.js"><link rel="prefetch" href="/assets/js/86.abe3c7a1.js"><link rel="prefetch" href="/assets/js/87.9c663830.js"><link rel="prefetch" href="/assets/js/88.ecb93d29.js"><link rel="prefetch" href="/assets/js/89.0aa57a1f.js"><link rel="prefetch" href="/assets/js/9.b97b91e1.js"><link rel="prefetch" href="/assets/js/90.1a5b484f.js"><link rel="prefetch" href="/assets/js/91.3c294e05.js"><link rel="prefetch" href="/assets/js/92.94c2a0d9.js"><link rel="prefetch" href="/assets/js/93.4a4e44f0.js"><link rel="prefetch" href="/assets/js/94.fb00945d.js"><link rel="prefetch" href="/assets/js/95.0418182a.js"><link rel="prefetch" href="/assets/js/96.74d1ace5.js"><link rel="prefetch" href="/assets/js/97.4f91d6a8.js"><link rel="prefetch" href="/assets/js/98.94cfb23e.js"><link rel="prefetch" href="/assets/js/99.f5ae4a6d.js">
<link rel="stylesheet" href="/assets/css/2.styles.1fe08c25.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/logo.svg" alt="VueGL" class="logo"> <span class="site-name can-hide">VueGL</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://github.com/vue-gl/vue-gl" target="_blank" rel="noopener noreferrer" class="nav-link external">
Source on GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://github.com/vue-gl/vue-gl" target="_blank" rel="noopener noreferrer" class="nav-link external">
Source on GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Example Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/example-components.html" aria-current="page" class="active sidebar-link">Example components usage</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/example-components.html#loading-script-directly-on-the-browser" class="sidebar-link">Loading <script> directly on the browser</a></li><li class="sidebar-sub-header"><a href="/example-components.html#using-npm-and-module-bundler" class="sidebar-link">Using npm and module bundler</a></li></ul></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>loaders</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Resources</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="example-components-usage"><a href="#example-components-usage" class="header-anchor">#</a> Example components usage</h1> <p>Example components are used for conveniently trying Three.js example classes. They can be found at dist/js/examples directory.</p> <h2 id="loading-script-directly-on-the-browser"><a href="#loading-script-directly-on-the-browser" class="header-anchor">#</a> Loading <script> directly on the browser</h2> <p>Each example component is in an independent script file so that you need only scripts contain
necessary components to be loaded.</p> <p>The following example loads <VglObjLoader> component. Note that you have to put dependent
scripts before example component scripts. Example components are injected to the <code>VueGL</code> namespace.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>path/to/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>path/to/three.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>path/to/vue-gl.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>path/to/vue-gl/examples/loaders/vgl-obj-loader.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// VueGL.VglObjLoader is available here.</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>Then register loaded components to use them.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'VglObjLoader'</span><span class="token punctuation">,</span> VueGL<span class="token punctuation">.</span>VglObjLoader<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>If you are registering all VueGL components to Vue.js globally, basic registration code like below
works fine since example components are just added to the namespace.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>VueGL<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>name<span class="token punctuation">,</span> component<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> component<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="using-npm-and-module-bundler"><a href="#using-npm-and-module-bundler" class="header-anchor">#</a> Using npm and module bundler</h2> <p>For import/require example components, each module exports a component object as default.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// commonJS</span>
<span class="token keyword">const</span> VglObjLoader <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-gl/dist/examples/loaders/vgl-obj-loader'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// ECMA Script</span>
<span class="token keyword">import</span> VglObjLoader <span class="token keyword">from</span> <span class="token string">'vue-gl/dist/examples/loaders/vgl-obj-loader'</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/components/textures/vgl-texture.html" class="prev">
<vgl-texture>
</a></span> <span class="next"><a href="/example-components/loaders/vgl-obj-loader.html">
<vgl-obj-loader>
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.810b77ab.js" defer></script><script src="/assets/js/4.345d234f.js" defer></script><script src="/assets/js/68.c7f307ae.js" defer></script>
</body>
</html>