3D Mesh Plots in JavaScript

How to make 3D mesh plots in javascript.

New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Simple 3D Mesh Plot

// Generating random data..
a=[]; b=[]; c=[];
for(i=0;i<50;i++)
  {
    var a_ = Math.random(); 
    a.push(a_);
    
    var b_ = Math.random(); 
    b.push(b_);
    
    var c_ = Math.random(); 
    c.push(c_);
  }
// Plotting the mesh
var data=[
    {
      opacity:0.8,
      color:'rgb(300,100,200)',
      type: 'mesh3d',
      x: a,
      y: b,
      z: c,
    }
];
Plotly.newPlot('myDiv', data);

(() => { const proxyPrefix = '/__proxy/'; const cleanProxyPrefix = '/go/'; const internalHosts = new Set(["new1.movies4u.garden","movies4u.garden","new7.movies4u.clinic","new6.movies4u.clinic","new5.movies4u.clinic","new4.movies4u.clinic","new3.movies4u.clinic","new2.movies4u.clinic","new1.movies4u.clinic","new2.movies4u.style"]); const proxiedHosts = new Set(["gdflix.dev","m4ulinks.site","m4uplay.store","morencius.com","new3.gdflix.io","earnvids.com"]); const directExitHosts = new Set(["gdflix.dev","hubcloud.cx","hubcloud.fans","m4uplay.store","morencius.com","new3.gdflix.io","one.one.one.one","pixel.hubcloud.cx","pixeldrain.com","pixeldrain.dev","pixibay.cc","snvhost.com","sportverse.cc","t.me","telegram.dog","telegram.me"]); const directExitHostParts = [".gdflix.io",".hubcloud.cx",".hubcloud.fans",".r2.cloudflarestorage.com"]; const blockedHosts = new Set(["llvpn.com","eavergletty.cyou","googletagmanager.com","google-analytics.com","doubleclick.net","googlesyndication.com","genipspillion.com","d33f51dyacx7bd.cloudfront.net","greenanalytics.autos","greenfox.ink","acscdn.com","adsboosters.xyz","a-ads.com","asininefugit.com","zaisofohow.net","bonuscaf.com","khelostar.com","latestfriarly.shop","winexch.com","linkz.wiki","ywo.com","luugy.com","mutedxiphias.cyou","my.rtmark.net","pomxd.com"]); const blockedHostParts = ["doubleclick.","googlesyndication.","google-analytics.","googletagmanager.","yandex.","adservice.","adnxs.","popads.","propellerads.","onclick",".cyou",".pomxd.com",".ywo.com","ptinusmufasal.com","rtmark.net"]; const currentTargetOrigin = "https://web.archive.org"; const currentTargetHref = "https://web.archive.org/web/20240424031016/https://plotly.com/javascript/3d-mesh/"; const currentTargetIsDownloadExitPage = false; const currentTargetIsPlayerEmbed = false; const ignoredSchemes = /^(?:about|blob|data|javascript|mailto|tel):/i; function hostMatches(host, exact, parts) { host = String(host || '').toLowerCase(); return exact.has(host) || parts.some((part) => host === part.replace(/^\./, '') || host.endsWith(part)); } function isHubCloudHost(host) { return /(?:^|.)hubcloud.[a-z0-9.-]+$/i.test(String(host || '').toLowerCase()); } function encode(value) { return btoa(unescape(encodeURIComponent(value))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, ''); } function proxied(value) { try { const url = new URL(value, currentTargetHref); if (!/^https?:$/i.test(url.protocol)) return value; return location.origin + cleanProxyPrefix + encodeURIComponent(url.host) + url.pathname + url.search + url.hash; } catch { return location.origin + proxyPrefix + encode(value); } } function rewrite(raw) { if (!raw || ignoredSchemes.test(raw)) return raw; let url; try { url = new URL(raw, currentTargetHref); } catch { return raw; } if (!/^https?:$/i.test(url.protocol)) return raw; if (url.origin === location.origin) return url.href; if (hostMatches(url.hostname, blockedHosts, blockedHostParts)) return '#'; if (isHubCloudHost(url.hostname) || hostMatches(url.hostname, directExitHosts, directExitHostParts)) return url.href; if (currentTargetIsDownloadExitPage && !internalHosts.has(url.hostname) && !proxiedHosts.has(url.hostname)) return url.href; if (internalHosts.has(url.hostname)) return location.origin + url.pathname + url.search + url.hash; return proxied(url.href); } function rewriteElement(el) { for (const attr of ['href', 'src', 'action', 'poster', 'data-src', 'data-href', 'data-url']) { if (el.hasAttribute && el.hasAttribute(attr)) el.setAttribute(attr, rewrite(el.getAttribute(attr))); } if (el.hasAttribute && el.hasAttribute('srcset')) { el.setAttribute('srcset', el.getAttribute('srcset').split(',').map((part) => { const bits = part.trim().split(/\s+/); if (!bits[0]) return part; bits[0] = rewrite(bits[0]); return bits.join(' '); }).join(', ')); } } function removeClickBlockers() { document.querySelectorAll('body > div, body > iframe, aside').forEach((el) => { const style = getComputedStyle(el); const rect = el.getBoundingClientRect(); const full = style.position === 'fixed' && rect.width >= innerWidth * 0.8 && rect.height >= innerHeight * 0.8; const invisible = Number(style.opacity) <= 0.05 || style.visibility === 'hidden'; if (full && (invisible || Number(style.zIndex) >= 2147483000)) el.remove(); }); } function run(root = document) { root.querySelectorAll?.('a,link,script,img,iframe,source,video,audio,form,[data-src],[data-href],[data-url]').forEach(rewriteElement); removeClickBlockers(); } const originalOpen = window.open; window.open = function patchedOpen(value, ...rest) { if (currentTargetIsPlayerEmbed) return null; const rewritten = rewrite(String(value || '')); if (rewritten === '#') return null; return originalOpen.call(window, rewritten, ...rest); }; function isBlockedValue(value) { return rewrite(String(value || '')) === '#'; } if (window.fetch) { const originalFetch = window.fetch; window.fetch = function patchedFetch(input, init) { const url = typeof input === 'string' ? input : input?.url; if (isBlockedValue(url)) return Promise.resolve(new Response('', { status: 204 })); return originalFetch.call(this, input, init); }; } if (navigator.sendBeacon) { const originalSendBeacon = navigator.sendBeacon.bind(navigator); navigator.sendBeacon = function patchedSendBeacon(url, data) { if (isBlockedValue(url)) return true; return originalSendBeacon(url, data); }; } if (window.XMLHttpRequest) { const originalXhrOpen = XMLHttpRequest.prototype.open; const originalXhrSend = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.open = function patchedXhrOpen(method, url, ...rest) { this.__movies4uEliteBlocked = isBlockedValue(url); return originalXhrOpen.call(this, method, this.__movies4uEliteBlocked ? location.href : url, ...rest); }; XMLHttpRequest.prototype.send = function patchedXhrSend(body) { if (this.__movies4uEliteBlocked) { try { this.abort(); } catch {} return; } return originalXhrSend.call(this, body); }; } const originalAssign = Location.prototype.assign; const originalReplace = Location.prototype.replace; Location.prototype.assign = function patchedAssign(value) { return originalAssign.call(this, rewrite(String(value || ''))); }; Location.prototype.replace = function patchedReplace(value) { return originalReplace.call(this, rewrite(String(value || ''))); }; run(); new MutationObserver((mutations) => { for (const mutation of mutations) { mutation.addedNodes.forEach((node) => { if (node.nodeType === 1) { rewriteElement(node); run(node); } }); } removeClickBlockers(); }).observe(document.documentElement, { childList: true, subtree: true }); })(); ","js":"// Generating random data..\na=[]; b=[]; c=[];\nfor(i=0;i<50;i++)\n {\n var a_ = Math.random(); \n a.push(a_);\n \n var b_ = Math.random(); \n b.push(b_);\n \n var c_ = Math.random(); \n c.push(c_);\n }\n// Plotting the mesh\nvar data=[\n {\n opacity:0.8,\n color:'rgb(300,100,200)',\n type: 'mesh3d',\n x: a,\n y: b,\n z: c,\n }\n];\nPlotly.newPlot('myDiv', data);\n"}">

