✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

# Animated 3d line plot

Hello guys,
ok so here is my problem:
I wanted make a 3D animation of electromagnetic waves rotating. The thing is, after each frame it resets the camera position. That way we cannot spectate the animation from a different angle. Is there any way to disable the camera reset position after each frame? Or can we set the camera position to the previous one in each frame?

Greetings, Kilian

Code:

let t=0;
let t1;
let y=[0,0,0,0];

var x1=[0,1,2,3];
var x2=[0,1,2,3];
var y1=[0,1,2,3];
var y2=[1,4,8,16];
var z1=[0,1,1,1];
var z2=[0,1,2,3];

var trace1 = {
x: x1,
y: y1,
z: z1,
mode: ‘lines’,
marker: {
color: ‘#1f77b4’,
size: 12,
symbol: ‘circle’,
line: {
color: ‘rgb(0,0,0)’,
width: 0
}},
line: {
color: ‘#1f77b4’,
width: 1
},
type: ‘scatter3d’
};

var trace2 = {
x: x2,
y: y2,
z: z2,
mode: ‘lines’,
marker: {
color: ‘#9467bd’,
size: 12,
symbol: ‘circle’,
line: {
color: ‘rgb(0,0,0)’,
width: 0
}},
line: {
color: ‘rgb(44, 160, 44)’,
width: 1
},
type: ‘scatter3d’
};

var dataT = [trace1, trace2];

var layout = {
title: ‘3D Line Plot’,
autosize: false,
width: 500,
height: 500,
margin: {
l: 0,
r: 0,
b: 0,
t: 65
}
};

compute();
t1 = document.getElementById(‘t1’);
Plotly.newPlot(t1, dataT, layout);
requestAnimationFrame(update);
};

function compute() {
trace1.x[0] = t;
trace1.x[1] = t + 1;
trace1.x[2] = t * 0.3;
trace1.x[3] = t * 0.5;
dataT[0]=trace1;
dataT[1]=trace2;
}

function update () {
compute();
t+=0.1;
Plotly.animate(t1, {
data: dataT
}, {
transition: {
duration: 1000
},
frame: {
duration: 1000,
redraw:false
}
});

``````requestAnimationFrame(update);
``````

}

requestAnimationFrame(update);