JavaScript > Fundamentals > 3D Surface Lighting
Suggest an edit to this page

3D Surface Lighting in JavaScript

How to customize lighting for 3D surface charts.


Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Ambient Lighting 

d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = [ ];
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale: 'Viridis',
  lighting: {ambient: 0.9}
  },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {ambient: 0.2}
  }
];

var layout = {
  title: {
    text: 'Ambient Lighting'
  },
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  }
};
Plotly.newPlot('myDiv', data, layout);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){\nfunction unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n}\n\nvar z_data = [ ];\nfor(i=0;i<100;i++)\n{\n z_data.push(unpack(rows,i));\n}\n\nvar data = [{\n z: z_data,\n type: 'surface',\n colorscale: 'Viridis',\n lighting: {ambient: 0.9}\n },\n {\n z: z_data,\n type: 'surface',\n scene: 'scene2',\n colorscale:'Viridis',\n lighting: {ambient: 0.2}\n }\n];\n\nvar layout = {\n title: {\n text: 'Ambient Lighting'\n },\n grid: {\n rows: 1,\n columns: 2,\n pattern: 'independent',\n },\n \tscene:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:0}\n\t},\n\tscene2:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:1}\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Roughness 

d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = [];
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale:'Viridis',
  lighting: {roughness: 0.9}
        },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {roughness: 0.2}
  }
];

var layout = {
  title: {
    text: 'Roughness'
  },
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  }
};
Plotly.newPlot('myDiv', data, layout);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){\nfunction unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n}\n\nvar z_data = [];\nfor(i=0;i<100;i++)\n{\n z_data.push(unpack(rows,i));\n}\n\nvar data = [{\n z: z_data,\n type: 'surface',\n colorscale:'Viridis',\n lighting: {roughness: 0.9}\n },\n {\n z: z_data,\n type: 'surface',\n scene: 'scene2',\n colorscale:'Viridis',\n lighting: {roughness: 0.2}\n }\n];\n\nvar layout = {\n title: {\n text: 'Roughness'\n },\n grid: {\n rows: 1,\n columns: 2,\n pattern: 'independent',\n },\n \tscene:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:0}\n\t},\n\tscene2:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:1}\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Diffuse 

d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = []
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale:'Viridis',
  lighting: {diffuse: 0.9}
        },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {diffuse: 0.1}
  }
];

var layout = {
  title: {
    text: 'Diffuse Reflection'
  },
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  }
};
Plotly.newPlot('myDiv', data, layout);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){\nfunction unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n}\n\nvar z_data = []\nfor(i=0;i<100;i++)\n{\n z_data.push(unpack(rows,i));\n}\n\nvar data = [{\n z: z_data,\n type: 'surface',\n colorscale:'Viridis',\n lighting: {diffuse: 0.9}\n },\n {\n z: z_data,\n type: 'surface',\n scene: 'scene2',\n colorscale:'Viridis',\n lighting: {diffuse: 0.1}\n }\n];\n\nvar layout = {\n title: {\n text: 'Diffuse Reflection'\n },\n grid: {\n rows: 1,\n columns: 2,\n pattern: 'independent',\n },\n \tscene:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:0}\n\t},\n\tscene2:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:1}\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Specular 

d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = [];
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale:'Viridis',
  lighting: {specular: 0.1}
        },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {specular: 2}
  }
];

var layout = {
  title: {
    text: 'Specular Reflection'
  },
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  },
};
Plotly.newPlot('myDiv', data, layout);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){\nfunction unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n}\n\nvar z_data = [];\nfor(i=0;i<100;i++)\n{\n z_data.push(unpack(rows,i));\n}\n\nvar data = [{\n z: z_data,\n type: 'surface',\n colorscale:'Viridis',\n lighting: {specular: 0.1}\n },\n {\n z: z_data,\n type: 'surface',\n scene: 'scene2',\n colorscale:'Viridis',\n lighting: {specular: 2}\n }\n];\n\nvar layout = {\n title: {\n text: 'Specular Reflection'\n },\n grid: {\n rows: 1,\n columns: 2,\n pattern: 'independent',\n },\n \tscene:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:0}\n\t},\n\tscene2:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:1}\n },\n};\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Fresnel 

d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var z_data = [];
for(i=0;i<100;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
  z: z_data,
  type: 'surface',
  colorscale:'Viridis',
  lighting: {fresnel: 0.1}
        },
   {
  z: z_data,
  type: 'surface',
  scene: 'scene2',
  colorscale:'Viridis',
  lighting: {fresnel: 5}
  }
];

var layout = {
  title: {
    text: 'Fresnel'
  },
  grid: {
    rows: 1,
    columns: 2,
    pattern: 'independent',
  },
  	scene:{
		aspectmode:'cube',
		domain:{row:0, column:0}
	},
	scene2:{
		aspectmode:'cube',
		domain:{row:0, column:1}
  }
};
Plotly.newPlot('myDiv', data, layout);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){\nfunction unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n}\n\nvar z_data = [];\nfor(i=0;i<100;i++)\n{\n z_data.push(unpack(rows,i));\n}\n\nvar data = [{\n z: z_data,\n type: 'surface',\n colorscale:'Viridis',\n lighting: {fresnel: 0.1}\n },\n {\n z: z_data,\n type: 'surface',\n scene: 'scene2',\n colorscale:'Viridis',\n lighting: {fresnel: 5}\n }\n];\n\nvar layout = {\n title: {\n text: 'Fresnel'\n },\n grid: {\n rows: 1,\n columns: 2,\n pattern: 'independent',\n },\n \tscene:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:0}\n\t},\n\tscene2:{\n\t\taspectmode:'cube',\n\t\tdomain:{row:0, column:1}\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Reference

See https://plotly.com/javascript/reference/surface/#surface-lighting for more information!