有關用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 );將對象加入場景

而當咱們將變化的小球座標不斷加入到數組中，再依照上面的方法，天然而然地就畫出了小球的軌跡。