有关用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 );将对象加入场景

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