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...