共计 2174 个字符，预计需要花费 6 分钟才能阅读完成。
这是今天要分析的官网 demo，这是源码。
初始化相机，场景后，这次还初始化了两种光源。
// 初始化环境光照，表示环境的基础亮度，参数 1 为光源颜色，参数 2 为光源强度
// 环境光在没有物体的情况下没用
// 不透明物体的颜色是反射光的颜色，在初始化纹理处可设置 ambient 属性，表示物体反射环境光的能力
var ambientLight = new THREE.AmbientLight(0xcccccc, 0.5);
scene.add(ambientLight);
// 初始化点光源，参数为颜色，亮度，照射的最远距离
var pointLight = new THREE.PointLight(0xffffff, 0.8);
具体可以看入门指南中的光与影，另外除了光，你还需要了解光对不同材质的作用才能很好的得到你想要的效果，对于这一点，入门指南中材质章节有很好的解释。大致的意思如下：
BasicMaterial- 基础材质直接用 color 属性设置材质颜色，不会受光照影响，不会有高光阴影部分。
MeshLambertMaterial- 漫反射材料，颜色主要为光照在物体上漫反射到我们眼睛中的颜色，color 属性表示物体对散射光的反射能力，如果光源为白光 0xffffff，color 设置为 0x00ff00，即能反射绿光，那么物体就会呈现绿色，而如果光源为红光，那么物体就不会反射光，表现为黑色。emissive 表现物体自发光的能力，一般在反射光弱的地方（如背光部分）会比较明显。ambient 表示材料对环境光的反射能力，环境光一般是给场景一个基础的光亮，要与其他光源区别开来。
MeshPhongMaterial-phone 材质，有镜面反射的效果。其他属性与漫反射材质一样，有两个独有的属性，specular 和 shininess，specular 表示镜面反射部分对光的反射能力。shininess 控制高光的光斑的大小。
然后回到源码
// 将点光源作为相机的子对象，点光源的位置即相机的位置
camera.add(pointLight);
scene.add(camera);
文档中说
可以通过.add(object) 方法来将对象进行组合，该方法将对象添加为子对象
camera 继承自 object3D，用这个属性将点光源添加为子对象，然后点光源的位置就会随相机的位置改变，就像你拿着一个手电筒一样。
// 加载纹理
var map = new THREE.TextureLoader().load( ‘textures/UV_Grid_Sm.jpg’);
// wrapS 表示纹理在水平方向如何包裹，wrapT 表示在垂直方向, 使用 RepeatWrapping，纹理将简单地重复到无穷大 ??
map.wrapS = map.wrapT = THREE.RepeatWrapping;
// 沿着轴，通过具有最高纹素密度的像素的样本数 ??
map.anisotropy = 16;
// 初始化 Phong 网孔材料，具有镜面高光的光泽表面
var material = new THREE.MeshPhongMaterial({ map: map, side: THREE.DoubleSide} );
加载纹理这部分我不是很理解，感兴趣可以看下官网。
然后是构建几何体部分，推荐看入门指南中的基础几何形状和官网。其中比较有趣的是
// 构建二维对象数组
var points = [];
for (var i = 0; i < 50; i ++) {
points.push(new THREE.Vector2( Math.sin( i * 0.2) * Math.sin(i * 0.1) * 15 + 50, (i – 5) * 2 ) );
}
// 车床几何体，由二维对象数组形成的曲线绕 x 轴旋转一周获得
object = new THREE.Mesh(new THREE.LatheBufferGeometry( points, 20), material );
object.position.set(– 100, 0, – 200);
scene.add(object);
这个可以用来构造花瓶等曲面轴对称物体，其中的二维对象数组就像我们学的一元函数一样，在坐标系中可以表示出各种曲线，然后绕 x 轴旋转一周得到立体图形。这个的关键就是怎么得到你想要形状的数学表达式，这个就需要数学功底了，不知道有没有画一条线就能得到近似表达式的软件。
// 对该对象和子对象应用的回调函数
scene.traverse(function ( object) {
// 如果对象为网格对象
if (object.isMesh === true) {
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
}
} );
这个 traverse 方法也是继承自 object3D，这里用来给场景中的所有 mesh 物体加上循环调用的函数，使其不断旋转。
下面是最近搜集的好资料
three.js 学习群群主的博客，相当详细。https://blog.csdn.net/qq_3010…
three.js 正统的学习网站 http://learningthreejs.com/
挺详细的博文 https://www.cnblogs.com/cathe…
有人写的文档 https://teakki.com/p/58a3ef1b…
对光源的讲解 http://www.hangge.com/blog/ca…