threejs绕轴转，粒子系统，控制器操作等（二）

前言：threejs系列的第二篇文章，也是一边学习一边总结；

1，一个物体绕着另一个物体转动

上一篇文中主要是物体自转，为了描述一个一个物体绕另一个物体转，这里我描述了一个月球绕地球公转，并且自转的场景；

首先依照前面的教程，创建两个球体，一大一小，并添加纹理图片，作为地球和月球，然后创建一个细圆环作为星球运行的轨迹，（注意调整圆环的位置，使得月球的运行轨迹刚好在圆环上）这里就不做分析；

最重要的部分是要添加一个转轴到场景中

// 添加一个转轴
pivotPoint = new THREE.Object3D();
pivotPoint.rotation.x = 0.4;
scene.add(pivotPoint);

注意一点就是因为小球要绕着轴转动，所以小球要添加到轴中，（spheresml表示小球）即：

pivotPoint.add(spheresml);

　然后，我们在render函数中，设置轴转动，带动小球的转动

//在control中设置初始值
this.rotationSpeedY = 0.01;

//在render函数中
pivotPoint.rotation.y += control.rotationSpeedY;
requestAnimationFrame(render);

　　然后通过requestAnimationFrame函数完成动画

2，粒子系统

我们背景是一个星空，可以创建一个许多的点粒子来完成，粒子的颜色是随机变化的

var starsGeometry = new THREE.Geometry(); // an empty geometry
        for (var i = 0; i < 2000; i++) {
            // create a new vertex with random coordinates between -1 and 1
            var vertex = new THREE.Vector3();
            vertex.x = Math.random() * 2 - 1;
            vertex.y = Math.random() * 2 - 1;
            vertex.z = Math.random() * 2 - 1;
            //vertex.multiplyScalar(67);

            starsGeometry.vertices.push(vertex);
        }
        var starsMaterial = new THREE.ParticleBasicMaterial({
            color: Math.random() * 0xffffff,
            size: 2,
            sizeAttenuation: false
        });
        var stars = new THREE.ParticleSystem(starsGeometry, starsMaterial);
        stars.scale.set(300, 300, 300);
        stars.name = 'stars';
        scene.add(stars);

 同时为星星添加一个旋转动画

scene.getObjectByName('stars').rotation.y += control.starRoitationSpeedZ;

　3，　TrackballControls控制器操作

首先，我们需要用 script标签引入 TrackballControls.js文件

然后添加如下的代码创建一个控制器实例

camControl = new THREE.TrackballControls(camera);

　然后在render函数中进行更新

camControl.update();

　这时候，你用鼠标拖动，或者滚动鼠标滑轮的时候，就会看到效果了

 

最后的效果图，如图所示：完整代码下载：github(threejs-three)  如果，你觉得我写的对你有所帮助的话，请给我个star吧，谢谢

　　

---

文章最后，对光源的种类进行一个小总结：

　光源大致分为8种：

基础光源：（1）AmbientLight: 环境光 ；它的颜色会添加到整个场景和所有对象的当前颜色上

　　　　　（2）PointLight: 点光源；空间中的一点，朝所有的方向发射光线

                （3）SpotLight: 聚光灯光源；聚光灯是由点光源发出，这种类型的光也可以产生投影，有聚光的效果

                （4）DirectionalLight:方向光，平行光；例如：太阳光

特殊光源：

　　　　　（1）HemisphereLight：半球光光源 ；可以为室内场景创建更加自然的光照效果，模拟反光面和光线微弱的天气

　　　　    （2）AreaLight:面光源； 使用这种光源可以指定散发光线的平面，而不是空间的一个点

　　　　　 （3）RectAreaLight：矩形区域光源；这种光从一个矩形面均匀地发射，可以用来模拟明亮的窗户或者带状的照明；可以产生投影

                 （4）LensFlare：镜头炫光；这不是一种光源，但是通过该炫光可以为场景中的光源添加炫目的效果

　　AmbientLight( color, intensity )；  

　　DirectionalLight( color, intensity )；

1. color：设置光的颜色；

2. intensity：设置光的强度。

　　PointLight( color, intensity, distance, decay ) 

1. color：设置光的颜色；

2. intensity：设置光的强度，默认值为1；

3. distance：设置光距离物体的距离；

4. decay：设置光的衰减量；

属性：

1. .decay：默认值为1；

2. .distance：默认为0.0，这个属性描述了光线强度减弱到0时距离光源的位置；

3. .isPointLight：默认值为true，用来检查光线是否为点光；

4. .power：用来描述光的能量，默认为4pi；

5. .shadow：用来计算光所产生的阴影

　　RectAreaLight( color, intensity, distance, angle, penumbra, decay )

1. color：设置光的颜色；

2. intensity：设置光的强度，默认值为1；

3. distance：设置光距离物体的距离；

4. angle：设置光的照射角度；

5. penumbra：这个参数不是很清楚。。。；

6. decay：设置光的衰减量；

属性：

1. .castShadow：如果设置为true，将会产生动态的投影，默认值为false；

2. .decay：描述光的衰减，默认值为1；

3. .distance：默认为0.0，这个属性描述了光线强度减弱到0时距离光源的位置；

4. .isRectAreaLight：默认为true，用来检查光是否是矩形区域光；

5. .position：相当于设置 Object3D.DefaultUp 坐标坐标为( 0, 1, 0 )，相当于光线是从正上方平行照射下来；

6. .shadow：用来计算光所产生的阴影；

7. .target：平行光的方向是从光的位置指向目标物体的位置，默认目标物体的位置是( 0, 0, 0 )。

　　SpotLight( color, intensity, distance, angle, penumbra, decay )；

1. color：设置光的颜色；

2. intensity：设置光的强度；

3. distance：设置光源到物体的距离；

4. angle：聚光灯能够照射的最大范围；

5. penumbra：由于边缘造成的聚光锥衰减的百分比；

6. decay：光的衰减速度；

属性：

1. .angle：默认值为Math.PI/3，不超过Math.PI/2；

2. .castShadow：默认值为true，值为true时会动态投影；

3. .decay：设置光的衰减程度，值在0和1之间；

4. .distance：设置光衰减为0时距离光源的距离；

5. .isSpotLight：用来检查光源是否是聚光灯；

6. .penumbra：由于光边缘造成的聚光锥衰减的百分比，值可以在0和1之间，默认值为0；

7. .position：相当于设置 Object3D.DefaultUp 坐标坐标为( 0, 1, 0 )，相当于光线是从正上方平行照射下来；

8. .power：光强度大小，默认值为4PI；

9. .shadow:SpotLightShadow用来计算光产生的阴影；

10. .target：平行光的方向是从光的位置指向目标物体的位置，默认目标物体的位置是( 0, 0, 0 )。