前言: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 )。

threejs绕轴转,粒子系统,控制器操作等(二)的更多相关文章

  1. 双轴按键摇杆控制器控制TFTLCD(使用ADC1双通道DMA传输)

    实验使用如下所示的双轴按键摇杆控制器,来控制TFTLCD上显示的直线.首先介绍一下双轴按键摇杆控制器.原理:十字摇杆为一个双向的10K电阻器,随着摇杆方向不同,抽头的阻值随着变化.本模块使用5V供电( ...

  2. ASP.NET Core 中文文档 第四章 MVC(4.2)控制器操作的路由

    原文:Routing to Controller Actions 作者:Ryan Nowak.Rick Anderson 翻译:娄宇(Lyrics) 校对:何镇汐.姚阿勇(Dr.Yao) ASP.NE ...

  3. 空间点绕轴旋转公式&程序(C++)

    关键词:空间旋转.旋转轴 用途:相机位姿估计.无人机位姿估计.3D游戏.3D建模 文章类型:概念.公式总结(本文不带推倒过程,若想了解公式是如何推出来的请搜索文献),C++函数展示 @Author:V ...

  4. thinkphp使用模块/控制器/操作访问时出现No input file specified.解决方式

    thinkphp使用 http://serverName/index.php/模块/控制器/操作 访问时,出现了 No input file specified. 的错误 解决办法: 一: 开启cgi ...

  5. ThinkPHP3开发模式,控制器操作,配置文件,框架语法

    ThinkPHP的开发模式 tp框架有两种使用模式:开发模式(调试模式),一种是生产模式(运行模式) define('APP_DEBUG', true);  //调试模式 define('APP_DE ...

  6. ASP.NET Web API 控制器创建过程(二)

    ASP.NET Web API 控制器创建过程(二) 前言 本来这篇随笔应该是在上周就该写出来发布的,由于身体跟不上节奏感冒发烧有心无力,这种天气感冒发烧生不如死,也真正的体会到了什么叫病来如山倒,病 ...

  7. 【翻译】MongoDB指南/CRUD操作(二)

    [原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(二) 主要内容: 更新文档,删除文档,批量写操作,SQL与MongoDB映射图,读隔离(读关 ...

  8. c# xml操作(二)

    c# xml操作(二) 此博文包含图片 (-- ::)转载▼ 标签: 杂谈 分类: c# 上次,我们介绍了增加和删除xml的一些操作,这次我们将介绍如何更改和读取xml特定节点.我们依然以上次的xml ...

  9. ansible笔记(5):常用模块之文件操作(二)

    ansible笔记():常用模块之文件操作(二) 文件操作类模块 find模块 find模块可以帮助我们在远程主机中查找符合条件的文件,就像find命令一样. 此处我们介绍一些find模块的常用参数, ...

随机推荐

  1. JVM深入:JVM内存堆布局图解分析(转)

    转载自:https://www.cnblogs.com/SaraMoring/p/5713732.html 原文:http://www.codeceo.com/article/jvm-memory-s ...

  2. MyBatis基本使用

    MyBatis是轻量级的数据库访问API,封装了JDBC操作,可以实现对实体对象的CRUD操作. MyBatis体系结构主要组成部分:    配置文件:SqlMapConfig.xml 主配置文件   ...

  3. python 数组中数字求和是否为零

    需求是: 给定一个不少于4个元素的list(4个元素不重复): 请确认是否存在这样的4个元素,使得四数之和为0?如果有打印出符合条件的四个元素,如果没有打印False #!/usr/bin/pytho ...

  4. 输入参数的默认值设定${3:-var_d}

    今天看到一个不一样的写法: if [ $# != 2 ] && [ $# != 3 ] ; then #判断参数个数    echo "Invalid Args"  ...

  5. 使用TCP通信文件上传

    客服端读取本地文件,吧文件上传到服务器,服务器在吧上传的文件保存到服务器硬盘上方法分析1:客户端使用本地字节输入流读取要上传的文件 2:客户端使用网络字节输出流,吧读取到的文件上传到服务器 3:服务器 ...

  6. jsp四大作用域

  7. 00JAVA语法基础_动手动脑

    1.仔细阅读示例: EnumTest.java,运行它,分析运行结果? 枚举类型的使用是借助ENUM这样一个类,这个类是JAVA枚举类型的公共基本类.枚举目的就是要让某个变量的取值只能为若干固定值中的 ...

  8. Elasticsearch.安装(单节点)

    Elasticsearch.安装(单节点) 环境Linux 7.x jdk 1.8 elasticsearch 5.x 环境目录结构(根目录多了两个文件夹): /resources    /** 存放 ...

  9. 灵雀云CTO陈恺:从“鸿沟理论”看云原生,哪些技术能够跨越鸿沟?

    灵雀云CTO陈恺:从“鸿沟理论”看云原生,哪些技术能够跨越鸿沟? 历史进入2019年,放眼望去,今天的整个技术大环境和生态都发生了很大的变化.在己亥猪年春节刚刚过去的早春时节,我们来梳理和展望一下整个 ...

  10. css基础教程

    css规则有两个主要部分构成:选择器,以及一条或多条声明. 值的不同写法和单位: 可以使用十六进制设置颜色值:#ff0000; 为节约字节,使用css缩写形式:#f00: 类选择器:以一个点号显示. ...