Three.JS 发光球体,材质纹理,缩放移动动画,教程
一开始接触Three.js是非常蒙的，结合网上的一些教程以及自身对3dmax的一点点了解，开始了Three.js的探索。
注：引用的是three.min.js
发光球体的辉光效果
//导入纹理 var texture = THREE.ImageUtils.loadTexture('mt4.png', {}, function () {//引入图片为mt4.png，该图片是半透明的，类似辉光效果 renderer.render(scene, camera); }); var material = new THREE.MeshLambertMaterial({//设置texture纹理 map: texture, material: 0.5,//透明度 取值0-1； transparent: true,//设置是否为透明 });
//设置球3，该球效果是辉光效果 var sphere3 = new THREE.Mesh(new THREE.SphereGeometry(5, 110, 140),//半径是5,多边形拟合数,多边形拟合数 material);//引入上面声明的材质 sphere3.position.set(0, 0, 10);//球心的坐标位置 var pivotPoint = new THREE.Object3D();//3d效果 sphere3.add(pivotPoint);//向球球3 添加3d效果 scene.add(sphere3);//添加到场景中
//设置球4 var sphere4 = new THREE.Mesh(new THREE.SphereGeometry(4, 40, 20),//半径是4,多边形拟合数,多边形拟合数 new THREE.MeshLambertMaterial({//改材质是自发光球体，没有阴影的白色球体 emissive: 0xffffff, })); sphere4.overdraw = true;//这个没啥用 sphere4.position.set(0, 0, 10);//球心的坐标位置，和上一个球的位置一样， scene.add(sphere4);//添加到场景中
设置相机的位置：
camera.position.z = 80;//设置相机位置，x=0 y=0 z=80
camera.lookAt(scene.position);
document.body.appendChild(renderer.domElement);
缩放、移动 动画：
render(); var i = 1;//动画判断参数 function render() { //动画变大缩小 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; } else i = 0; i++;
sphere3.position.x += 0.01;//球球3的x坐标增加，可以实现平移效果
renderer.render(scene, camera);//渲染场景 requestAnimationFrame(render);//回到render方法重新渲染，得以实现上面的动画效果 }
接下来是完整代码（如需运行，需要three.min.js，和mt4.png 材质纹理图片）
（←可以直接下载这张图）
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>燕小溜的教程title>
<script src="three.min.js">script>
<style>
body {
background: #000;
}
a {
color: #fff;
}
style>
head>
head>
<a href="http://blog.csdn.net/yangnianbing110/article/details/51306653">http://blog.csdn.net/yangnianbing110/article/details/51306653a><br>
<body>
<script type="text/javascript">
var scene = new THREE.Scene();
// scene.fog=new THREE.Fog(0xffffff,0.045,100);//启用场景雾化
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);//设置背景是黑的
renderer.setSize(window.innerWidth, window.innerHeight);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);//眼镜(相机)的视野大小设置
//点光源
var light = new THREE.DirectionalLight();
light.position.set(0, 0, 80);//点光源位置，注意：这里与相机的位置是一致的
scene.add(light);
//导入纹理
var texture = THREE.ImageUtils.loadTexture('mt4.png', {}, function () {//引入图片为mt4.png，该图片是半透明的，类似辉光效果
renderer.render(scene, camera);
});
var material = new THREE.MeshLambertMaterial({//设置texture纹理
map: texture,
material: 0.5,//透明度 取值0-1；
transparent: true,//设置是否为透明
});
//设置球3，该球效果是辉光效果
var sphere3 = new THREE.Mesh(new THREE.SphereGeometry(5, 110, 140),//半径是5,多边形拟合数,多边形拟合数
material);//引入上面声明的材质
sphere3.position.set(0, 0, 10);//球心的坐标位置
var pivotPoint = new THREE.Object3D();//3d效果
sphere3.add(pivotPoint);//向球球3 添加3d效果
scene.add(sphere3);
//设置球4
var sphere4 = new THREE.Mesh(new THREE.SphereGeometry(4, 40, 20),//半径是4,多边形拟合数,多边形拟合数
new THREE.MeshLambertMaterial({//改材质是自发光球体，没有阴影的白色球体
emissive: 0xffffff,
}));
sphere4.overdraw = true;//这个没啥用
sphere4.position.set(0, 0, 10);//球心的坐标位置，和上一个球的位置一样，
scene.add(sphere4);
camera.position.z = 80;//设置相机位置，x=0 y=0 z=80
camera.lookAt(scene.position);
document.body.appendChild(renderer.domElement);
render();
var i = 1;//动画判断参数
function render() {
//动画变大缩小
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;
} else i = 0;
i++;
renderer.render(scene, camera);//渲染场景
requestAnimationFrame(render);//回到render方法重新渲染，得以实现上面的动画效果
}
script>
<canvas width="1242" height="609" style="width: 1242px; height: 609px;">canvas>
body>
html>