Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f1a184f

Browse files
authored
Merge pull request plotly#1186 from plotly/3d-surface-lighting-examples
3d surface lighting examples
2 parents 23dfdd5 + 08ee0d4 commit f1a184f

15 files changed

+1135
-38
lines changed
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Javascript Graphing Library D3.js-based Charts with 3D Surface Lighting | Examples | Plotly
3+
name: 3D Surface Lighting
4+
permalink: javascript/3d-surface-lighting/
5+
description: How to customize lighting for 3D surface charts.
6+
layout: base
7+
language: plotly_js
8+
page_type: example_index
9+
has_thumbnail: false
10+
display_as: layout_opt
11+
---
12+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-surface-lighting" | sort: "order" %}
13+
{% include auto_examples.html examples=examples %}
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
name: Ambient Lighting
3+
plot_url: https://codepen.io/plotly/embed/JeLJBQ/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: 3d-surface-lighting
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
12+
function unpack(rows, key) {
13+
return rows.map(function(row) { return row[key]; });
14+
}
15+
16+
var z_data = [ ];
17+
for(i=0;i<100;i++)
18+
{
19+
z_data.push(unpack(rows,i));
20+
}
21+
22+
var data = [{
23+
z: z_data,
24+
type: 'surface',
25+
colorscale: 'Viridis',
26+
lighting: {ambient: 0.9}
27+
},
28+
{
29+
z: z_data,
30+
type: 'surface',
31+
scene: 'scene2',
32+
colorscale:'Viridis',
33+
lighting: {ambient: 0.2}
34+
}
35+
];
36+
37+
var layout = {
38+
title: 'Ambient Lighting',
39+
grid: {
40+
rows: 1,
41+
columns: 2,
42+
pattern: 'independent',
43+
},
44+
scene:{
45+
aspectmode:'cube',
46+
domain:{row:0, column:0}
47+
},
48+
scene2:{
49+
aspectmode:'cube',
50+
domain:{row:0, column:1}
51+
}
52+
};
53+
Plotly.newPlot('myDiv', data, layout);
54+
});
55+
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
name: Diffuse
3+
plot_url: https://codepen.io/plotly/embed/OavjyO/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: 3d-surface-lighting
6+
order: 3
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
12+
function unpack(rows, key) {
13+
return rows.map(function(row) { return row[key]; });
14+
}
15+
16+
var z_data = []
17+
for(i=0;i<100;i++)
18+
{
19+
z_data.push(unpack(rows,i));
20+
}
21+
22+
var data = [{
23+
z: z_data,
24+
type: 'surface',
25+
colorscale:'Viridis',
26+
lighting: {diffuse: 0.9}
27+
},
28+
{
29+
z: z_data,
30+
type: 'surface',
31+
scene: 'scene2',
32+
colorscale:'Viridis',
33+
lighting: {diffuse: 0.1}
34+
}
35+
];
36+
37+
var layout = {
38+
title: 'Diffuse Reflection',
39+
grid: {
40+
rows: 1,
41+
columns: 2,
42+
pattern: 'independent',
43+
},
44+
scene:{
45+
aspectmode:'cube',
46+
domain:{row:0, column:0}
47+
},
48+
scene2:{
49+
aspectmode:'cube',
50+
domain:{row:0, column:1}
51+
}
52+
};
53+
Plotly.newPlot('myDiv', data, layout);
54+
});
55+
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
name: Fresnel
3+
plot_url: https://codepen.io/plotly/embed/GwxvZE/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: 3d-surface-lighting
6+
order: 5
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
12+
function unpack(rows, key) {
13+
return rows.map(function(row) { return row[key]; });
14+
}
15+
16+
var z_data = [];
17+
for(i=0;i<100;i++)
18+
{
19+
z_data.push(unpack(rows,i));
20+
}
21+
22+
var data = [{
23+
z: z_data,
24+
type: 'surface',
25+
colorscale:'Viridis',
26+
lighting: {fresnel: 0.1}
27+
},
28+
{
29+
z: z_data,
30+
type: 'surface',
31+
scene: 'scene2',
32+
colorscale:'Viridis',
33+
lighting: {fresnel: 5}
34+
}
35+
];
36+
37+
var layout = {
38+
title: 'Fresnel',
39+
grid: {
40+
rows: 1,
41+
columns: 2,
42+
pattern: 'independent',
43+
},
44+
scene:{
45+
aspectmode:'cube',
46+
domain:{row:0, column:0}
47+
},
48+
scene2:{
49+
aspectmode:'cube',
50+
domain:{row:0, column:1}
51+
}
52+
};
53+
Plotly.newPlot('myDiv', data, layout);
54+
});
55+
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
name: Reference
3+
language: plotly_js
4+
suite: 3d-surface-lighting
5+
order: 10
6+
sitemap: false
7+
arrangement: horizontal
8+
markdown_content: |
9+
See [https://plot.ly/javascript/reference/#surface-lighting](https://plot.ly/javascript/reference/#surface-lighting) for more information!
10+
---
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
name: Roughness
3+
plot_url: https://codepen.io/plotly/embed/PxRKoK/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: 3d-surface-lighting
6+
order: 2
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
12+
function unpack(rows, key) {
13+
return rows.map(function(row) { return row[key]; });
14+
}
15+
16+
var z_data = [];
17+
for(i=0;i<100;i++)
18+
{
19+
z_data.push(unpack(rows,i));
20+
}
21+
22+
var data = [{
23+
z: z_data,
24+
type: 'surface',
25+
colorscale:'Viridis',
26+
lighting: {roughness: 0.9}
27+
},
28+
{
29+
z: z_data,
30+
type: 'surface',
31+
scene: 'scene2',
32+
colorscale:'Viridis',
33+
lighting: {roughness: 0.2}
34+
}
35+
];
36+
37+
var layout = {
38+
title: 'Roughness',
39+
grid: {
40+
rows: 1,
41+
columns: 2,
42+
pattern: 'independent',
43+
},
44+
scene:{
45+
aspectmode:'cube',
46+
domain:{row:0, column:0}
47+
},
48+
scene2:{
49+
aspectmode:'cube',
50+
domain:{row:0, column:1}
51+
}
52+
};
53+
Plotly.newPlot('myDiv', data, layout);
54+
});
55+
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
name: Specular
3+
plot_url: https://codepen.io/plotly/embed/vQRJLg/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: 3d-surface-lighting
6+
order: 4
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
Plotly.d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
12+
function unpack(rows, key) {
13+
return rows.map(function(row) { return row[key]; });
14+
}
15+
16+
var z_data = [];
17+
for(i=0;i<100;i++)
18+
{
19+
z_data.push(unpack(rows,i));
20+
}
21+
22+
var data = [{
23+
z: z_data,
24+
type: 'surface',
25+
colorscale:'Viridis',
26+
lighting: {specular: 0.1}
27+
},
28+
{
29+
z: z_data,
30+
type: 'surface',
31+
scene: 'scene2',
32+
colorscale:'Viridis',
33+
lighting: {specular: 2}
34+
}
35+
];
36+
37+
var layout = {
38+
title: 'Specular Reflection',
39+
grid: {
40+
rows: 1,
41+
columns: 2,
42+
pattern: 'independent',
43+
},
44+
scene:{
45+
aspectmode:'cube',
46+
domain:{row:0, column:0}
47+
},
48+
scene2:{
49+
aspectmode:'cube',
50+
domain:{row:0, column:1}
51+
},
52+
};
53+
Plotly.newPlot('myDiv', data, layout);
54+
});
55+

