Three.JS 发光球体,材质纹理,缩放移动动画,教程

一开始接触Three.js是非常蒙的，结合网上的一些教程以及自身对3dmax的一点点了解，开始了Three.js的探索。

注：引用的是three.min.js

发光球体的辉光效果

//导入纹理vartexture=THREE.ImageUtils.loadTexture('mt4.png', {},function() {//引入图片为mt4.png，该图片是半透明的，类似辉光效果renderer.render(scene,camera);});varmaterial=newTHREE.MeshLambertMaterial({//设置texture纹理map:texture,material:0.5,//透明度取值0-1；transparent:true,//设置是否为透明});

//设置球3，该球效果是辉光效果varsphere3=newTHREE.Mesh(newTHREE.SphereGeometry(5,110,140),//半径是5,多边形拟合数,多边形拟合数material);//引入上面声明的材质sphere3.position.set(0,0,10);//球心的坐标位置varpivotPoint=newTHREE.Object3D();//3d效果sphere3.add(pivotPoint);//向球球3添加3d效果scene.add(sphere3);//添加到场景中

//设置球4varsphere4=newTHREE.Mesh(newTHREE.SphereGeometry(4,40,20),//半径是4,多边形拟合数,多边形拟合数newTHREE.MeshLambertMaterial({//改材质是自发光球体，没有阴影的白色球体emissive:0xffffff, }));sphere4.overdraw=true;//这个没啥用sphere4.position.set(0,0,10);//球心的坐标位置，和上一个球的位置一样，scene.add(sphere4);//添加到场景中

设置相机的位置：

camera.position.z=80;//设置相机位置，x=0 y=0 z=80camera.lookAt(scene.position);document.body.appendChild(renderer.domElement);

缩放、移动动画：

render();vari=1;//动画判断参数functionrender() {//动画变大缩小if(i<100) {sphere3.scale.x+=0.001;//球球3的x,y,z宽度统统增加sphere3.scale.y+=0.001;sphere3.scale.z+=0.001; }else if(i<200) {sphere3.scale.x-=0.001;//当到了200的时候，缩小，免得变得越来越大sphere3.scale.y-=0.001;sphere3.scale.z-=0.001; }elsei=0;i++;

sphere3.position.x += 0.01;//球球3的x坐标增加，可以实现平移效果

renderer.render(scene,camera);//渲染场景requestAnimationFrame(render);//回到render方法重新渲染，得以实现上面的动画效果}

接下来是完整代码（如需运行，需要three.min.js，和mt4.png 材质纹理图片）

（←可以直接下载这张图）

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);//设置背景是黑的renderer.setSize(window.innerWidth,window.innerHeight);varcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);//眼镜(相机)的视野大小设置//点光源varlight=newTHREE.DirectionalLight();light.position.set(0,0,80);//点光源位置，注意：这里与相机的位置是一致的scene.add(light);//导入纹理vartexture=THREE.ImageUtils.loadTexture('mt4.png', {},function() {//引入图片为mt4.png，该图片是半透明的，类似辉光效果renderer.render(scene,camera);

});varmaterial=newTHREE.MeshLambertMaterial({//设置texture纹理map:texture,material:0.5,//透明度取值0-1；transparent:true,//设置是否为透明});//设置球3，该球效果是辉光效果varsphere3=newTHREE.Mesh(newTHREE.SphereGeometry(5,110,140),//半径是5,多边形拟合数,多边形拟合数material);//引入上面声明的材质sphere3.position.set(0,0,10);//球心的坐标位置varpivotPoint=newTHREE.Object3D();//3d效果sphere3.add(pivotPoint);//向球球3添加3d效果scene.add(sphere3);//设置球4varsphere4=newTHREE.Mesh(newTHREE.SphereGeometry(4,40,20),//半径是4,多边形拟合数,多边形拟合数newTHREE.MeshLambertMaterial({//改材质是自发光球体，没有阴影的白色球体emissive:0xffffff,

}));sphere4.overdraw=true;//这个没啥用sphere4.position.set(0,0,10);//球心的坐标位置，和上一个球的位置一样，scene.add(sphere4);camera.position.z=80;//设置相机位置，x=0 y=0 z=80camera.lookAt(scene.position);document.body.appendChild(renderer.domElement);render();vari=1;//动画判断参数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方法重新渲染，得以实现上面的动画效果}script><canvaswidth="1242"height="609"style="width:1242px;height:609px;">canvas>body>html>