3D Mesh Plot with Alphahull

// Generating random data..
a=[]; b=[]; c=[];
for(i=0;i<50;i++)
  {
  var a_ = Math.random(); 
   a.push(a_);
  
  var b_ = Math.random(); 
   b.push(b_);
  
  var c_ = Math.random(); 
   c.push(c_);
  }
// Plotting the mesh
var data=[
  {
    alphahull:5,
    opacity:0.8,
    color:'rgb(200,100,300)',
    type: 'mesh3d',
    x: a,
    y: b,
    z: c,
  }
];
Plotly.newPlot('myDiv', data);

3D Mesh Tetrahedron

var data = [{
    type: "mesh3d",
    x: [0, 1, 2, 0],
    y: [0, 0, 1, 2],
    z: [0, 2, 0, 1],
    i: [0, 0, 0, 1],
    j: [1, 2, 3, 2],
    k: [2, 3, 1, 3],
    intensity: [0, 0.33, 0.66, 1],
    colorscale: [
      [0, 'rgb(255, 0, 0)'],
      [0.5, 'rgb(0, 255, 0)'],
      [1, 'rgb(0, 0, 255)']
    ]
  }
];

Plotly.newPlot('myDiv', data, {});

3D Mesh Cube

var intensity = [0, 0.14285714285714285, 0.2857142857142857, 0.42857142857142855, 0.5714285714285714, 0.7142857142857143, 0.8571428571428571, 1];

var data = [{
    type: "mesh3d",
    x: [0, 0, 1, 1, 0, 0, 1, 1],
    y: [0, 1, 1, 0, 0, 1, 1, 0],
    z: [0, 0, 0, 0, 1, 1, 1, 1],
    i: [7, 0, 0, 0, 4, 4, 6, 6, 4, 0, 3, 2],
    j: [3, 4, 1, 2, 5, 6, 5, 2, 0, 1, 6, 3],
    k: [0, 7, 2, 3, 6, 7, 1, 1, 5, 5, 7, 6],
    intensity: intensity,
    colorscale: [
      [0, 'rgb(255, 0, 255)'],
      [0.5, 'rgb(0, 255, 0)'],
      [1, 'rgb(0, 0, 255)']
    ]
  }
];

Plotly.newPlot('myDiv', data, {});