有关用three js 描绘物体运动的轨迹

      首先，我应当说明，这些项目是我不断看文档，看API，看例子，然后照猫画虎搞出来的，所以首先应当感谢的是three js的官网:http://thrrejs.org

      不重复造轮子的原则是对的，但我们不应当失去造轮子的能力。

      在three js项目中，必须有如下几个元素：

var scene = new THREE.Scene();//场景

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//视角

var renderer = new THREE.WebGLRenderer(); //渲染器

renderer.setSize( window.innerWidth, window.innerHeight ); 渲染器参数设置

document.body.appendChild( renderer.domElement );使渲染器在html网页中生效

这三种是使画面呈现出来最基本的要素，但仅仅只是有了白纸，眼睛，画笔，并不构成作品，我们需要在白纸上加点什么，以一个正方体为例。

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); 几何形状材质的决定

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );外部纹理

var cube = new THREE.Mesh( geometry, material ); 构建一个正方体

scene.add( cube ); 将正方体加入场景中

camera.position.z = 5;决定正方体位置的z坐标、

注意：以上5条代码非常重要！！！所有对象的添加与绘制，都与上面的例子是差不多的模样。

几乎所有的动画效果与上方例子不同的地方仅在于：

几何形状不同或依某个函数变化；

外部纹理不同或依某个函数变化；

构建的时机与加入场景的时机不同或依某个函数变化；

位置不同或依某个函数变化；

所以上方正方体的例子就是动画最原始的模样！

当你画完了，需要让它们动起来的时候，就需要如下的函数：

function render() {

requestAnimationFrame( render ); 不断地执行一个叫“render”的函数，等于无限调用自己

renderer.render( scene, camera );渲染器启动，渲染场景与视角

}

render();开始无限调用

渲染器运行函数通过不断地调用自己，使得动画一直存在，假如你把那个无限调用干掉的话，动画将是昙花一现。

我将述说一个需求：使一个物体（假设是小球）不断地运动，并且显示它运动的轨迹。

我愿意告诉你们我最终的想法与做法：

像上方一样，建立三要素，建立一个小球，

【1】使它的position位置的三个坐标都加上一个 -10~10之间的随机数，（发挥你的数学才能让球按一定规律运动）

【2】步骤【1】要在render函数中实现，这样能够使小球不断地运动。（因为每次渲染小球的坐标都在变）

【3】必须建立“线”这一对象，用以描绘运动轨迹。

【4】有关线的建立：

由于是绘制轨迹，应当尽可能地准确而平滑，假如我们直接使用“线”结构，最终只能搞出一堆直线的连接，而three js中有样条曲线的结构（有很多种曲线结构，感兴趣地可以试试别的），使用样条曲线能构造出平滑的曲线，例子如下：

var curve = new THREE.SplineCurve3(

[new THREE.Vector3( -10, 0, 10 ),

new THREE.Vector3( -5, 5, 5 ),

new THREE.Vector3( 0, 0, 0 ),

new THREE.Vector3( 5, -5, 5 ), //设置线经过的坐标

new THREE.Vector3( 10, 0, 10 ) ]

);

var path = new THREE.Path( curve.getPoints( 50 ) ); 决定画线的精度，学过微积分的都知道，这就是不断趋近

var geometry = path.createPointsGeometry( 50 ); 将坐标数组包装入几何性质中

var material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); 纹理，（这里设置的是颜色）

var splineObject = new THREE.Line( geometry, material );//画线

scene.add( splineObject );将对象加入场景

而当我们将变化的小球坐标不断加入到数组中，再依照上面的方法，自然而然地就画出了小球的轨迹。