继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

three.js 开发指南 part(2)方法罗列篇,你必须会的three术语

菜鸟教程
关注TA
已关注
手记 4
粉丝 63
获赞 142
three.js 开发指南 part(2)方法罗列篇

上一节我们介绍了

  • 什么是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 (远面) 这一点截止渲染
光源(Light)
名称 介绍
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形式从颜色对象中获取颜色值

下一节,我们将具体介绍光源属性和三维几何体。同样,感谢支持 !

打开App,阅读手记
11人推荐
发表评论
随时随地看视频慕课网APP

热门评论

有没有好的学习教程啊

查看全部评论