上文和读者聊了聊三维世界中的坐标系问题，本文想通过一个弹弹球的案例，再来和读者聊一聊物体移动问题。

本文是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