0

I am trying to replicate the functionality as seen here http://wizgrav.github.io/three.js/runner/.

I found a similar question Three.js - technique for turning a transparent PNG into a 3D "card" with the geometry of the transparency but this involves turning the PNG to a SVG and tracing the path.

This question was posted 2 years ago, Is there a better way to do this in ThreeJS itself and not relying on other tools(converting PNG to SVG)?

Any help is appreciated.

Thank you.

Community
  • 1
  • 1
Aniket Betkikar
  • 166
  • 1
  • 14
  • Did you have a question, or were you trying to share? – John Green Jun 08 '16 at 07:31
  • @JohnGreen Edited my question. Is there a better way to extrude 2D png image to 3D using threeJS without using any third party libraries to convert PNG to SVG? – Aniket Betkikar Jun 08 '16 at 07:43
  • Any which way, a 3D object is going to use a spline curve representation... a PNG is just an array of pixel values. At the very least, you'll need to approximate the curve around the alpha... which appears to be what you're trying to avoid. : ) There's no getting around using curve information instead of pixel information. – John Green Jun 08 '16 at 07:45
  • There is an alternative though: assing you PNG to the **diffuse** channel, use **transparency** and then use either a **bump** or **normal** map. It won't be as precise as the SVG solution. – pietro909 Jun 08 '16 at 07:50
  • @pietro909 Did I also mention that I am a complete noob at threeJS :) Are there any examples or tutorials that you can point me to? I am currently following http://threejs.org/examples/#webgl_geometry_extrude_shapes2 – Aniket Betkikar Jun 08 '16 at 08:01
  • I can for sure tell that **you won't get such a result** with just PNG: if that's your goal you are gonna waste time :-) Go for paths, like with SVG. – pietro909 Jun 08 '16 at 08:49
  • @pietro909 thank you for your reply. I will go ahead with paths but looks like I need to rely on third party javascript libs to somehow convert PNGs to Paths. I am looking at fabricJS exportSVG. Any other frameworks? – Aniket Betkikar Jun 08 '16 at 09:10
  • is that a requirement? I mean that it would be easier for you to provide SVG or perform the conversion server-side. – pietro909 Jun 08 '16 at 09:36
  • Requirement is that it should be handled by the front end only and not server side. The reason behind this is the whole operation should be quick like how it is for http://wizgrav.github.io/three.js/runner/ – Aniket Betkikar Jun 08 '16 at 09:41
  • Did you even bother to look at the source of the page you are trying to replicate? All you need is there, specifically a [CanvasGeometry class](http://wizgrav.github.io/three.js/runner/CanvasGeometry.js) – 2pha Jun 08 '16 at 11:24
  • @pietro909 - Which would be fine... unless, like his example, he's going to actually extrude anything. PNG & diffuse will only give you postcards, though there can be power in those for certain limited experiences. – John Green Jun 09 '16 at 07:45
  • @JohnGreen with normal maps you can still have a bit more than a postcard :-) of course can't be compared to the linked example which is an actual thick, solid geometry. – pietro909 Jun 09 '16 at 08:17

0 Answers0