var container = document.getElementById("canvasdiv");
var width = canvasdiv.clientWidth;
var height = canvasdiv.clientHeight;

這樣再加上前面的一行代碼，我們就完成了對相機的定義。然后把相機位置設(shè)定在z軸上方便觀察。
camera.position.set(0,0,10)

現(xiàn)在我們需要一個渲染器把定義好的場景渲染出來。

var renderer = new THREE.WebGLRenderer();

給這個渲染器合適的大小。

renderer.setSize( width, height );

然后將其加入到dom中。

canvasdiv.appendChild( renderer.domElement );

（運行以后發(fā)現(xiàn)這其實就是一個canvas元素。其實我們也可以在html中創(chuàng)建canvas元素再將renderer綁定到它上面。var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("mainCanvas") });）
最后進行渲染。

renderer.render(scene,camera);

這樣，就建立了一個簡單的3d場景。

我將threejs中的物體理解為模型+材料。以一個長方體為例。
創(chuàng)建模型：

var geometry = new THREE.BoxGeometry( 1,2,1 );

定義材料：

var material = new THREE.MeshBasicMaterial( { color: 0x645d50 } );

有了這兩者，我們就可以構(gòu)建一個長方體方塊了。

var cube = new THREE.Mesh( geometry, material );

我們將其添加到場景中顯示。

scene.add( cube );

這樣，一個三維的長方體就繪制完成了
關(guān)于其他形狀的繪制，張雯莉的threejs入門指南中介紹的很詳細，在此不多贅述。
這部分的完整代碼如下：

看上去它只是一個長方形而已，但是它確實是一個立體圖形，你可以改變一下camera的位置來觀察一下。

camera.position.set( 5,3,10 );

好了，這樣看起來是一個立體的長方體了吧。

大多數(shù)時候，我們需要講繪制的圖形整合到一起進行控制。此時，我們便需要一個3d對象。

在上面繪制的那個長方體上面再放一個球。

var geometry = new THREE.SphereGeometry( 0.5,100,100 );
var material = new THREE.MeshBasicMaterial( { color: 0xb9c16c } );
var ball = new THREE.Mesh( geometry,material );
ball.position.set( 0,0,1 );
scene.add(ball);

另說一句，默認放置mesh的位置是( 0,0,0 )，和改變相機位置一樣，我們可以用ball.position.set方法來改變圖形或?qū)ο蟮奈恢?。因此動畫也利用這個方法來實現(xiàn)。
然后要把它們整合成一個對象。
首先我們創(chuàng)建一個對象。

var myobj = new THREE.Object3D();

然后把我們畫的圖形添加到對象里就ok啦。

myobj.add( cube );
myobj.add( ball );

這時候我們已經(jīng)有了一個3d對象，它包含我們剛剛繪制的長方形和球。于是就沒有必要像原來那樣把圖形一個一個地放置到場景里，只需要把剛剛創(chuàng)建的對象放置到場景里。

scene.add( myobj );

完整代碼如下：

threejs支持從外部導(dǎo)入.obj文件，聽說這種文件是用3DsMax繪制的，用PS也可以編輯。我們需要引入OBJMTLLoader.js，MTLLoader.js文件；也有一個OBJLoader.js，但利用這個庫只能導(dǎo)入模型而不能導(dǎo)入繪制obj時添加的材質(zhì)，個人感覺不是非常實用，就不做介紹了。這時候，我們需要把文件們放到一個服務(wù)器上，否則會出現(xiàn)跨域問題。
為了讓圖像更明顯，我們添加一些光線。

scene.add( new THREE.AmbientLight( 0xffffff ) );

這里，我們通過導(dǎo)入圖片來設(shè)置這個對象的紋理。

var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( );
loader.load( "tank.jpg", function ( image ) {
    texture.image = image;
    texture.needsUpdate = true;
} );

開始導(dǎo)入我們的3D對象！

var loader = new THREE.OBJMTLLoader();  
loader.load("tank.obj","tank.mtl",function(object){ 
    tank = object;

    object.traverse(function(child){
        if (child instanceof THREE.Mesh){
        //將貼圖賦于材質(zhì)
            child.material.map = texture;
            child.material.transparent = true;
        }
    });
    object.position.set(0,0,0);
    scene.add( object );  
    camera.lookAt( object.position ); 
    renderer.render( scene,camera );  
});  

模型導(dǎo)入進去了，但是看起來還是很奇怪，這就要我們加一些其他光線渲染一下。在這里我們添加平行光線。

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
directionalLight.position.set( 1, 1, 1 )
scene.add( directionalLight );

變得光澤多了。
從外部導(dǎo)入obj的完整代碼：

現(xiàn)在我們想辦法讓這些圖形動起來。
在threejs中運用最多的動畫是用requestAnimationFrame()方法。也可以利用傳統(tǒng)的setInterval()做，但用這個會掉幀。
這里我們做一個render函數(shù)，來進行渲染和動畫調(diào)用。這里以前面添加了myobj對象的代碼為基礎(chǔ)。

現(xiàn)在來不斷地改變對象的角度方便對其進行觀察。

接著讓我們對動畫進行控制。
在我實現(xiàn)的項目中，是通過websocket連接后臺傳入?yún)?shù)來控制對象運動的，這里就介紹一下使用參數(shù)控制吧。
這里有一個問題，就是requestAnimationFrame回調(diào)的函數(shù)不能帶有參數(shù)，否則會出現(xiàn)奇怪的bug。所以我選擇用一個全局對象來進行控制。

var control={
    s:0,
    p:0,
    q:0,
    j:0,
}

這里s是運動的速度，p,q,j分別是myobj將要運動到的位置的x,y,z坐標。我們先寫一個控制它在x軸上運動的函數(shù)：

var run = function () {
    if ( myobj.position.xcontrol.p ) {
        myobj.position.x -= control.s;
        requestAnimationFrame( run );
        renderer.render( scene,camera )
    };
}

再在render函數(shù)中添加對run的調(diào)用requestAnimationFrame( run )。這樣就可以在命令行中改變對象control的值實現(xiàn)控制myobj的運動。但是在運動停止后我的瀏覽器為什么會變得很卡，而且運動速度回有變化。我還不知道原因。不知道有沒有朋友和我有同樣的問題。于是我把函數(shù)拆成了兩個，這樣瀏覽器性能好些。

var run = function () {

    if ( myobj.position.xcontrol.p ) {
    myobj.position.x -= control.s;            
        requestAnimationFrame( runx );
    };
        renderer.render( scene,camera )    
}

同樣的，也可以寫出在y,z軸上運動的函數(shù)。
在x軸上運動的完整代碼：

這個入門教程就到這里了，感謝閱讀。