3d弹弹球
上文和读者聊了聊三维世界中的坐标系问题，本文想通过一个弹弹球的案例，再来和读者聊一聊物体移动问题。
本文是threejs系列的第三篇，阅读前面的文章有助于更好的理解本文：
1.一个简单的案例，理解threejs中几个基本概念 2.三维世界中的坐标系
绘制平面
使用threejs中提供的PlaneGeometry我们可以绘制一个在三维空间中无限延伸的二维平面，如下：
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
var render = new THREE.WebGLRenderer({
antialias: true
});
render.setClearColor("#FFFFFF");
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);
var axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
camera.position.z = 30;
camera.position.x = -30;
camera.position.y = 20;
camera.lookAt(0, 0, 0);
function show() {
render.render(scene, camera);
}
show()这段代码和前文的类似，唯一不同的是这里增加了PlaneGeometry，这是一个二维平面，这个平面默认是平行于屏幕的，构建它的四个参数分别表示平面x轴上的长度、y轴上的长度、以及x轴上的分段数、y轴上的分段数。由于这个平面默认平行于电脑平面，读者可以看不出三维效果，因此首先将这个平面绕x轴旋转180度（不旋转，看到的效果就是屏幕上一个灰色的长方形），同时修改相机的观察位置，最后绘制平面，结果如下：
注意坐标轴，绿色是y轴，蓝色是z轴，剩下一个红色是x轴（通过坐标轴也可以想象出相机的位置）。
绘制球
接下来，向屏幕中添加一个球，球体使用SphereGeometry来构建，如下：
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.y = 4;
sphere.position.x = 20;
sphere.position.z = 2;
scene.add(sphere);构造球体时，4表示半径，后面两个20分别表示宽和高的分段数。默认情况下，球心在世界坐标的(0,0,0)位置，这样会导致半个球在plane下方，因此设置球的y轴坐标为4，这样整个球就都在plane之上了，绘制结果如下：
跳动的球
使球跳动起来的方式有很多种，这里通过修改球的x轴、y轴坐标来实现这一功能，如下：
var step = 0;
function show() {
step += 0.04;
sphere.position.x = 20 + (10 * (Math.cos(step)));
sphere.position.y = 2 + (10 * (Math.abs(Math.sin(step))));
requestAnimationFrame(show)
render.render(scene, camera);
}由于余弦函数的取值在[-1,1]，因此，球的x轴将介于10到30之间，正弦函数取值虽然也是[-1,1]，但是因为取了绝对值，所以球的y轴介于2到12之间，最终跳动效果如下：
好了，本文先介绍到这里，有问题欢迎留言讨论。
本文案例：https://github.com/lenve/threejsDemo