译序
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。
国外网站 aerotwist.com 有六篇较为简单的入门教程，我尝试着将其翻译过来，与大家分享。
0.简介
嗨，又见面了。这么说我们已经开始学习Three.js了，如果你还没有看过之前三篇教程，建议你先读完。如果你已经读完前面的教程了，你可能会想做一些关于粒子的东西。让我们直面这个话题吧，每个人都爱粒子效果。不管你是否知道，你可以很轻易地创建它们。
1.创建一个粒子系统
Three.js将粒子系统视为一个基本的几何体，因为它就像基本几何体一样，即有形状，又有位置、缩放因子、旋转属性。粒子系统将geometry对象里的每一个点视为一个单独的粒子。为什么这样做？我想基于以下的原因：首先，整个粒子系统地绘制只需要调用一次某个绘制函数，而不是调用上千次；其次，这允许你设定一些全局的参数来影响你的粒子系统内的所有粒子。
即使是粒子系统被视为一个整体的对象，我们仍然可以为每个粒子单独地着色，因为在绘制粒子系统的过程中，Three.js通过attribute变量colour向着色器传递了每一个顶点的颜色。我在本篇教程里并不准备这样做，如果你想知道这是怎样完成的，你可以去GitHub上看Three.js的例程。
粒子系统可能还有一种特殊效果需要引起你的注意：Three.js在粒子系统第一次被渲染的时候，会将其数据缓存下来，之后你无法增加或减少系统中的粒子。如果你不希望看到某个粒子，你可以将它的颜色中的alpha值设置为0，但你无法删除它。所以你应当在创建粒子系统的时候，就将所有可能需要显示的粒子考虑进来。
开始创建一个粒子系统，只需要这么多：
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial =
new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20
});
// 依次创建单个粒子
for(var p = 0; p < particleCount; p++) {
// 粒子范围在-250到250之间
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vertex(
new THREE.Vector3(pX, pY, pZ)
);
// 将粒子加入粒子geometry
particles.vertices.push(particle);
}
// 创建粒子系统
var particleSystem =
new THREE.ParticleSystem(
particles,
pMaterial);
// 将粒子系统加入场景
scene.addChild(particleSystem);
如果你运行：
我们一个一个来修复。
2.风格
我们创建一个粒子基本材质时传入了颜色和尺寸。我们可能想做的是传入一张纹理图片用来显示粒子，而这样就可以很好地控制粒子看上去的样式了。
你也看到，粒子是以方块形状绘制的，所以我们也应当使用一张方形的纹理图片。为了看上去效果更好，我还会使用加法混合，但是这样做必须保证纹理图片的背景是黑色的而不是透明的。我理解的原因是：现在加法混合和透明材质之间不兼容。但是没关系，最后看上去会很棒。
我们来更新一下粒子基本材质和粒子系统，加入一些加法混合下透明的粒子。如果你喜欢，你也可以用我的粒子图片。
var pMaterial =
new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"images/particle.png"
),
blending: THREE.AdditiveBlending,
transparent: true
});
// 允许粒子系统对粒子排序，以达到我们想要的效果
particleSystem.sortParticles = true;
这看上去已经好多了。现在来引入一点物理，让粒子们动起来。
3.引入物理
默认情况下，粒子系统在三维空间中不运动，这很好。但我想让他们动起来，而且我要让粒子系统这样运动：让粒子绕着y轴旋转。而且粒子在每个轴的范围都在-250到250之间，所以绕着y轴旋转以为这它们绕着系统地中心旋转。
我还假定，你已经在某个地方有了帧循环的代码，和我在上一篇关于着色器中的教程中类似。所以这里我们只需这样：
function update() {
// 增加一点旋转量
particleSystem.rotation.y += 0.01;
// 绘制粒子系统
renderer.render(scene, camera);
// 设置下一次刷新帧时对update的调用
requestAnimFrame(update);
}
现在我们开始定义单个粒子的运动（译者注：之前的旋转是整个粒子系统的运动）。我们来做个简单的雨点效果，这包含一下几步：
听上去很多，其实代码写起来很少。首先，在创建粒子的过程中，我们为每个粒子增加一个水平速度：
particle.velocity = new THREE.Vector3(
0, // x
-Math.random(), // y: 随机数
0); // z
接下来，在帧缓冲中我们传递每个粒子，并且，当粒子离开屏幕底部需要重置时，重置其位置和速度。
回到目录
今天来说ＪＳ中如何实现类（class），事实上本应该昨天晚上写的，可我失言了，在些说一声“抱歉”！ＪＳ中的类是ＪＳ面向对象的基础，也是我最拿手的东西，你写的代码能否提高一个层次，一般是从这点上看出来的。
占占对类的定义：
类是对现实中的事物的抽象，一个类一般由属性和方法构成，属性是一些固定的信息，而方法是类的某种行为，类往往用来抽象一些复杂的对象，类与类这间可以进行继承，一般通过ＪＳ的function实现，ＪＳ中的类对象是实现ＪＳ面向对象的基础。
占占对结构体的定义：
一个结构体也是对现实事物的一种抽象，它用来表示逻辑简单的对象，一般通过ＪＳ的object对象实现
实现结构体的代码：
var Animal = {
Name: "动物",
Type: "",
Food: ["草", "肉"],
Print: function () {
console.log("名称：" + this.Name + ",类型：" + this.Type + ",食物：" + this.Food);
}
};
Animal.Print();//调用
实现复杂的类的代码：
var AnimalFun = function (name, type) {
this.Name = name;
this.Type = type;
this.Food = ["草", "肉"];
this.Print = function () {
console.log("名称：" + this.Name + ",类型：" + this.Type + ",食物：" + this.Food);
}
};
var animalFun = new AnimalFun();
animalFun.Print();
子类去继承父类，但复写父类的属性，调用父类的方法，代码如下：
var Dog = function (name, type, food) {
//调用父类构造方法,并传递name参数
AnimalFun.call(this, name, type);
//复写属性
this.Food = food;
}
//将Dog的原型链指向AnimalFun对象
Dog.prototype = new AnimalFun();
//重置constructor属性为Student类,由于设置了Student类的prototype为Person时
//擦除了constructor属性
Dog.prototype.constructor = Dog;
//实例化Dog类
var s = new Dog('狗', '低级动物', '肉');
//调用父类的方法
s.Print(); //结果:名称：狗,类型：低级动物,食物：肉
小知识：ＪＳ实现类的继承的机制是这样的：
在子类构造函数（constructor）中调用父类构造函数(父类.call()).
修改子类prototype(原型链)属性为父类的实例.(prototype一般用来实现对函数的扩展，Dog.prototype = new AnimalFun();表示对父类AnimalFun进行扩展)
重置子类的prototype的constructor属性为子类.
感谢您的阅读！
回到目录
本文链接
最近看一个网站，发现显示器不同的分辨率，样式文件调用的也不一样，今天写了一个例子研究一下，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" id="sc" type="text/css" href=/blog_article/"css/c1.css"/>_br/index.html>
<script type="text/javascript">
window.onload=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024)
//获取屏幕的的宽度
{
sc.setAttribute("href","css/c2.css"); //设置css引入样式表的路径
d.innerHTML = "你的电脑屏幕宽度大于1024，我的宽度是 1200px, 背景色现在是红色。";
}
else{
sc.setAttribute("href","css/c1.css");
d.innerHTML = "你的电脑屏幕宽度小于或是等于1024，我的宽度是 960px, 背景色现在是蓝色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>
c1.css里面的内容
*{ margin:0; padding:0;}
div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}
c2.css里面的内容
*{ margin:0; padding:0;}
div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}