Dear all,
for illustration purposes, I am trying to visualize an assembly consisting of a sphere and a 3D arrow using plotly. Unfortunately, the rendering is very slow.
Here is a minimal code example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript" src="to_plot.js"></script>
<script type="text/javascript">
const config = {
displayModeBar: false, // hide toolbar
responsive: true // resize
};
var layout = {
hovermode: 'closest',
scene: {
xaxis: {
showspikes: false,
showgrid: false,
zeroline: false,
showline: false,
visible: false,
ticks: '',
showticklabels: false,
range: [-1.1, 1.1]
},
yaxis: {
showspikes: false,
showgrid: false,
zeroline: false,
showline: false,
visible: false,
ticks: '',
showticklabels: false,
range: [-1.1, 1.1]
},
zaxis: {
showspikes: false,
showgrid: false,
zeroline: false,
showline: false,
visible: false,
ticks: '',
showticklabels: false,
range: [-1.1, 1.1]
},
camera: {
center: {
x: 0, y: 0, z: 0
},
eye: {
x: -0.9, y: 1, z: 0.6
},
projection: 'perspective'
}
},
showlegend: false,
margin: {
l: 0,
r: 0,
b: 0,
t: 0
},
};
Plotly.react('myDiv', to_plot, layout, config);
</script>
</html>
The data variable (to_plot) is created using some javascript code. Unfortunately, I had to move that to a pastebin due to the character limit;
What can I do to speed-up the rendering when the page is loaded? Currently, this takes nearly 2 seconds.
Cheers,
Konstantin