I have created a demo that runs smoothly on Chrome and Firefox but lags terribly on Safari. Disabling antialiasing slightly improves the FPS, but not significantly. I am wondering if there are ways to optimize my code, perhaps by implementing caching techniques? Keep in mind, I am new to working with three.js.
It would be ideal if the demo could also function well on iOS Safari.
Check out the demo below:
var $container = $('#torus');
var mouseX = 0,
mouseY = 0;
// Rest of JavaScript code goes here...
body {
background: black;
}
// CSS code snippet
<div id="torus"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>