title: Three.js Camera and Movement binded to Object
body: <p>I have used the THREE pointer lock controls as the controls for the object and used the perspective camera aswell but when i added them both to the object only one of them is added and that depends on which one i added first. Also as im a beginner im not familiar on how to move the object which ever direction i moved when i use the WASD keys also rotate on the angle that my camera moves. Only the important peices of code are here.</p>
  
  <p>When i move my object only moves in the North, E, S, W direction which it should, but then when i move my camera it still moves in the direction of when it was spawned in, not changed the angle of direction so if i aimed East and i moved to go forward it would go North.</p>
  
  <p>Also when i move in any direction the object moves back to 0, 0, 0</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function e() {
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
  
      scene = new THREE.Scene();
  
      scene.background = new THREE.Color(0xffffff);
  
      var playerGeometry = new THREE.BoxBufferGeometry(10, 40, 10);
      playerGeometry = playerGeometry.toNonIndexed(); // ensure each face has unique vertices
  
      var playerMaterial = new THREE.MeshPhongMaterial({
        specular: 0xffffff,
        flatShading: true,
        vertexColors: THREE.VertexColors
      });
  
      window.player = new THREE.Mesh(playerGeometry, playerMaterial);
  
      console.log(player);
  
      window.player.add(camera);
      camera.position.set(0, 20, 20); 
      
       controls = new THREE.PointerLockControls(camera);
       window.player.add(controls.getObject());
      scene.add(player);
      objects.push(player);
      }
      
      
    ========================================================================= // Then the animation, these are just snippets not ofc the whole thing
      
      function animate() {
  
      requestAnimationFrame(animate);
  
      if (controls.enabled) {
        raycaster.setFromCamera(direction, camera);
  
        var time = performance.now();
        var delta = (time - prevTime) / 1000;
  
        velocity.x -= velocity.x * 10.0 * delta;
        velocity.z -= velocity.z * 10.0 * delta;
        velocity.y -= 3.8 * 100.0 * delta; // 100.0 = mass
  
        if (window.player.position) {
        window.player.position.z = Number(keys[87]) - Number(keys[83]);
        window.player.position.x = Number(keys[65]) - Number(keys[68]);
        window.player.position.normalize(); // this ensures consistent movements in all directions
  
        if (keys[87] || keys[83])  window.player.position.z -= window.player.position.z * 400.0 * delta;
        if (keys[65] || keys[68])  window.player.position.x -= window.player.position.x * 400.0 * delta;
        if (keys[32]) velocity.y = 200;
        }
        controls.getObject().translateX(velocity.x * delta);
        controls.getObject().translateY(velocity.y * delta);
        controls.getObject().translateZ(velocity.z * delta);
  
        if (controls.getObject().position.y &lt; 10) {
          velocity.y = 0;
          controls.getObject().position.y = 10;
          canJump = true;
        }
  
        prevTime = time;
  
        if (camControls) camControls.update(delta);
      }
  
      renderer.render(scene, camera);
  
    }</code></pre>
  </div>
  </div>
  </p>