_posts/python/javascript-controls/figureWidgets/selection-events-figure-widget.ipynb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6487,7 +6487,7 @@
64876487
]
64886488
},
64896489
"metadata": {},
6490-
"output_type": "display_data"
6490+
"output_type": "execute_result"
64916491
},
64926492
{
64936493
"data": {
@@ -6499,7 +6499,7 @@
64996499
]
65006500
},
65016501
"metadata": {},
6502-
"output_type": "display_data"
6502+
"output_type": "execute_result"
65036503
},
65046504
{
65056505
"name": "stdout",

_posts/python/javascript-controls/figureWidgets/slider-widget.ipynb

Lines changed: 4 additions & 32 deletions
Large diffs are not rendered by default.

_posts/python/layout/3d-surface-lighting/2015-06-30-3d-camera-lighting.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
name: 3D Surface Lighting
99
language: python
1010
title: 3D Surface Lighting in Python | Plotly
11-
display_as: layout_opts
11+
display_as: layout_opt
1212
has_thumbnail: true
1313
page_type: example_index
1414
order: 17

_posts/python/layout/3d-surface-lighting/3d-camera-lighting.ipynb

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@
428428
]
429429
},
430430
"metadata": {},
431-
"output_type": "display_data"
431+
"output_type": "execute_result"
432432
},
433433
{
434434
"data": {
@@ -440,7 +440,7 @@
440440
]
441441
},
442442
"metadata": {},
443-
"output_type": "display_data"
443+
"output_type": "execute_result"
444444
},
445445
{
446446
"name": "stdout",
@@ -483,7 +483,7 @@
483483
" name = '3D Surface Lighting',\n",
484484
" has_thumbnail='true', thumbnail='thumbnail/3d-surface-lighting.jpg', \n",
485485
" language='python', page_type='example_index', \n",
486-
" display_as='layout_opts', order=17,\n",
486+
" display_as='layout_opt', order=17,\n",
487487
" ipynb= '~notebook_demo/77')"
488488
]
489489
},

0 commit comments

Comments
 (0)