feat: VglObjLoader as example component

Author: h-ikeda

.gitignore

@@ -1,2 +1,3 @@
 /js/
 /components/
+/examples/*/

_examples-ex/index.js

@@ -0,0 +1,9 @@
+/* globals Vue */
+
+import VglObjLoaderExample from './loaders/vgl-obj-loader.vue';
+
+const examples = {
+  VglObjLoaderExample,
+};
+
+Object.entries(examples).forEach(([name, component]) => Vue.component(name, component));

_examples-ex/loaders/vgl-obj-loader.vue

@@ -0,0 +1,16 @@
+<template>
+  <vgl-renderer>
+    <vgl-scene>
+      <vgl-obj-loader src="/obj/seahorse.obj" />
+      <vgl-ambient-light intensity="0.5" />
+      <vgl-directional-light
+        position="1 1 1"
+        intensity="0.5"
+      />
+    </vgl-scene>
+    <vgl-perspective-camera
+      orbit-position="300 1 0.2"
+      orbit-target="0 0 -300"
+    />
+  </vgl-renderer>
+</template>

_examples/geometries/vgl-text-geometry.vue

@@ -4,7 +4,7 @@
       <vgl-scene>
         <vgl-text-geometry
           name="text"
-          font="/js/helvetiker_regular.typeface.json"
+          font="/js/vendor/helvetiker_regular.typeface.json"
           :text="text"
         />
         <vgl-mesh-standard-material name="std" />

_includes/head_custom.html

@@ -6,7 +6,8 @@
   ></script>
 {% endif %}
 
-<script src="{{ '/js/vue.min.js' | relative_url }}"></script>
-<script src="{{ '/js/three.min.js' | relative_url }}"></script>
+<script src="{{ '/js/vendor/vue.min.js' | relative_url }}"></script>
+<script src="{{ '/js/vendor/three.min.js' | relative_url }}"></script>
 <script src="{{ '/js/vue-gl.js' | relative_url }}"></script>
 <script src="{{ '/js/examples.js' | relative_url }}"></script>
+<script src="{{ '/js/examples-ex.js' | relative_url }}"></script>

_rollup/rollup-plugin-generate-component-documents.js

@@ -0,0 +1,14 @@
+---
+has_children: true
+nav_order: D
+---
+# API / Example Components
+
+## Trying example components
+
+Each example components are built standalone under the [dist/js/examples](https://unpkg.com/browse/vue-gl/dist/examples/).
+To use them, load scripts directly with `<script>` element after loading VueGL or
+import with module bundlers.
+
+When load scripts directly, the component will be injected under the `VueGL` namespace.
+Resister `VueGL.<ComponentName>` to `Vue` before instantiating the components. 

examples/index.md

@@ -1,5 +1,5 @@
 ---
-nav_order: 2
+nav_order: B
 parent: Guide
 ---
 

guide/getting-started.md

@@ -1,5 +1,5 @@
 ---
-nav_order: 1
+nav_order: A
 has_children: true
 ---
 # Guide

guide/index.md

@@ -1,6 +1,6 @@
 ---
 parent: Guide
-nav_order: 1
+nav_order: A
 ---
 # Installation
 {: .no_toc}