Is there a way to run multiple three.js animations simultaneously without canceling each other out? How can I troubleshoot why adding a second object stops the first object from animating? I would like to have more than one three.js script running in the same file. Can anyone assist me with this? Thank you
//first object
var scene2 = new THREE.Scene();
document.addEventListener( 'mousemove', onMouseMove, false );
var camera2 = new THREE.PerspectiveCamera( 40, window.innerWidth/window.innerHeight, 0.1, 1000 );
var mouseX;
var mouseY;
var renderer2 = new THREE.WebGLRenderer();
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.autoClear = false;
document.body.appendChild( renderer2.domElement );
...
//second object
<script>
var scene = new THREE.Scene();
document.addEventListener( 'mousemove', onMouseMove, false );
var camera = new THREE.PerspectiveCamera( 40, window.innerWidth/window.innerHeight, 0.1, 1000 );
var mouseX;
var mouseY;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
document.body.appendChild( renderer.domElement );
...
</script>
'''