Three.JS 發(fā)光球體,材質(zhì)紋理,縮放移動動畫,教程

一開始接觸Three.js是非常蒙的沉唠，結(jié)合網(wǎng)上的一些教程以及自身對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);//添加到場景中

//設(shè)置球4varsphere4=newTHREE.Mesh(newTHREE.SphereGeometry(4,40,20),//半徑是4,多邊形擬合數(shù),多邊形擬合數(shù)newTHREE.MeshLambertMaterial({//改材質(zhì)是自發(fā)光球體，沒有陰影的白色球體emissive:0xffffff,? ? }));sphere4.overdraw=true;//這個沒啥用sphere4.position.set(0,0,10);//球心的坐標(biāo)位置，和上一個球的位置一樣，scene.add(sphere4);//添加到場景中

設(shè)置相機(jī)的位置：

camera.position.z=80;//設(shè)置相機(jī)位置镊绪，x=0 y=0 z=80camera.lookAt(scene.position);document.body.appendChild(renderer.domElement);

縮放、移動動畫：

render();vari=1;//動畫判斷參數(shù)functionrender() {//動畫變大縮小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的時候，縮小，免得變得越來越大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);//渲染場景requestAnimationFrame(render);//回到render方法重新渲染，得以實(shí)現(xiàn)上面的動畫效果}

接下來是完整代碼（如需運(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);//啟用場景霧化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;//這個沒啥用sphere4.position.set(0,0,10);//球心的坐標(biāo)位置鬼店，和上一個球的位置一樣，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;//動畫判斷參數(shù)functionrender() {//動畫變大縮小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);//渲染場景requestAnimationFrame(render);//回到render方法重新渲染，得以實(shí)現(xiàn)上面的動畫效果}script><canvaswidth="1242"height="609"style="width:1242px;height:609px;">canvas>body>html>