// Now, animate what the camera sees on the screen:
varis_cartwheeling = false;
varis_flipping = true;
functionanimate() {
requestAnimationFrame(animate);
if(is_cartwheeling) {
avatar.rotation.z = avatar.rotation.z + 0.05;
}
if(is_flipping) {
avatar.rotation.x = avatar.rotation.x + 0.05;
}
renderer.render(scene, camera);
}
animate();
</script>A1.4 Code: Moving Avatars
This is the moving-avatar code from Chapter 4, Project: Moving Avatars, on
page 35.<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:
varscene =newTHREE.Scene();// This is what sees the stuff:
varaspect_ratio = window.innerWidth / window.innerHeight;
varcamera =newTHREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
camera.position.z = 500;
//scene.add(camera);// This will draw what the camera sees onto the screen:
varrenderer =newTHREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// ******** START CODING ON THE NEXT LINE ********
varmarker =newTHREE.Object3D();
scene.add(marker);varcover =newTHREE.MeshNormalMaterial();
varbody =newTHREE.SphereGeometry(100);
varavatar =newTHREE.Mesh(body, cover);
marker.add(avatar);varhand =newTHREE.SphereGeometry(50);varright_hand =newTHREE.Mesh(hand, cover);Appendix 1. Project Code • 220
Prepared exclusively for Michael Powell report erratum • discuss