I’m tring to control the direction of view and zoom of a plotly 3D image. I need to place the camera and the centre point of the image in the same Cartesian co-ordinates as the data itself. I see that layout.scene.camera gives the position of the centre of the image and layout.scene.eye gives the position of the camera both in a 3D catesian frame (x,y,z) but the units of x,y and z are not obvious and do not line up with the data co-ordinates. The following example code produces three lines one running from [0,0,0] to [0,0,10] is blue another from [50,0,0] to [50,0,10] is red and a third is yellow and runs from [0,0,10] to [50,50,10]. I can move the center and eye positions around so that the tips of different lines line up and thus establish a mapping between the data positions and the eye/center positions. When I do this I establish that eye and center co-ordinates correspond to the line/data co-ordinates in the following way
x of 0/50 in data = x of +/-0.805 when using eye/center
y of 0/50 in data = y of +/-0.805 when using eye/center
z of 0/10 in data = z of +/-0.16 when using eye/center
I have then moved the second point of the yellow line to [50,25,10] thus halving the y extent of the data and I find
x of 0/50 in data = x of +/-1 when using eye/center
y of 0/25 in data = y of +/-0.5 when using eye/center
z of 0/10 in data = z of +/-0.2 when using eye/center
The origin of the co-ordinates system for camera/eye funcitons appears to be the centre of the plotted data and the aspect ratio is maintained the same as the data, but why is the scaling changing? and how can I map these co-ordinate systems to each other correctly. Thank you for any help, The following code is for the first case ie larger y extent with the eye and center lining up the tops of the red and blue lines.
// set image layout
var layout = {
scene : {
aspectmode: "data",
camera: {
center: {x: -0.805, y: -0.805, z: 0.16 },
eye: {x: 1.805, y: -0.805, z: 0.16 },
up: {x: 0, y: 0, z: 1 }
},
xaxis: {
visible: true
},
yaxis: {
visible: true
},
zaxis: {
visible: true
},
margin: {
l: 0,
r: 0,
b: 0,
t: 0
},
showlegend: true,
legend: {
"x": "0",
"margin.r": "120"
}
}
}
// Plot yellow line
x=[0.0, 25.0, 50.0]
y=[0.0, 25.0, 50.0]
z=[10.0, 10.0, 10.0]
Plotly.plot('tester', [{
type: 'scatter3d',
mode: 'lines',
x: x,
y: y,
z: z,
opacity: 0.7,
line: {
width: 10,
color: 'yellow'}
}], layout);
//plot red line
x=[50, 50]
y=[0, 0]
z=[0.0, 10.0]
Plotly.plot('tester', [{
type: 'scatter3d',
mode: 'lines',
x: x,
y: y,
z: z,
opacity: 1,
line: {
width: 5,
color: 'red'}
}],layout);
// Plot blue line
x=[0.0, 0.0]
y=[0.0, 0.0]
z=[0.0, 10.0]
Plotly.plot('tester', [{
type: 'scatter3d',
mode: 'lines',
x: x,
y: y,
z: z,
opacity: 0.7,
line: {
width: 10,
color: 'blue'}
}],layout);