第6章 动画
在本章之前，所有画面都是静止的，本章将介绍如果使用Three.js进行动态画面的渲染。此外，将会介绍一个Three.js作者写的另外一个库，用来观测每秒帧数（FPS）。
CSS3动画那么强，requestAnimationFrame还有毛线用？
window.requestAnimationFrame MDN
小球下落例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我随便写写的HTML小Demo合集</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body onload="init()">
<button>hehe</button>
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>
<script src="lib/jquery.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="js/main.js"></script>
<script src="lib/three.js"></script>
<script src="lib/stat.js"></script>
<script>
var requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
var scene = null;
var camera = null;
var renderer = null;
var id = null;
var stat = null;
var ballMesh = null;
var ballRadius = 0.5;
var isMoving = false;
var maxHeight = 5;
var v = 0;
var a = -0.01;
function init() {
stat = new Stats();
stat.domElement.style.position = 'absolute';
stat.domElement.style.right = '0px';
stat.domElement.style.top = '0px';
document.body.appendChild(stat.domElement);
renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')});
scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(5, 10, 20);
camera.lookAt(new THREE.Vector3(0, 3, 0));
scene.add(camera);
// ball
ballMesh = new THREE.Mesh(new THREE.SphereGeometry(ballRadius, 16, 8),
new THREE.MeshLambertMaterial({
color: 0xffff00
}));
ballMesh.position.y = ballRadius;
scene.add(ballMesh);
// plane
var texture = THREE.ImageUtils.loadTexture('../img/chess.png', {}, function() {
renderer.render(scene, camera);
});
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);
var plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 5),
new THREE.MeshLambertMaterial({map: texture}));
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(10, 10, 15);
scene.add(light);
id = requestAnimationFrame(draw);
}
function draw() {
stat.begin();
if (isMoving) {
ballMesh.position.y += v;
v += a;
if (ballMesh.position.y <= ballRadius) {
// hit plane
v = -v * 0.9;
}
if (Math.abs(v) < 0.001) {
// stop moving
isMoving = false;
ballMesh.position.y = ballRadius;
}
}
renderer.render(scene, camera);
id = requestAnimationFrame(draw);
stat.end();
}
function stop() {
if (id !== null) {
cancelAnimationFrame(id);
id = null;
}
}
function drop() {
isMoving = true;
ballMesh.position.y = maxHeight;
v = 0;
}
$("button").click(drop);
</script>