Three.js官网demo分析（二）---多种立体与光线

这是今天要分析的官网demo，这是源码。

初始化相机，场景后，这次还初始化了两种光源。

        // 初始化环境光照，表示环境的基础亮度，参数1为光源颜色，参数2为光源强度
        // 环境光在没有物体的情况下没用
        // 不透明物体的颜色是反射光的颜色，在初始化纹理处可设置ambient属性，表示物体反射环境光的能力
        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
        scene.add( ambientLight );

        // 初始化点光源，参数为颜色，亮度，照射的最远距离
        var pointLight = new THREE.PointLight( 0xffffff, 0.8 );

具体可以看入门指南中的光与影，另外除了光，你还需要了解光对不同材质的作用才能很好的得到你想要的效果，对于这一点，入门指南中材质章节有很好的解释。大致的意思如下：

1. BasicMaterial-基础材质直接用color属性设置材质颜色，不会受光照影响，不会有高光阴影部分。
2. MeshLambertMaterial-漫反射材料，颜色主要为光照在物体上漫反射到我们眼睛中的颜色，color属性表示物体对散射光的反射能力，如果光源为白光0xffffff，color设置为0x00ff00，即能反射绿光，那么物体就会呈现绿色，而如果光源为红光，那么物体就不会反射光，表现为黑色。emissive表现物体自发光的能力，一般在反射光弱的地方（如背光部分）会比较明显。ambient表示材料对环境光的反射能力，环境光一般是给场景一个基础的光亮，要与其他光源区别开来。
3. 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物体加上循环调用的函数，使其不断旋转。

下面是最近搜集的好资料

1. three.js学习群群主的博客，相当详细。https://blog.csdn.net/qq_3010...
2. three.js正统的学习网站 http://learningthreejs.com/
3. 挺详细的博文 https://www.cnblogs.com/cathe...
4. 有人写的文档 https://teakki.com/p/58a3ef1b...
5. 对光源的讲解 http://www.hangge.com/blog/ca...