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);
});

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);
});

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);
});

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);
});

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);
});

Reference

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