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

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

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

var renderer = new THREE.WebGLRenderer();

給這個(gè)渲染器合適的大小。

renderer.setSize( width, height );

然后將其加入到dom中。

canvasdiv.appendChild( renderer.domElement );

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

renderer.render(scene,camera);

這樣，就建立了一個(gè)簡單的3d場(chǎng)景。

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

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

定義材料：

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

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

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

我們將其添加到場(chǎng)景中顯示。

scene.add( cube );

這樣，一個(gè)三維的長方體就繪制完成了
關(guān)于其他形狀的繪制，張?chǎng)├虻膖hreejs入門指南中介紹的很詳細(xì)，在此不多贅述。
這部分的完整代碼如下：

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

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

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

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

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

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);

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

var myobj = new THREE.Object3D();

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

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

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

scene.add( myobj );

完整代碼如下：

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

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

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

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對(duì)象！

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)入進(jìn)去了，但是看起來還是很奇怪，這就要我們加一些其他光線渲染一下。在這里我們添加平行光線。

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

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

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

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

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

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

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

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

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

var run = function () {

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

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

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