- This topic has 16 replies, 3 voices, and was last updated 4 years, 2 months ago by
.
-
Hi all,
This all is very non-verge 3d, but dovetails into it as I’m trying to get SVG’s drawn to canvas into my 3d materials using SVG’s <use> method.NOTE: drawing simple SVG’s to canvas using the ways in the User Manual is working FINE. The problem is referencing them in the JS.
What I mean by the <use> method is shown here – https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
My main SVG file begins with a number of shapes with their own id’s… Circles mainly.
Then after that, groups… (with their own id’s) using <use> to make different combos of those shapes mentioned above, those groups being often used composited complex designs used in the following…
Then the largest part of the file I have whole sections of the groups in different arrangements (and cataloged with serial numbers, in a separate spreadsheet/CSV) as symbols.
That’s all in <defs>.
THAT main SVG file doesn’t have anything after defs.
I use puzzles to concatenate it all with replacing the final </svg> with a <use href> to reference any of the svg symbols I want.
as seen here –
Mking an object, referenced as a var, then trying to pass my concatenated JS that var’s .src doesn’t work.
This has been my main goal in using Verge 3D. To have a dynamic library of SVG’s resourced from ONE source, able to represented and interacted with in 3D…
I’m ALLLLMOST there…
Any advice or help with this would be FANTASTIC!Thanks.
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!Hi,
what do your Puzzles print in the console?Eh… Too many to count..
I’ll post some that are currently the issue..”du jour”..I’m currently working on getting a basic understanding of having “canvg.js” run successfully, then attempt to apply it to the verge.3d. Project.
This problem of not being able to externally reference fraction url items it’s precisely why I went to getting into having css3d divs with svgs… However… I feel that’s going to be way too many problems in the future with things I want to do.
I can reference the symbols from the svg fine with the <svg> and <object> tags …in 2D!… Not in the JS .src tho or html img src…
But canvg.js claims it can so…
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!Hi all,
This all is very non-verge 3d, but dovetails into it as I’m trying to get SVG’s drawn to canvas into my 3d materials using SVG’s <use> method.NOTE: drawing simple SVG’s to canvas using the ways in the User Manual is working FINE. The problem is referencing them in the JS.
What I mean by the <use> method is shown here – https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
My main SVG file begins with a number of shapes with their own id’s… Circles mainly.
Then after that, groups… (with their own id’s) using <use> to make different combos of those shapes mentioned above, those groups being often used composited complex designs used in the following…
Then the largest part of the file I have whole sections of the groups in different arrangements (and cataloged with serial numbers, in a separate spreadsheet/CSV) as symbols.
That’s all in <defs>.
THAT main SVG file doesn’t have anything after defs.
I use puzzles to concatenate it all with replacing the final </svg> with a <use href> to reference any of the svg symbols I want.
as seen here –
Mking an object, referenced as a var, then trying to pass my concatenated JS that var’s .src doesn’t work.
This has been my main goal in using Verge 3D. To have a dynamic library of SVG’s resourced from ONE source, able to represented and interacted with in 3D…
I’m ALLLLMOST there…
Any advice or help with this would be FANTASTIC!Thanks.
Hello, dont know if understood the problem corectly, but try changing all ‘#’ symbols with ‘%23’ in svg code.
I had made a customizator, where user is making changes in svg and every time a change is made in svg, a ‘replace texture’ puzzle is activated, which takes that modified svg from browser in url format. Im sure this would also work in your application.Oh man!
Yeah I’ve been doing that with the # and the < and >. Also replacing ” with ‘.
Then wrapping the data: url with ”I guess my problem is the fact that the img has to be referenced in the html.
I’m VERY interested in your code Hobo!
Could you possibly zip a sample that shows the inner workings of everything here? (Unless of course it’s private)
Also have you joined the discord server?
What you’re describing would help our project out tremendously.
Is the “input” element the resulting formatted (encoded with %3E,C’s etc) ?
And had the clicked element been previously initiated by html puzzles?I look forward to your response!
Thanks!
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!i made this just to be sure..
cuz js encodeURIComponent() doesn’t do the “#”.
output reads well with this tho.
(anyone know how to remove line breaks from text?)
i tried replacing /r/n with “” didn’t work. also CD for carriage return)Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!Check the file I attached in my first post. The svg goes into replace image puzzle. You can also check my post in this thread to see how it is displayed on models:
<iframe class=”wp-embedded-content” sandbox=”allow-scripts” security=”restricted” style=”position: absolute; clip: rect(1px, 1px, 1px, 1px);” title=”“Generate normal map – documentation” — Soft8Soft” src=”https://www.soft8soft.com/topic/generate-normal-map-documentation/embed/#?secret=YRJFkDxOFF” data-secret=”YRJFkDxOFF” marginwidth=”0″ marginheight=”0″ scrolling=”no” width=”600″ height=”338″ frameborder=”0″></iframe>
hmmm.. yeah.. i think we’re talking about two different things man.
I’m talking about SVG, Scalable Vector Graphics.You can put them on canvas, then on an object texture.
you cna put them in a 2D div on the screen.
You can put them on CSS 3D Divs using Css3DRenderer
You can load them with the SVGLoader, or TextureLoader….But, forgive me if i’m mistaken and you’re REALLY doing this.. but i know the staff will back me up with this one.. you can’t just put an SVG on a texture using the standard puzzles except for the Canvas puzzle.
here’s me taking my old project and mixing it with yours…
a pic of it..
and the zipped verge project attached if you want to look see.
I would loooove you to be right with this one tho.. I’m skeptical but curious as to what you have going on.
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!
I hope you’ll get it working!
- You must be logged in to reply to this topic.