Merge pull request #231 from Tresjs/docs/svgdemo

docs(SVG): add demo, update usage, add troubleshooting tip
Tresjs · Sep 24, 2023 · 630f381 · 630f381
2 parents 4613264 + 3bd7de4
commit 630f381
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git a/docs/.vitepress/theme/components/SVGDemo.vue b/docs/.vitepress/theme/components/SVGDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, SVG } from '@tresjs/cientos'
+
+const svgURL = 'https://raw.githubusercontent.com/Tresjs/assets/main/svgs/cientos_heart.svg'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <OrbitControls />
+    <Suspense>
+      <SVG 
+        :src="svgURL"
+        :position="[-0.4, 1, 0]"
+        :scale="0.01"
+      />
+    </Suspense>
+    <TresGridHelper />
+  </TresCanvas>
+</template>
diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -31,6 +31,7 @@ declare module 'vue' {
     SkyDemo: typeof import('./.vitepress/theme/components/SkyDemo.vue')['default']
     SmokeDemo: typeof import('./.vitepress/theme/components/SmokeDemo.vue')['default']
     StarsDemo: typeof import('./.vitepress/theme/components/StarsDemo.vue')['default']
+    SVGDemo: typeof import('./.vitepress/theme/components/SVGDemo.vue')['default']
     StatsGlDemo: typeof import('./.vitepress/theme/components/StatsGlDemo.vue')['default']
     Text3Demo: typeof import('./.vitepress/theme/components/Text3Demo.vue')['default']
     TransformControlsDemo: typeof import('./.vitepress/theme/components/TransformControlsDemo.vue')['default']

diff --git a/docs/guide/loaders/svg.md b/docs/guide/loaders/svg.md
@@ -1,19 +1,33 @@
 # SVG <Badge type="warning" text="^3.3.0" />
 
+<DocsDemo>
+  <SVGDemo />
+</DocsDemo>
+
 A wrapper around the `three` [SVGLoader](https://threejs.org/examples/?q=sv#webgl_loader_svg), this component allows you to easily load and display SVG elements in your **TresJS** scene. 
 
 ## Usage
 
-```ts
-import { SVG } from '@tresjs/cientos'
-```
+```vue{3,12-18}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, SVG } from '@tresjs/cientos'
+
+const svgURL = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/svgs/cientos_heart.svg'
+</script>
 
-```vue{4}
 <template>
-  <TresCanvas>
+  <TresCanvas clear-color="#333">
+    <OrbitControls />
     <Suspense>
-      <SVG src="/favicon.svg" />
+      <SVG 
+        :src="svgURL"
+        :position="[-0.4, 1, 0]"
+        :scale="0.01"
+      />
     </Suspense>
+    <TresGridHelper />
   </TresCanvas>
 </template>
 ```
@@ -95,4 +109,10 @@ Here are some things to try if you run into problems:
 ### Parts of the SVG ["z-fight"](https://en.wikipedia.org/wiki/Z-fighting)
 
 * In the component, [change the `depth` prop](#depth).
-* Increase the distance between the component and other on-screen elements.
+* Increase the distance between the component and other on-screen elements.
+
+### The SVG is not visible
+
+* If importing an SVG, make sure the path is correct – check the console for loading errors.
+* Try scaling the SVG component down, e.g., `:scale="0.01"`.
+* Try moving the SVG component up (+y), e.g., `:position="[0,2,0]"`.