From 577e89edfad3a74c948031e71c4e3fe23c522874 Mon Sep 17 00:00:00 2001 From: rodrigo Date: Tue, 11 Oct 2022 20:45:30 +0100 Subject: [PATCH 01/10] feat: add Svg component --- .storybook/stories/Svg.stories.tsx | 21 ++++++ README.md | 13 ++++ src/core/Svg.tsx | 100 +++++++++++++++++++++++++++++ src/core/index.ts | 1 + 4 files changed, 135 insertions(+) create mode 100644 .storybook/stories/Svg.stories.tsx create mode 100644 src/core/Svg.tsx diff --git a/.storybook/stories/Svg.stories.tsx b/.storybook/stories/Svg.stories.tsx new file mode 100644 index 000000000..ab94b3d40 --- /dev/null +++ b/.storybook/stories/Svg.stories.tsx @@ -0,0 +1,21 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import * as React from 'react' +import { Suspense } from 'react' +import { Vector3 } from 'three' +import { Svg } from '../../src' +import { Setup } from '../Setup' + +export default { + title: 'Abstractions/Svg', + component: Svg, + decorators: [(storyFn) => {storyFn()}], + args: { + src: 'https://threejs.org/examples/models/svg/tiger.svg', + }, +} as ComponentMeta + +export const SvgSt: ComponentStory = (props) => ( + + + +) diff --git a/README.md b/README.md index 3cbfc82be..3353c9428 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
  • useAnimations
  • MarchingCubes
  • Decal
    • +
  • Svg
  • Shaders
      • @@ -1165,6 +1166,18 @@ If declarative composition is not possible, use the `mesh` prop to define the su ``` +#### Svg + +[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-svg--svg-st) + +Wrapper around the [svg loader](https://threejs.org/examples/?q=sv#webgl_loader_svg) demo. + +Accepts an SVG url or svg raw data. + +```js + +``` + # Shaders #### MeshReflectorMaterial diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx new file mode 100644 index 000000000..6871d6407 --- /dev/null +++ b/src/core/Svg.tsx @@ -0,0 +1,100 @@ +import { Object3DProps, useLoader } from '@react-three/fiber' +import * as React from 'react' +import { forwardRef, Fragment, useMemo } from 'react' +import { Color, DoubleSide, MeshBasicMaterial, Object3D } from 'three' +import { SVGLoader } from 'three-stdlib' + +export interface SvgProps extends Object3DProps { + /** src can be a URL or SVG data */ + src: string + skipFill?: boolean + skipStrokes?: boolean + strokesWireframe?: boolean + fillWireframe?: boolean +} + +export const Svg = forwardRef(function R3FSvg( + { src: url, skipFill, skipStrokes, strokesWireframe, fillWireframe }, + ref +) { + const svg = useLoader(SVGLoader, !url.startsWith(' (skipFill ? [] : svg.paths.map((path) => SVGLoader.createShapes(path))), + [svg, skipFill] + ) + + const fillMaterials = useMemo( + () => + skipFill + ? [] + : svg.paths.map( + (path) => + new MeshBasicMaterial({ + color: new Color() + .setStyle(path.userData!.style.fill === 'none' ? '#000000' : path.userData!.style.fill) + .convertSRGBToLinear(), + opacity: path.userData!.style.fillOpacity, + transparent: true, + side: DoubleSide, + depthWrite: false, + wireframe: fillWireframe, + }) + ), + [svg, skipFill, fillWireframe] + ) + + const strokeMaterials = useMemo( + () => + skipStrokes + ? [] + : svg.paths.map( + (path) => + new MeshBasicMaterial({ + color: new Color() + .setStyle(path.userData!.style.stroke === 'none' ? '#000000' : path.userData!.style.stroke) + .convertSRGBToLinear(), + opacity: path.userData!.style.strokeOpacity, + transparent: true, + side: DoubleSide, + depthWrite: false, + wireframe: strokesWireframe, + }) + ), + [svg, skipStrokes, strokesWireframe] + ) + + const strokeGeometryGroups = useMemo( + () => + svg.paths.map((path) => + skipStrokes + ? [] + : path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData!.style)) + ), + [svg, skipStrokes] + ) + + return ( + + + {shapeGroups.map((shapes, x) => + shapes.map((shape, y) => ( + + + + )) + )} + + {strokeGeometryGroups.map((geometries, i) => + geometries.map((geometry, x) => + !geometry ? ( + + ) : ( + + ) + ) + )} + + + ) +}) diff --git a/src/core/index.ts b/src/core/index.ts index 89359cd80..e321f2914 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -17,6 +17,7 @@ export * from './ComputedAttribute' export * from './Clone' export * from './MarchingCubes' export * from './Decal' +export * from './Svg' // Cameras export * from './OrthographicCamera' From 36c7e3aced15d7a51bf46cff6e1053c81c81145c Mon Sep 17 00:00:00 2001 From: rodrigo Date: Tue, 11 Oct 2022 21:00:57 +0100 Subject: [PATCH 02/10] fix: svg props --- .storybook/stories/Svg.stories.tsx | 4 ++++ README.md | 2 +- src/core/Svg.tsx | 22 +++++++++++----------- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/.storybook/stories/Svg.stories.tsx b/.storybook/stories/Svg.stories.tsx index ab94b3d40..676d63cd0 100644 --- a/.storybook/stories/Svg.stories.tsx +++ b/.storybook/stories/Svg.stories.tsx @@ -11,6 +11,10 @@ export default { decorators: [(storyFn) => {storyFn()}], args: { src: 'https://threejs.org/examples/models/svg/tiger.svg', + skipFill: false, + skipStrokes: false, + strokesWireframe: false, + fillWireframe: false, }, } as ComponentMeta diff --git a/README.md b/README.md index 3353c9428..30ff9645b 100644 --- a/README.md +++ b/README.md @@ -1170,7 +1170,7 @@ If declarative composition is not possible, use the `mesh` prop to define the su [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-svg--svg-st) -Wrapper around the [svg loader](https://threejs.org/examples/?q=sv#webgl_loader_svg) demo. +Wrapper around the `three` [svg loader](https://threejs.org/examples/?q=sv#webgl_loader_svg) demo. Accepts an SVG url or svg raw data. diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx index 6871d6407..4cf6db3a5 100644 --- a/src/core/Svg.tsx +++ b/src/core/Svg.tsx @@ -14,10 +14,10 @@ export interface SvgProps extends Object3DProps { } export const Svg = forwardRef(function R3FSvg( - { src: url, skipFill, skipStrokes, strokesWireframe, fillWireframe }, + { src, skipFill, skipStrokes, strokesWireframe, fillWireframe, ...props }, ref ) { - const svg = useLoader(SVGLoader, !url.startsWith(' (skipFill ? [] : svg.paths.map((path) => SVGLoader.createShapes(path))), @@ -75,16 +75,8 @@ export const Svg = forwardRef(function R3FSvg( ) return ( - + - {shapeGroups.map((shapes, x) => - shapes.map((shape, y) => ( - - - - )) - )} - {strokeGeometryGroups.map((geometries, i) => geometries.map((geometry, x) => !geometry ? ( @@ -94,6 +86,14 @@ export const Svg = forwardRef(function R3FSvg( ) ) )} + + {shapeGroups.map((shapes, x) => + shapes.map((shape, y) => ( + + + + )) + )} ) From 0bb04370f4d3535944d67ffeea6fd1451ef3d870 Mon Sep 17 00:00:00 2001 From: rodrigo Date: Wed, 12 Oct 2022 09:27:58 +0100 Subject: [PATCH 03/10] docs: add more props to Svg story --- .storybook/stories/Svg.stories.tsx | 81 ++++++++++++++++++++++++++---- 1 file changed, 71 insertions(+), 10 deletions(-) diff --git a/.storybook/stories/Svg.stories.tsx b/.storybook/stories/Svg.stories.tsx index 676d63cd0..2748c20d5 100644 --- a/.storybook/stories/Svg.stories.tsx +++ b/.storybook/stories/Svg.stories.tsx @@ -1,25 +1,86 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react' +import { useEffect } from '@storybook/addons' +import { useArgs } from '@storybook/client-api' +import { ComponentMeta } from '@storybook/react' import * as React from 'react' -import { Suspense } from 'react' -import { Vector3 } from 'three' +import { ComponentProps, FC, Suspense } from 'react' +import { NoToneMapping, Vector3 } from 'three' import { Svg } from '../../src' import { Setup } from '../Setup' +const svgRecord = { + Tiger: 'models/svg/tiger.svg', + 'Three.js': 'models/svg/threejs.svg', + 'Joins and caps': 'models/svg/lineJoinsAndCaps.svg', + Hexagon: 'models/svg/hexagon.svg', + Energy: 'models/svg/energy.svg', + 'Test 1': 'models/svg/tests/1.svg', + 'Test 2': 'models/svg/tests/2.svg', + 'Test 3': 'models/svg/tests/3.svg', + 'Test 4': 'models/svg/tests/4.svg', + 'Test 5': 'models/svg/tests/5.svg', + 'Test 6': 'models/svg/tests/6.svg', + 'Test 7': 'models/svg/tests/7.svg', + 'Test 8': 'models/svg/tests/8.svg', + 'Test 9': 'models/svg/tests/9.svg', + Units: 'models/svg/tests/units.svg', + Ordering: 'models/svg/tests/ordering.svg', + Defs: 'models/svg/tests/testDefs/Svg-defs.svg', + Defs2: 'models/svg/tests/testDefs/Svg-defs2.svg', + Defs3: 'models/svg/tests/testDefs/Wave-defs.svg', + Defs4: 'models/svg/tests/testDefs/defs4.svg', + Defs5: 'models/svg/tests/testDefs/defs5.svg', + 'Style CSS inside defs': 'models/svg/style-css-inside-defs.svg', + 'Multiple CSS classes': 'models/svg/multiple-css-classes.svg', + 'Zero Radius': 'models/svg/zero-radius.svg', + 'Styles in svg tag': 'models/svg/tests/styles.svg', + 'Round join': 'models/svg/tests/roundJoinPrecisionIssue.svg', +} + +const url = 'https://threejs.org/examples' + export default { title: 'Abstractions/Svg', component: Svg, - decorators: [(storyFn) => {storyFn()}], + decorators: [ + (storyFn) => ( + st.gl.setClearColor('#ccc')} + cameraPosition={new Vector3(0, 0, 200)} + lights={false} + > + {storyFn()} + + ), + ], args: { - src: 'https://threejs.org/examples/models/svg/tiger.svg', + src: `${url}/${svgRecord.Tiger}`, + svg: svgRecord.Tiger, skipFill: false, skipStrokes: false, strokesWireframe: false, fillWireframe: false, }, + argTypes: { + svg: { + options: svgRecord, + control: { + type: 'select', + }, + }, + }, } as ComponentMeta -export const SvgSt: ComponentStory = (props) => ( - - - -) +export const SvgSt: FC<{ svg: string } & ComponentProps> = ({ svg, ...props }) => { + const [_, updateArgs] = useArgs() + useEffect(() => { + console.log(svg) + updateArgs({ src: `${url}/${svg || svgRecord.Tiger}` }) + }, [svg]) + return ( + + + + + ) +} From 2dd442b270b94795b8617f5b88f4ced61536ac21 Mon Sep 17 00:00:00 2001 From: rodrigo Date: Wed, 12 Oct 2022 19:55:00 +0100 Subject: [PATCH 04/10] refactor: svg component in JSX style --- .storybook/stories/Svg.stories.tsx | 4 +- src/core/Svg.tsx | 111 ++++++++++++----------------- 2 files changed, 46 insertions(+), 69 deletions(-) diff --git a/.storybook/stories/Svg.stories.tsx b/.storybook/stories/Svg.stories.tsx index 2748c20d5..dd79f99c2 100644 --- a/.storybook/stories/Svg.stories.tsx +++ b/.storybook/stories/Svg.stories.tsx @@ -3,7 +3,7 @@ import { useArgs } from '@storybook/client-api' import { ComponentMeta } from '@storybook/react' import * as React from 'react' import { ComponentProps, FC, Suspense } from 'react' -import { NoToneMapping, Vector3 } from 'three' +import { MathUtils, NoToneMapping, Vector3 } from 'three' import { Svg } from '../../src' import { Setup } from '../Setup' @@ -80,7 +80,7 @@ export const SvgSt: FC<{ svg: string } & ComponentProps> = ({ svg, . return ( - + ) } diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx index 4cf6db3a5..b136f6333 100644 --- a/src/core/Svg.tsx +++ b/src/core/Svg.tsx @@ -1,7 +1,7 @@ import { Object3DProps, useLoader } from '@react-three/fiber' import * as React from 'react' -import { forwardRef, Fragment, useMemo } from 'react' -import { Color, DoubleSide, MeshBasicMaterial, Object3D } from 'three' +import { forwardRef, Fragment, useEffect, useMemo } from 'react' +import { DoubleSide, Object3D } from 'three' import { SVGLoader } from 'three-stdlib' export interface SvgProps extends Object3DProps { @@ -19,81 +19,58 @@ export const Svg = forwardRef(function R3FSvg( ) { const svg = useLoader(SVGLoader, !src.startsWith(' (skipFill ? [] : svg.paths.map((path) => SVGLoader.createShapes(path))), - [svg, skipFill] - ) - - const fillMaterials = useMemo( - () => - skipFill - ? [] - : svg.paths.map( - (path) => - new MeshBasicMaterial({ - color: new Color() - .setStyle(path.userData!.style.fill === 'none' ? '#000000' : path.userData!.style.fill) - .convertSRGBToLinear(), - opacity: path.userData!.style.fillOpacity, - transparent: true, - side: DoubleSide, - depthWrite: false, - wireframe: fillWireframe, - }) - ), - [svg, skipFill, fillWireframe] - ) - - const strokeMaterials = useMemo( + const strokeGeometries = useMemo( () => skipStrokes ? [] - : svg.paths.map( - (path) => - new MeshBasicMaterial({ - color: new Color() - .setStyle(path.userData!.style.stroke === 'none' ? '#000000' : path.userData!.style.stroke) - .convertSRGBToLinear(), - opacity: path.userData!.style.strokeOpacity, - transparent: true, - side: DoubleSide, - depthWrite: false, - wireframe: strokesWireframe, - }) + : svg.paths.map((path) => + !path.userData?.style.stroke || path.userData.style.stroke === 'none' + ? null + : path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData!.style)) ), - [svg, skipStrokes, strokesWireframe] - ) - - const strokeGeometryGroups = useMemo( - () => - svg.paths.map((path) => - skipStrokes - ? [] - : path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData!.style)) - ), [svg, skipStrokes] ) + useEffect(() => { + return () => strokeGeometries.forEach((group) => group && group.map((g) => g.dispose())) + }, [strokeGeometries]) + return ( - {strokeGeometryGroups.map((geometries, i) => - geometries.map((geometry, x) => - !geometry ? ( - - ) : ( - - ) - ) - )} - - {shapeGroups.map((shapes, x) => - shapes.map((shape, y) => ( - - - - )) - )} + {svg.paths.map((path, p) => ( + + {path.userData?.style.fill && + path.userData.style.fill !== 'none' && + SVGLoader.createShapes(path).map((shape, s) => ( + + + + + ))} + {path.userData?.style.stroke && + path.userData.style.stroke !== 'none' && + path.subPaths.map((subPath, s) => ( + + + + ))} + + ))} ) From a960c5021bbb6df519b4b05982aa6dc8e1a31096 Mon Sep 17 00:00:00 2001 From: rodrigo Date: Wed, 12 Oct 2022 20:13:51 +0100 Subject: [PATCH 05/10] fix: remove logs and allow zero as a colour --- .storybook/stories/Svg.stories.tsx | 1 - src/core/Svg.tsx | 12 +++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/.storybook/stories/Svg.stories.tsx b/.storybook/stories/Svg.stories.tsx index dd79f99c2..97baed2ba 100644 --- a/.storybook/stories/Svg.stories.tsx +++ b/.storybook/stories/Svg.stories.tsx @@ -74,7 +74,6 @@ export default { export const SvgSt: FC<{ svg: string } & ComponentProps> = ({ svg, ...props }) => { const [_, updateArgs] = useArgs() useEffect(() => { - console.log(svg) updateArgs({ src: `${url}/${svg || svgRecord.Tiger}` }) }, [svg]) return ( diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx index b136f6333..b1b91c141 100644 --- a/src/core/Svg.tsx +++ b/src/core/Svg.tsx @@ -1,7 +1,7 @@ import { Object3DProps, useLoader } from '@react-three/fiber' import * as React from 'react' import { forwardRef, Fragment, useEffect, useMemo } from 'react' -import { DoubleSide, Object3D } from 'three' +import { Color, DoubleSide, Object3D } from 'three' import { SVGLoader } from 'three-stdlib' export interface SvgProps extends Object3DProps { @@ -24,7 +24,7 @@ export const Svg = forwardRef(function R3FSvg( skipStrokes ? [] : svg.paths.map((path) => - !path.userData?.style.stroke || path.userData.style.stroke === 'none' + path.userData?.style.stroke === undefined || path.userData.style.stroke === 'none' ? null : path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData!.style)) ), @@ -40,7 +40,8 @@ export const Svg = forwardRef(function R3FSvg( {svg.paths.map((path, p) => ( - {path.userData?.style.fill && + {!skipFill && + path.userData?.style.fill !== undefined && path.userData.style.fill !== 'none' && SVGLoader.createShapes(path).map((shape, s) => ( @@ -55,9 +56,10 @@ export const Svg = forwardRef(function R3FSvg( /> ))} - {path.userData?.style.stroke && + {!skipStrokes && + path.userData?.style.stroke && path.userData.style.stroke !== 'none' && - path.subPaths.map((subPath, s) => ( + path.subPaths.map((_subPath, s) => ( Date: Wed, 12 Oct 2022 20:22:42 +0100 Subject: [PATCH 06/10] fix: svg stroke allow zero as a colour --- src/core/Svg.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx index b1b91c141..de574b194 100644 --- a/src/core/Svg.tsx +++ b/src/core/Svg.tsx @@ -57,7 +57,7 @@ export const Svg = forwardRef(function R3FSvg( ))} {!skipStrokes && - path.userData?.style.stroke && + path.userData?.style.stroke !== undefined && path.userData.style.stroke !== 'none' && path.subPaths.map((_subPath, s) => ( From 473036f5a7b491a959927c35b2dc68ccb0219dd8 Mon Sep 17 00:00:00 2001 From: rodrigo Date: Wed, 12 Oct 2022 20:23:20 +0100 Subject: [PATCH 07/10] fix: svg remove unused imports --- src/core/Svg.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx index de574b194..041b86f00 100644 --- a/src/core/Svg.tsx +++ b/src/core/Svg.tsx @@ -1,7 +1,7 @@ import { Object3DProps, useLoader } from '@react-three/fiber' import * as React from 'react' import { forwardRef, Fragment, useEffect, useMemo } from 'react' -import { Color, DoubleSide, Object3D } from 'three' +import { DoubleSide, Object3D } from 'three' import { SVGLoader } from 'three-stdlib' export interface SvgProps extends Object3DProps { From cc0aa7088366ecc1a889c19e50c107746cb749b7 Mon Sep 17 00:00:00 2001 From: rodrigo Date: Thu, 13 Oct 2022 09:12:12 +0100 Subject: [PATCH 08/10] refactor: svg accepts material props --- .storybook/stories/Svg.stories.tsx | 38 ++++++++++++++++++++---------- src/core/Svg.tsx | 10 +++++--- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/.storybook/stories/Svg.stories.tsx b/.storybook/stories/Svg.stories.tsx index 97baed2ba..540e83384 100644 --- a/.storybook/stories/Svg.stories.tsx +++ b/.storybook/stories/Svg.stories.tsx @@ -4,7 +4,7 @@ import { ComponentMeta } from '@storybook/react' import * as React from 'react' import { ComponentProps, FC, Suspense } from 'react' import { MathUtils, NoToneMapping, Vector3 } from 'three' -import { Svg } from '../../src' +import { Svg, SvgProps } from '../../src' import { Setup } from '../Setup' const svgRecord = { @@ -38,6 +38,21 @@ const svgRecord = { const url = 'https://threejs.org/examples' +interface SvgStoryProps extends SvgProps { + svg: string + fillWireframe: boolean + strokesWireframe: boolean +} + +const args: SvgStoryProps = { + src: `${url}/${svgRecord.Tiger}`, + svg: svgRecord.Tiger, + skipFill: false, + skipStrokes: false, + fillWireframe: false, + strokesWireframe: false, +} + export default { title: 'Abstractions/Svg', component: Svg, @@ -53,14 +68,7 @@ export default { ), ], - args: { - src: `${url}/${svgRecord.Tiger}`, - svg: svgRecord.Tiger, - skipFill: false, - skipStrokes: false, - strokesWireframe: false, - fillWireframe: false, - }, + args, argTypes: { svg: { options: svgRecord, @@ -69,16 +77,22 @@ export default { }, }, }, -} as ComponentMeta +} -export const SvgSt: FC<{ svg: string } & ComponentProps> = ({ svg, ...props }) => { +export const SvgSt: FC = ({ svg, fillWireframe, strokesWireframe, ...props }) => { const [_, updateArgs] = useArgs() useEffect(() => { updateArgs({ src: `${url}/${svg || svgRecord.Tiger}` }) }, [svg]) return ( - + ) diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx index 041b86f00..a76711ece 100644 --- a/src/core/Svg.tsx +++ b/src/core/Svg.tsx @@ -1,20 +1,22 @@ -import { Object3DProps, useLoader } from '@react-three/fiber' +import { MeshBasicMaterialProps, Object3DProps, useLoader } from '@react-three/fiber' import * as React from 'react' import { forwardRef, Fragment, useEffect, useMemo } from 'react' import { DoubleSide, Object3D } from 'three' import { SVGLoader } from 'three-stdlib' -export interface SvgProps extends Object3DProps { +export interface SvgProps extends Omit { /** src can be a URL or SVG data */ src: string skipFill?: boolean skipStrokes?: boolean strokesWireframe?: boolean fillWireframe?: boolean + fillMaterial?: MeshBasicMaterialProps + strokeMaterial?: MeshBasicMaterialProps } export const Svg = forwardRef(function R3FSvg( - { src, skipFill, skipStrokes, strokesWireframe, fillWireframe, ...props }, + { src, skipFill, skipStrokes, strokesWireframe, fillWireframe, fillMaterial, strokeMaterial, ...props }, ref ) { const svg = useLoader(SVGLoader, !src.startsWith('(function R3FSvg( side={DoubleSide} depthWrite={false} wireframe={fillWireframe} + {...fillMaterial} /> ))} @@ -68,6 +71,7 @@ export const Svg = forwardRef(function R3FSvg( side={DoubleSide} depthWrite={false} wireframe={strokesWireframe} + {...strokeMaterial} /> ))} From 835c2691c8bc68213b516b304fb0c394f1bcd953 Mon Sep 17 00:00:00 2001 From: rodrigo Date: Thu, 13 Oct 2022 09:13:22 +0100 Subject: [PATCH 09/10] refactor: svg accepts material props part 2 --- src/core/Svg.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx index a76711ece..3dc131727 100644 --- a/src/core/Svg.tsx +++ b/src/core/Svg.tsx @@ -9,14 +9,12 @@ export interface SvgProps extends Omit { src: string skipFill?: boolean skipStrokes?: boolean - strokesWireframe?: boolean - fillWireframe?: boolean fillMaterial?: MeshBasicMaterialProps strokeMaterial?: MeshBasicMaterialProps } export const Svg = forwardRef(function R3FSvg( - { src, skipFill, skipStrokes, strokesWireframe, fillWireframe, fillMaterial, strokeMaterial, ...props }, + { src, skipFill, skipStrokes, fillMaterial, strokeMaterial, ...props }, ref ) { const svg = useLoader(SVGLoader, !src.startsWith('(function R3FSvg( transparent={true} side={DoubleSide} depthWrite={false} - wireframe={fillWireframe} {...fillMaterial} /> @@ -70,7 +67,6 @@ export const Svg = forwardRef(function R3FSvg( transparent={true} side={DoubleSide} depthWrite={false} - wireframe={strokesWireframe} {...strokeMaterial} /> From 31186b17d3a2c6f1d979c3b966a24a04d11579e7 Mon Sep 17 00:00:00 2001 From: rodrigo Date: Sun, 16 Oct 2022 16:14:48 +0100 Subject: [PATCH 10/10] feat: svg can receive mesh props --- src/core/Svg.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx index 3dc131727..3a8c06270 100644 --- a/src/core/Svg.tsx +++ b/src/core/Svg.tsx @@ -1,4 +1,4 @@ -import { MeshBasicMaterialProps, Object3DProps, useLoader } from '@react-three/fiber' +import { MeshBasicMaterialProps, MeshProps, Object3DProps, useLoader } from '@react-three/fiber' import * as React from 'react' import { forwardRef, Fragment, useEffect, useMemo } from 'react' import { DoubleSide, Object3D } from 'three' @@ -11,10 +11,12 @@ export interface SvgProps extends Omit { skipStrokes?: boolean fillMaterial?: MeshBasicMaterialProps strokeMaterial?: MeshBasicMaterialProps + fillMeshProps?: MeshProps + strokeMeshProps?: MeshProps } export const Svg = forwardRef(function R3FSvg( - { src, skipFill, skipStrokes, fillMaterial, strokeMaterial, ...props }, + { src, skipFill, skipStrokes, fillMaterial, strokeMaterial, fillMeshProps, strokeMeshProps, ...props }, ref ) { const svg = useLoader(SVGLoader, !src.startsWith('(function R3FSvg( path.userData?.style.fill !== undefined && path.userData.style.fill !== 'none' && SVGLoader.createShapes(path).map((shape, s) => ( - + (function R3FSvg( path.userData?.style.stroke !== undefined && path.userData.style.stroke !== 'none' && path.subPaths.map((_subPath, s) => ( - +