一開始接觸Three.js是非常蒙的，結(jié)合網(wǎng)上的一些教程以及自身對(duì)3dmax的一點(diǎn)點(diǎn)了解，開始了Three.js的探索。
注：引用的是three.min.js
發(fā)光球體的輝光效果
//導(dǎo)入紋理vartexture=THREE.ImageUtils.loadTexture('mt4.png', {},function() {//引入圖片為mt4.png，該圖片是半透明的，類似輝光效果renderer.render(scene,camera);});varmaterial=newTHREE.MeshLambertMaterial({//設(shè)置texture紋理map:texture,material:0.5,//透明度 取值0-1；transparent:true,//設(shè)置是否為透明});
//設(shè)置球3，該球效果是輝光效果varsphere3=newTHREE.Mesh(newTHREE.SphereGeometry(5,110,140),//半徑是5,多邊形擬合數(shù),多邊形擬合數(shù)material);//引入上面聲明的材質(zhì)sphere3.position.set(0,0,10);//球心的坐標(biāo)位置varpivotPoint=newTHREE.Object3D();//3d效果sphere3.add(pivotPoint);//向球球3添加3d效果scene.add(sphere3);//添加到場(chǎng)景中
//設(shè)置球4varsphere4=newTHREE.Mesh(newTHREE.SphereGeometry(4,40,20),//半徑是4,多邊形擬合數(shù),多邊形擬合數(shù)newTHREE.MeshLambertMaterial({//改材質(zhì)是自發(fā)光球體，沒有陰影的白色球體emissive:0xffffff,? ? }));sphere4.overdraw=true;//這個(gè)沒啥用sphere4.position.set(0,0,10);//球心的坐標(biāo)位置，和上一個(gè)球的位置一樣，scene.add(sphere4);//添加到場(chǎng)景中
設(shè)置相機(jī)的位置：
camera.position.z=80;//設(shè)置相機(jī)位置，x=0 y=0 z=80camera.lookAt(scene.position);document.body.appendChild(renderer.domElement);
縮放、移動(dòng) 動(dòng)畫：
render();vari=1;//動(dòng)畫判斷參數(shù)functionrender() {//動(dòng)畫變大縮小if(i<100) {sphere3.scale.x+=0.001;//球球3的x,y,z寬度統(tǒng)統(tǒng)增加sphere3.scale.y+=0.001;sphere3.scale.z+=0.001;? ? ? ? }else if(i<200) {sphere3.scale.x-=0.001;//當(dāng)?shù)搅?00的時(shí)候，縮小，免得變得越來越大sphere3.scale.y-=0.001;sphere3.scale.z-=0.001;? ? }elsei=0;i++;
sphere3.position.x += 0.01;//球球3的x坐標(biāo)增加，可以實(shí)現(xiàn)平移效果
renderer.render(scene,camera);//渲染場(chǎng)景requestAnimationFrame(render);//回到render方法重新渲染，得以實(shí)現(xiàn)上面的動(dòng)畫效果}
接下來是完整代碼（如需運(yùn)行，需要three.min.js，和mt4.png?材質(zhì)紋理圖片）
（←可以直接下載這張圖）
html><htmllang="en"><head><metacharset="UTF-8"><title>燕小溜的教程title><scriptsrc="three.min.js">script><style>body{background:#000;
}a{color:#fff;
}style>head>head><ahref="http://blog.csdn.net/yangnianbing110/article/details/51306653">http://blog.csdn.net/yangnianbing110/article/details/51306653a><br><body><scripttype="text/javascript">varscene=newTHREE.Scene();//? ? scene.fog=new THREE.Fog(0xffffff,0.045,100);//啟用場(chǎng)景霧化varrenderer=newTHREE.WebGLRenderer();renderer.setClearColor(0x000000,1.0);//設(shè)置背景是黑的renderer.setSize(window.innerWidth,window.innerHeight);varcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);//眼鏡(相機(jī))的視野大小設(shè)置//點(diǎn)光源varlight=newTHREE.DirectionalLight();light.position.set(0,0,80);//點(diǎn)光源位置，注意：這里與相機(jī)的位置是一致的scene.add(light);//導(dǎo)入紋理vartexture=THREE.ImageUtils.loadTexture('mt4.png', {},function() {//引入圖片為mt4.png，該圖片是半透明的，類似輝光效果renderer.render(scene,camera);
});varmaterial=newTHREE.MeshLambertMaterial({//設(shè)置texture紋理map:texture,material:0.5,//透明度 取值0-1；transparent:true,//設(shè)置是否為透明});//設(shè)置球3，該球效果是輝光效果varsphere3=newTHREE.Mesh(newTHREE.SphereGeometry(5,110,140),//半徑是5,多邊形擬合數(shù),多邊形擬合數(shù)material);//引入上面聲明的材質(zhì)sphere3.position.set(0,0,10);//球心的坐標(biāo)位置varpivotPoint=newTHREE.Object3D();//3d效果sphere3.add(pivotPoint);//向球球3添加3d效果scene.add(sphere3);//設(shè)置球4varsphere4=newTHREE.Mesh(newTHREE.SphereGeometry(4,40,20),//半徑是4,多邊形擬合數(shù),多邊形擬合數(shù)newTHREE.MeshLambertMaterial({//改材質(zhì)是自發(fā)光球體，沒有陰影的白色球體emissive:0xffffff,
}));sphere4.overdraw=true;//這個(gè)沒啥用sphere4.position.set(0,0,10);//球心的坐標(biāo)位置，和上一個(gè)球的位置一樣，scene.add(sphere4);camera.position.z=80;//設(shè)置相機(jī)位置，x=0 y=0 z=80camera.lookAt(scene.position);document.body.appendChild(renderer.domElement);render();vari=1;//動(dòng)畫判斷參數(shù)functionrender() {//動(dòng)畫變大縮小if(i<100) {sphere3.scale.x+=0.001;sphere3.scale.y+=0.001;sphere3.scale.z+=0.001;sphere4.scale.x+=0.001;sphere4.scale.y+=0.001;sphere4.scale.z+=0.001;
}else if(i<200) {sphere3.scale.x-=0.001;sphere3.scale.y-=0.001;sphere3.scale.z-=0.001;sphere4.scale.x-=0.001;sphere4.scale.y-=0.001;sphere4.scale.z-=0.001;
}elsei=0;i++;renderer.render(scene,camera);//渲染場(chǎng)景requestAnimationFrame(render);//回到render方法重新渲染，得以實(shí)現(xiàn)上面的動(dòng)畫效果}script><canvaswidth="1242"height="609"style="width:1242px;height:609px;">canvas>body>html>
