Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(SVG): add demo, update usage, add troubleshooting tip #231

Merged
merged 4 commits into from
Sep 24, 2023
Merged

docs(SVG): add demo, update usage, add troubleshooting tip #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1cb93f0
docs(SVG): add demo
andretchen0 Sep 22, 2023
4657b3c
docs(SVG): update usage example
andretchen0 Sep 22, 2023
9cfcca4
docs(SVG): add troubleshooting tip
andretchen0 Sep 22, 2023
3bd7de4
Merge branch 'main' into docs/svgdemo
andretchen0 Sep 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/.vitepress/theme/components/SVGDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions docs/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ declare module 'vue' {
ScrollControlsDemo: typeof import('./.vitepress/theme/components/ScrollControlsDemo.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']
Expand Down
34 changes: 27 additions & 7 deletions docs/guide/loaders/svg.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
```
Expand Down Expand Up @@ -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]"`.
Loading