上一节我们介绍了
- 什么是three.js
- three.js的object介绍
- three.js的scene属性
- three.js的常用属性
链接：点击去到上一节
本节我们将深入介绍THREE的相机（camera）和光源（light）
相机这里。作者用自己的话为没有接触过3d设计的同学们解释一下两种相机的区别。
正投影相机：它的视图无法看到一个物体是远离自己还是正在我们面前，比如一款打飞机的游戏，它只需要渲染3d的飞机，而不需渲染飞机的远近关系，这个时候，你就要用到OrthographicCamera（正投影相机）
透视相机：跟人眼看到东西比较像，有明显透视关系。
1.perspectiveCamera （透视相机）
接受参数如下：
| 参数名 | 作用 |
|---|---|
| fov（视场） | fov表示视场（field of view）这是一个相机位置能够看到的部分场景。 |
| aspect（长宽比） | 这是渲染结果输出区域的横向长度和纵向长度的壁纸。我们一般使用整个窗口作为输出界面，所以会使用这个窗口的长宽比 |
| near（近面） | near属性定义的是一个Three.js库从距离相机多近的地方开始渲染场景，通常我们会为这个属性设置一个很小的值，从而可以渲染从相机位置可以看到的所有物体 |
| far（远面） | far属性定义的是一个相机可以从它所处位置看多远。如果我们将这个值设置的太低，那么场景中的一部分可能不会被渲染，如果设置太高，某些情况之下会影响渲染的效率。 默认值：1000 |
OrthographicCamera（正投影相机）
| 参数名 | 作用 |
|---|---|
| left（左边界） | 在Three.js 文档里该属性是一个可视范围的左平面，你可以将它当做是可渲染左侧边界 |
| right（右边界） | 跟left属性一样，属于另一侧的边界 |
| top （上边界） | 可被渲染空间的最上面 |
| bottom （下边界） | 可被渲染空间的最下面 |
| near (近面) | 基于这一点开始渲染 |
| far (远面) | 这一点截止渲染 |
| 名称 | 介绍 |
|---|---|
| AmbientLight（环境光） | 这是一个基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上 |
| PointLight（点光源） | 空间中的一点，朝所有的方向发射光线 |
| SpotLight （聚光灯光源） | 这种光源有聚光效果，类似台灯手电筒 |
| DirectionLight （方向光） | 平行光，比如太阳 |
| HemisphereLight（半球光） | 这是一种特殊光源，可以创建更自然的室外光线 |
| LensFlare（镜头眩光） | 添加镜头光源眩光效果 |
| AreaLight（面光源） | 使用这一种光源可以指定散发光线的平面，而不是空间中的一点 |
光源颜色可以使用THREE.color 对象
使用THREE.Color对象
| 名称 | 作用 |
|---|---|
| set（value） | 将当前颜色改成指定的十六进制值。这个值可以是字符串，也可以是数字 |
| setHex（value） | 将当前颜色改成指定的十六进制数字值 |
| setRGB（r,g,b） | 根据提供的RGB设置颜色，参数范围从0到1 |
| setHSV（h,s,v） | 根据提供的HSV值设置颜色，参数范围从0到1 |
| setStyle（style） | 根据css值设置颜色 |
| copy（color） | 从提供颜色对象复制颜色到当前对象 |
| copyGamaToLinear（color） | 通常在内部使用 根据提供的颜色设置物体的颜色。颜色参数先从gama色彩空间转移到Linear（线性）色彩空间 |
| copyLinearToGame | 同上转化 |
| getHex（value） | 以十六进制形式颜色中获取颜色值 |
| getHexString（str） | 以十六进制字符串中获取颜色值 |
| getStyle（style） | 以css值的形式获取颜色值 |
| getHSV（hsv） | 以HSV形式从颜色对象中获取颜色值 |
下一节，我们将具体介绍光源属性和三维几何体。同样，感谢支持 ！
热门评论
-
魴盪卟羁2017-11-22 0
查看全部评论有没有好的学习教程啊