Converting 2D Image into 3D Using three.js and Other Tools : <p>I have an image of a data visualization that I want to make into 3D. I was wondering how I would be able to convert this image into 3D using three.js and other possible tools. I have no idea what to do.</p>

<p>I heard that there is something called WebGL Javascript API so maybe I can use that but I don't know how to begin and whether or not it can be used in this situation. I also read somewhere that you cannot make a 3D image from a 2D one without some information about the 3rd dimension. This missing information can come from a second photo, an AI software, or a 3D digital model.</p>

<p>I also read that I can make a 3D model of the image in Blender and then import it into three.js.</p>

<p>Does anyone know how I can do this? </p>

<p><strong>I want to try to do the coding in JS fiddle if it's possible unless other software/tools are needed outside of JS fiddle. I see that you can import the three.js library there.</strong></p>

<p>The current visualization I have made is </p>

<p><a href="https://i.stack.imgur.com/EA2wo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EA2wo.png" alt=""></a></p>

<p>My code for this visualization if you need it is:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  var dataEx = [
      ['1 Visit', 352000],
      ['2 Visits', 88000],
      ['3+ Visits', 42000]
    ],
    len = dataEx.length,
    sum = 0,
    minHeight = 0.05,
    data = [];
    
   //specify your percent of prior visit value manually here:
   
   var perc = [100, 25, 48];

  for (var i = 0; i &lt; len; i++) {
    sum += dataEx[i][1];
  }

  for (var i = 0; i &lt; len; i++) {
    var t = dataEx[i],
      r = t[1] / sum;
    data[i] = {
      name: t[0],
      y: (r &gt; minHeight ? t[1] : sum * minHeight),
      percent: perc[i],   // &lt;----- this here is manual input
			//percent: Math.round(r * 100),    &lt;--- this here is mathematical
      label: t[1]
    }
  }
  console.log(dataEx, data)
  $('#container').highcharts({
    chart: {
      type: 'funnel',
      marginRight: 100,


      events: {
        load: function() {
          var chart = this;
          Highcharts.each(chart.series[0].data, function(p, i) {
          	var bBox = p.dataLabel.getBBox()
            p.dataLabel.attr({
              x: (chart.plotWidth - chart.plotLeft) / 2,
              'text-anchor': 'middle',
              y: p.labelPos.y - (bBox.height / 2)
            })
          })
        },
        redraw: function() {
          var chart = this;
          Highcharts.each(chart.series[0].data, function(p, i) {
            p.dataLabel.attr({
              x: (chart.plotWidth - chart.plotLeft) / 2,
              'text-anchor': 'middle',
              y: p.labelPos.y - (bBox.height / 2)
            })
          })
        }
      },
    },
    
    //Manually changing the default colors of each category of series
    colors: ['#FF5733', '#FFA533', '#1FC009'],

    title: {
      text: 'New Guest Return Funnel',
      x: -45
    },
    
    credits: {
    
    	enabled: false
    },
    
    tooltip: {
      //enabled: false
      formatter: function() {
        return '&lt;b&gt;' + this.key +
          '&lt;/b&gt;&lt;br/&gt;Percent of Prior Visit: '+ this.point.percent + '%&lt;br/&gt;Guests: ' + Highcharts.numberFormat(this.point.label, 0);
      }
    },
    plotOptions: {
      series: {


        allowPointSelect: true,
        borderWidth: 12,

        animation: {
          duration: 400
        },


        dataLabels: {
          enabled: true,

          connectorWidth: 0,
          distance: 0,

          formatter: function() {
            var point = this.point;
            console.log(point);
            return '&lt;b&gt;' + point.name + '&lt;/b&gt; (' + Highcharts.numberFormat(point.label, 0) + ')&lt;br/&gt;' + point.percent + '%';
          },
          minSize: '10%',
          color: 'black',
          softConnector: true
        },

        neckWidth: '30%',
        neckHeight: '0%',
        width: '50%',
        height: '110%'


        //old options are as follows:

        //neckWidth: '50%',
        //neckHeight: '50%',
        //-- Other available options
        //height: '200'
        // width: pixels or percent
      }
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Unique users',
      data: data
    }]
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
&lt;script src="http://code.highcharts.com/modules/funnel.js"&gt;&lt;/script&gt;
&lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;

&lt;div id="container" style="width: 500px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>
