title: three.js how to allow OrbitControls to rotate around object with a static buffer geometry creating 3D spirograph effect
body: <p>I am trying to create a 3d spirograph effect. In this <a href="https://jsfiddle.net/Wilco_/r0uj85n6/21/" rel="nofollow noreferrer">fiddle</a> I have a simple Points plane rotating. When you press the Enter key a transparent plane material is added in front of the camera creating a trailing effect. This is all working as intended, but I was hoping to be able to add OrbitControls to be able to rotate around the spirograph as a whole without the trailing effect created by the transparent plane being affected by the OrbitControls as well.</p>
  <pre><code>var fadeMaterial = new THREE.MeshBasicMaterial({
      color: 0x000000,
      transparent: true,
      opacity: 0.01
    });
  var fadePlane = new THREE.PlaneBufferGeometry(10, 10);
  var fadeMesh = new THREE.Mesh(fadePlane, fadeMaterial);
    
      fadeMesh.position.z = -0.08;
      fadeMesh.renderOrder = -1;
    
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
    camera.add(fadeMesh);
    camera.position.z = 60;
  </code></pre>
  <p>The image below shows the effect from a static viewpoint (before moving the camera with OrbitControls), but as soon as I move the camera the trailing effect is also affected. Essentially I would like to be able to rotate around this without the trailing effect changing.</p>
  <p><a href="https://i.stack.imgur.com/o3kkK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o3kkK.png" alt="spiro" /></a></p>
  <p>I think the issue is caused by the transparent plane being in front of the camera, but I'm not sure how else to create the trailing effect. Any advice on how to create this while being able to rotate around it without disturbing the trailing effect?</p>