Create a 3d cylinder in d3

[Mitesh Agarwal]

Hello Team, 

Is there a way to create a 3D cylinder in D3.js where i can plot different shapes along the length of the cylinder ?

Thanks,

Mitesh

[Sergej Matt Rinc]

  Well, one way would be to use d3-3d plugin:

https://github.com/Niekes/d3-3d

that can create 3D shapes. The cube and pyramid examples are below:

https://bl.ocks.org/niekes/ff4d3c8497d8436d4d8fdb9f0121d12d

and

https://bl.ocks.org/niekes/5e1254ae778e2854f0079350a0376528

  You could extend the library with cylinder.js shape creation in src/PrimitiveShapes folder.

  For creating a cylinder from scratch you just need to define its points and pass it to shape creation call (two circles say 16 points and 16 lines between same positioned circle points). But then adding custom shapes on the cylinder surface would require - if d3-3d functions cannot be used - a bunch of additional functions for transformatipns.

  The entire issue here is that D3 is not a 3D library - it has implemented projections from sphere to 2D surface (e.g. for world map projections) and some of those projections could be used.

  But generally for 3D objects and "scene" you would get better and faster results with a library like Three.js. There you have "textures" for what you need e.g. a plane of a 3D object can have a texture and texture itself can be a 2D image etc.

  With the topic in the last paragraph there's a caveat about having a texture (repeated image) in all three dimensions of a 3D object. By default it will be stretched in one dimension though this can be fixed with custom programming. An example I have created as a proof of concept on one past occassion:

https://www.dropbox.com/s/u22r3sfr4g8gyoi/threejs-svg-texture-1-fixed.png?dl=0

  Just try it, Matt