3D Teapot -- Highcharts Demo

author(s): Paulo Costa

by J. Albert Bowden

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.src.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.src.js"></script>

<script src="https://rawgithub.com/ironwallaby/delaunay/master/delaunay.js"></script>
<script src="https://rawgithub.com/paulo-raca/highcharts-contour/master/highcharts-contour.js"></script>
<script src="https://rawgithub.com/paulo-raca/highcharts-draggable-3d/master/draggable-3d.js"></script>

<p>Since this plugin can draw surfaces in 3D, why not use it to render <a href="https://en.wikipedia.org/wiki/Wavefront_.obj_file">OBJ</a> files?</p>

<p>This example render the <a href="https://en.wikipedia.org/wiki/Utah_teapot">Utah Teapot</a>. The source file comes from <a href="http://people.sc.fsu.edu/~jburkardt/data/obj/obj.html">here</a></p>

<div id="container" style="height:500px; width:500px;"></div>

<pre id="obj" style="display:none">
# OBJ file created by ply_to_obj.c
#
g Object001

v  40.6266  28.3457  -1.10804
v  40.0714  30.4443  -1.10804
v  40.7155  31.1438  -1.10804
v  42.0257  30.4443  -1.10804
v  43.4692  28.3457  -1.10804
v  37.5425  28.3457  14.5117
v  37.0303  30.4443  14.2938
v  37.6244  31.1438  14.5466
v  38.8331  30.4443  15.0609
v  40.1647  28.3457  15.6274
v  29.0859  28.3457  27.1468
v  28.6917  30.4443  26.7527
v  29.149  31.1438  27.2099
v  30.0792  30.4443  28.1402
v  31.1041  28.3457  29.165
v  16.4508  28.3457  35.6034
v  16.2329  30.4443  35.0912
v  16.4857  31.1438  35.6853
v  16.9999  30.4443  36.894
v  17.5665  28.3457  38.2256
v  0.831025  28.3457  38.6876
v  0.831025  30.4443  38.1324
v  0.831025  31.1438  38.7764
v  0.831025  30.4443  40.0866
v  0.831025  28.3457  41.5301
v  -15.868  28.3457  35.6034
v  -15.0262  30.4443  35.0912
v  -14.9585  31.1438  35.6853
v  -15.3547  30.4443  36.894
v  -15.9044  28.3457  38.2256
v  -28.3832  28.3457  27.1468
v  -27.4344  30.4443  26.7527
v  -27.6068  31.1438  27.2099
v  -28.4322...

CSS

#container {
  margin: 0 auto;
}

JavaScript

$(function() {
  var data = [];
  var triangles = [];
  var obj_lines = $("#obj").text().split("\n");
  var obj_size = 0;
  for (var i = 0; i < obj_lines.length; i++) {
    var lines_parts = obj_lines[i].split(/\s+/);
    if (lines_parts[0] === "v") {
      v = {
        x: parseFloat(lines_parts[1]),
        z: parseFloat(lines_parts[3]),
        y: parseFloat(lines_parts[2]),
      };
      v.value = v.y;
      data.push(v);
      obj_size = Math.max(obj_size, v.x, v.y, v.z);
    } else if (lines_parts[0] === "f") {
      triangles.push(
        parseInt(lines_parts[1]) - 1,
        parseInt(lines_parts[2]) - 1,
        parseInt(lines_parts[3]) - 1
      );
    }
  }

  var stops = [];
  var num_tones = 16;
  for (var i = 0; i < num_tones; i++) {
    var tone = Math.round(255 - 255 * i / (num_tones - 1));
    tone = 'rgb(' + tone + ',' + 255 + ',' + (255 - tone) + ')';
    stops.push([(i + 0) / (num_tones), tone]);
    stops.push([(i + 1) / (num_tones), tone]);
  }

  // Set up the chart
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      margin: 50,
      type: 'contour',
      options3d: {
        enabled: true,
        alpha: 30,
        beta: 30,
        depth: 400,

        drag: {
          enabled: true,
          flipAxes: true,
          snap: 15,
          animateSnap: true
        },

        frame: {
          bottom: {
            size: 10,
            color: '#eecccc'
          },
          back: {
            size: 10,
            color: '#cceecc'
          },
          side: {
            size: 10,
            color: '#ccccee'
          }
        }
      }
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    plotOptions: {
      scatter: {
        width: 10,
        height: 10,
        depth: 10
      }
    },
    yAxis: {
      title: null,
      labels: {
        enabled: false
      },
      min: -obj_size,
      max: +obj_size
    },
    xAxis: {
      title: null,
      labels:...