Jump to content
  • Advertisement
Sign in to follow this  

Camera Rotation Around Character

This topic is 1418 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I purchased 3D Game Programming for Kids by Chris Strom and I was trying to make the camera translate and rotate around the character we created. I was able to translate the camera around a path of a sphere using spherical coordinates (below is the code from lines 116 to 118 of my program).

    camera.position.x = row * Math.cos(toRadians(theta)) * Math.sin(toRadians(phi));
    camera.position.y = row * Math.cos(toRadians(phi));  
    camera.position.z = row * Math.sin(toRadians(theta)) * Math.sin(toRadians(phi));

 However, I was not able to rotate the camera so it is always fixed on the character. I realize that there are more efficient ways using the Three.js graphics library to perform my rotations and translations, but right now I am only concerned with the math that is involved. Below is the complete program in js and the fastest way to run it is by pasting the code in the online editor: http://gamingjs.com/ice/

 

The relevant code starts on line 85. Please help and thank you.

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
  var marker = new THREE.Object3D();
  scene.add(marker);
  
  
  var cover = new THREE.MeshNormalMaterial();
  var body = new THREE.CylinderGeometry(1, 100, 100, 8, 1);
  var avatar = new THREE.Mesh(body, cover);
  marker.add(avatar);
  marker.add(camera);
  
  var hand = new THREE.SphereGeometry(50);
  var right_hand = new THREE.Mesh(hand, cover);
  right_hand.position.set(-150, 0, 0);
  avatar.add(right_hand);
  
  var left_hand = new THREE.Mesh(hand, cover);
  left_hand.position.set(150, 0, 0);
  avatar.add(left_hand);

  var feet = hand;
  
  var left_foot = new THREE.Mesh(feet, cover);
  left_foot.position.set(75, -130, 0);
  avatar.add(left_foot);
  
  var right_foot = new THREE.Mesh(feet, cover);
  right_foot.position.set(-75, -130, 0);
  avatar.add(right_foot);
  
  var face_shape = new THREE.SphereGeometry(100);
  var face = new THREE.Mesh(face_shape, cover);
  face.position.set(0, 150, 0);
  avatar.add(face);
  
  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
  
  var is_cartwheeling = false;
  var is_flipping = false;
  var is_spinning = false;
  
  function animate() {
    requestAnimationFrame(animate);
    
    if (is_cartwheeling) {
      avatar.rotation.z = avatar.rotation.z + 0.05;
    }
    
    if (is_flipping) {
      avatar.rotation.x = avatar.rotation.x + 0.05;
    }
    
    if (is_spinning) {
      avatar.rotation.y = avatar.rotation.y + 0.05;
    }
    
    renderer.render(scene, camera);
  }  
  
  animate();
  
  var theta = 90;
  var phi = 90;
  var row = 500;
  var param_offset = 10;
  
  document.addEventListener( 'keydown', function(event) {
    var code = event.keyCode;
    
    if (code == 65) marker.position.x = marker.position.x - 5; //left 
    if (code == 87) marker.position.z = marker.position.z - 5; //up
    if (code == 68) marker.position.x = marker.position.x + 5;  //right
    if (code == 83) marker.position.z = marker.position.z + 5; //down
    
    if (code == 37) { //left
      theta = theta + param_offset;
      //camera.rotation.y = camera.rotation.y - toRadians(param_offset);
    }
    
    if (code == 38) { //up
      phi = phi - param_offset;
      //camera.rotation.x = camera.rotation.x - toRadians(param_offset);
    }
    
    if (code == 39) { //right
      theta = theta - param_offset;
      //camera.rotation.y = camera.rotation.y + toRadians(param_offset);
    }
    
    if (code == 40) { //down
      phi = phi + param_offset;
      //camera.rotation.x = camera.rotation.x + toRadians(param_offset);
    }
    
    theta = theta % 360;
    phi = phi % 360;
    
    camera.position.x = row * Math.cos(toRadians(theta)) * Math.sin(toRadians(phi));
    camera.position.y = row * Math.cos(toRadians(phi));  
    camera.position.z = row * Math.sin(toRadians(theta)) * Math.sin(toRadians(phi));
    
    if (code == 49) is_cartwheeling = !is_cartwheeling;
    if (code == 50) is_flipping = !is_flipping;
    if (code == 51) is_spinning = !is_spinning;
    if (code == 48) reset();
    
    //alert(code);
  }); 
  
  makeTreeAt( 500, 0 );
  makeTreeAt( -500, 0 );
  makeTreeAt( 750, -1000 );
  makeTreeAt( -750, -1000 );
  
  function reset() {
    avatar.position.set(0, 0, 0);
    avatar.rotation.set(0, 0, 0);
  }
  
  function makeTreeAt(x, z) {
    var trunk = new THREE.Mesh(
      new THREE.CylinderGeometry(50, 50, 200),
      new THREE.MeshBasicMaterial({color: 0xA0522D})
    );
    
    var top = new THREE.Mesh(
      new THREE.SphereGeometry(150),
      new THREE.MeshBasicMaterial({color: 0x228B22})
    );
    
    top.position.y = 175;
    trunk.add(top);
    trunk.position.set(x, -75, z);
    scene.add(trunk);
  }
  
  function toRadians(a) {
    return a*(Math.PI/180);
  }
  
</script>
Edited by end

Share this post


Link to post
Share on other sites
Advertisement

I was able to rotate the camera around my avatar with the lookAt function, so I added the following code

 

camera.lookAt(avatar.position);

 

Thanks

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!