Hightcharts-contour Demo

author(s): Paulo Costa

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://cdn.jsdelivr.net/npm/highcharts-contour@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts-draggable-3d@latest"></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  30.4443  28.1402
v  -29.4421  28.3457  29.165
v  -36.2402  28.3457  14.5117
v  -35.52  30.4443  14.2938
v  -36.0073  31.1438 ...

CSS

#container {
  margin: 0 auto;
}

JavaScript

$(function() {
  //Parse the OBJ file
  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.x*v.y*v.z) ;/// (v.x*v.x + v.y*v.y + v.z*v.z); //Make up the value. This looks nice
      data.push(v);
      obj_size = Math.max(obj_size, v.x, v.y, v.z, -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
      );
    }
  }

  // Set up the chart
  var chart = Highcharts.chart('container', {
    chart: {
      margin: 125,
      type: 'contour',
      options3d: {
        enabled: true,
        alpha: 30,
        beta: 45,
        depth: 250,
        fitToPlot: false,
        drag: {
          enabled: true,
          minBeta: Number.NEGATIVE_INFINITY,
          maxBeta: Number.POSITIVE_INFINITY,
          //snap: 15,
          //animateSnap: true
        },

        frame: {
          size: 20,
          visible: 'auto',
          bottom: {
            color: '#999'
          },
          back: {
            color: '#999'
          },
          side: {
            color: '#999'
          }
        }
      }
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    yAxis: {
      title: null,
      labels: {
        enabled: false
      },
    	tickPixelInterval: 50,
      min: -obj_size,
      max: +obj_size
    },
    xAxis: {
      title: null,
      labels: {
        enabled: false
      },
      tickPixelInterval: 50,
      min: -obj_size,
      max: +obj_size
    },
    zAxis: {
      title: null,
      labels: {
        enabled: false
      },
     ...