資源描述：
《three.js的自學(xué)基礎(chǔ)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、推薦網(wǎng)站：WebGL中文網(wǎng)http://www.hewebgl.com/里面有教程，初級(jí)教程免費(fèi)，其余要收費(fèi)three.js官方網(wǎng)站：www.threejs.org/three.js-master包里面有很多很有趣的例子，在three.js-masterexamples下，你可以一個(gè)一個(gè)點(diǎn)開(kāi)看有沒(méi)有需要的WebGL中文網(wǎng)和Three.js入門(mén)指南一起看就可以了，入門(mén)指南有一些例子不能出來(lái)，但是講得也不錯(cuò)，代碼里面的結(jié)構(gòu)根據(jù)webGL中文網(wǎng)例子來(lái)編寫(xiě)的一、基本需要初始化：1.渲染器（renderer）——渲染物體的，在web瀏覽器中必須
2、有一個(gè)平臺(tái)顯示3d效果2.照相機(jī)（camera）——視角，展現(xiàn)在我們面前的3.場(chǎng)景（scene）4.燈光（light）5.物體（object）渲染部分：1.renderer.render(scene,camera);2.requestAnimationFrame(animate);81.初始化渲染器：three.js的渲染器主要有WebGLRenderer和CanvasRenderer，渲染的效果不同有細(xì)微差異，我們使用的是WebGLRenderer，當(dāng)你使用渲染器時(shí)，一般在html頁(yè)面上加入
標(biāo)簽——>這里的div標(biāo)簽是
3、vid="canvasframe">
代碼：renderer=newTHREE.WebGLRenderer({antialias:true});//開(kāi)啟WebGL抗鋸齒width=document.getElementById('canvasframe').clientWidth;height=document.getElementById('canvasframe').clientHeight;renderer.setSize(width,height);document.getElementById('canvasfram
4、e').appendChild(renderer.domElement);你也可以不需要div標(biāo)簽創(chuàng)建渲染器代碼：varrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);2.照相機(jī)——這塊在WebGL中文網(wǎng)講解得比較詳細(xì)three.js提供兩類(lèi)照相機(jī)，一類(lèi)是OrthographicCamera（正交相機(jī)），一類(lèi)是Per
5、spectiveCamera（透視相機(jī)）正交就是高中老師畫(huà)正方形那種，沒(méi)有近大遠(yuǎn)小，透視相機(jī)有。我們使用的是透視相機(jī)代碼：camera=newTHREE.PerspectiveCamera(60,width/height,1,10000);camera.position.set(lengthX,lengthY,100);camera.up=newTHREE.Vector3(0,0,1);THREE.PerspectiveCamera(fov,aspect,near,far)fov：視角度數(shù)，可以理解為眼睛睜開(kāi)大小，度數(shù)越大，你看到的物體
6、越多，物體越小aspect：是照相機(jī)水平方向和豎直方向長(zhǎng)度的比值，一般等于width/heightnear和far：是相機(jī)最近和最遠(yuǎn)的距離，均為正值，far>>nearcamera.position.set(x,y,z);照相機(jī)的位置camera.up=newTHREE.Vector3(0,0,1);cmmera.up哪個(gè)軸是向上的，three.js默認(rèn)是右手坐標(biāo)軸，即y軸向上，這里我們讓z軸向上camera.position=newTHREE.Vector3(0,0,1)和camera.up.set(0,0,1)一樣的效果。3.場(chǎng)景一
7、般只需要scene=newTHREE.Scen();新建場(chǎng)景就可以了源代碼中加入了scene.fog=newTHREE.FogExp2(0xcccccc,0.002);使場(chǎng)景產(chǎn)生霧效果FogExp2(hex,density)hex,霧的顏色如果設(shè)置為黑色，遠(yuǎn)處的物體將呈現(xiàn)黑色density：定義霧增長(zhǎng)速度如何密集。默認(rèn)為0.00025。84.燈光有幾種燈光，常用的有AmbintLight（環(huán)境光），directionalLight（平行光），PointLigth（點(diǎn)光源），spotLight（聚光燈），其他的你可以在官方文檔里查找使用，
8、初始化都比較簡(jiǎn)單，以程序里的平行光為例light=newTHREE.DirectionalLight(0xffffff);light.position.set(1,1,1);scene.add(light)
