Camera Rotation Around Character

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

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));


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/

<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();

var cover = new THREE.MeshNormalMaterial();
var body = new THREE.CylinderGeometry(1, 100, 100, 8, 1);
var avatar = new THREE.Mesh(body, cover);

var hand = new THREE.SphereGeometry(50);
var right_hand = new THREE.Mesh(hand, cover);
right_hand.position.set(-150, 0, 0);

var left_hand = new THREE.Mesh(hand, cover);
left_hand.position.set(150, 0, 0);

var feet = hand;

var left_foot = new THREE.Mesh(feet, cover);
left_foot.position.set(75, -130, 0);

var right_foot = new THREE.Mesh(feet, cover);
right_foot.position.set(-75, -130, 0);

var face_shape = new THREE.SphereGeometry(100);
var face = new THREE.Mesh(face_shape, cover);
face.position.set(0, 150, 0);

// 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;

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;
}

if (code == 38) { //up
phi = phi - param_offset;
}

if (code == 39) { //right
theta = theta - param_offset;
}

if (code == 40) { //down
phi = phi + param_offset;
}

theta = theta % 360;
phi = phi % 360;

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();

});

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.position.set(x, -75, z);
}

return a*(Math.PI/180);
}

</script>

Edited by end

Share on other sites

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

1. 1
Rutin
41
2. 2
3. 3
4. 4
5. 5

• 18
• 20
• 14
• 14
• 9
• Forum Statistics

• Total Topics
633368
• Total Posts
3011532
• Who's Online (See full list)

There are no registered users currently online

×