title: How do I avoid circular movements when placing a cube on the camera position, but a bit behind?
body: <p>So this is my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;three.js&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
      &lt;link type="text/css" rel="stylesheet" href="main.css"&gt;
      &lt;style&gt;
        body {
          overflow: hidden;
          margin: 0;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script src="three.js"&gt;&lt;/script&gt;
      &lt;script src="pointerlockcontrols.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var camera, scene, renderer, controls;
        var cube;
  
        var previous_time = performance.now();
        var color = new THREE.Color();
  
        camera = new THREE.PerspectiveCamera(99, window.innerWidth / window.innerHeight, 1, 100);
        camera.position.y = 10;
  
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x0000ff);
        scene.fog = new THREE.Fog(0xffffff, 0, 750);
  
        var light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 0.75);
        light.position.set(0.5, 1, 0.75);
        scene.add(light);
  
        controls = new THREE.PointerLockControls(camera);
  
        document.body.addEventListener("click", function() { controls.lock(); });
  
        scene.add(controls.getObject());
  
        var geometry = new THREE.BoxBufferGeometry(0.8*5, 1.5*5, 0.4*5);
        var material = new THREE.MeshPhongMaterial({ color: 0xffffff });
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
  
        raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, - 1, 0), 0, 10);
  
        var floorGeometry = new THREE.PlaneBufferGeometry(2000, 2000, 100, 100);
        floorGeometry.rotateX(- Math.PI / 2);
  
        floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices
  
        position = floorGeometry.attributes.position;
        var colors = [];
  
        for (var i = 0, l = position.count; i &lt; l; i ++) {
          color.setHSL(Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75);
          colors.push(color.r, color.g, color.b);
        }
  
        floorGeometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
  
        var floorMaterial = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
  
        var floor = new THREE.Mesh(floorGeometry, floorMaterial);
        scene.add(floor);
  
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
  
        window.addEventListener('resize', on_window_resize, false);
  
        function on_window_resize() {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
  
          renderer.setSize(window.innerWidth, window.innerHeight);
        }
  
        function loop() {
          requestAnimationFrame(loop);
  
          if (controls.isLocked === true) {
            raycaster.ray.origin.copy(controls.getObject().position);
  
            var vector = new THREE.Vector3();
            controls.getObject().getWorldDirection(vector);
            cube.rotation.y = Math.atan2(vector.x, vector.z);
  
            cube.position.x = controls.getObject().position.x;
            cube.position.z = controls.getObject().position.z+1;
          }
  
          renderer.render(scene, camera);
        }
  
        loop();
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The important part here is:</p>
  
  <pre class="lang-js prettyprint-override"><code>// This makes the cube always look in the direction of the camera.
  var vector = new THREE.Vector3();
  controls.getObject().getWorldDirection(vector);
  cube.rotation.y = Math.atan2(vector.x, vector.z);
  
  // This makes the cube always be on the position of the camera (for later when there's movement)
  cube.position.x = controls.getObject().position.x;
  cube.position.z = controls.getObject().position.z+1;
  </code></pre>
  
  <p>And that works all pretty well, however because of the <code>+1</code> (I want the cube to be a bit behind the camera) at the end, the cube is doing circular movements when rotating the camera.</p>
  
  <p>I tried</p>
  
  <pre class="lang-js prettyprint-override"><code>cube.rotation.y = Math.atan2(vector.x, vector.z+1);
  </code></pre>
  
  <p>However that makes the cube not rotate at all.</p>
  
  <p>How do I avoid the circular movements? I just want to place the cube on my position, a bit behind me, while it also faces the direction I look at.</p>