We Created An Animated Avatar
- We reviewed shapes, covers and mesh.
- We reviewed x, y, and z axis. Go here for details:
- Uncle Daryl showed mechanical engineering application of 3D objects and xyz rotation in design.
- We animated simple objects. See code below:
======
<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; scene.add(camera);
// 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 shape = new THREE.SphereGeometry(50, 50, 50); var cover = new THREE.MeshNormalMaterial(); var ball = new THREE.Mesh(shape, cover); scene.add(ball); ball.position.set(0,0,0);
var shape = new THREE.CubeGeometry(200, 100, 100); var cover = new THREE.MeshNormalMaterial(); var box = new THREE.Mesh(shape, cover); scene.add(box); box.rotation.set(1, 0.5, 0); box.position.set(250,250,-250);
var shape = new THREE.CylinderGeometry(1, 200, 200, 4); var cover = new THREE.MeshNormalMaterial(); var tube = new THREE.Mesh(shape, cover); scene.add(tube); tube.rotation.set(-0.5, 0, 0); tube.position.set(250,-250,-250);
var shape = new THREE.TorusGeometry(200, 100, 5, 4); //(size, thickness, # of lines, sides, full circle) var cover = new THREE.MeshNormalMaterial(); var donut = new THREE.Mesh(shape, cover); scene.add(donut);
// Now, show what the camera sees on the screen: var clock = new THREE.Clock();
function animate() { requestAnimationFrame(animate); var t = clock.getElapsedTime(); box.rotation.set(t, -t, t); donut.rotation.set(t, t, -t); tube.rotation.set(t, t, t); ball.rotation.set(-t, t, t); renderer.render(scene, camera); } animate(); </script>
- See animated code we did in class below:
======
<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; scene.add(camera);
// 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 cover = new THREE.MeshNormalMaterial(); var body = new THREE.SphereGeometry(100, 20, 20); var avatar = new THREE.Mesh(body, cover); scene.add(avatar);
var hand = new THREE.SphereGeometry(50,20,20); 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 foot = new THREE.SphereGeometry(50, 20, 20); var right_foot = new THREE.Mesh(foot, cover); right_foot.position.set(-100, -125, 0); avatar.add(right_foot);
var left_foot = new THREE.Mesh(foot, cover); left_foot.position.set(100, -125, 0); avatar.add(left_foot);
// Now, animate what the camera sees on the screen: var is_cartwheeling = true; var is_flipping = true; var is_turning = true; 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_turning) { avatar.rotation.y = avatar.rotation.y + -0.05; } renderer.render(scene, camera); } animate(); </script>
