three.js快速指南

最近开始学习three.js来做一些3D效果,对于学习过程中的一些知识点做必要的记录,方便后续查阅参考。

three.js :JavaScript 3D库,更简单、更轻量级。这个库提供了<canvas>、<svg> 、CSS3D和WebGL渲染器。

构建场景的基本组件

相机、光源、物体

场景相关函数/属性

add(object)
children
getChildByName(name)
remove(object)
traverse(function)
fog
overrideMaterial

使用几何体和网格

TODO

选择合适的相机

TODO

光源

AmbientLight:环境光,它的颜色会添加到整个场景和所有对象的当前颜色上
PointLight:点光源:空间中的一点,朝所有的方向发射光线
SpotLight:聚光灯光源,类似台灯、手电筒
DirectionLight:方向光,也称作无限光。从这种光源发出的光线可以认为是平行的。例如太阳光
HemisphereLight:半球光,用来创建更加自然的室外光线,模拟反光面和光线微弱的天空。
AreaLight:面光源
LensFlare:镜头炫光,这不是一种光源,但是通过它可以为场景中的光源增加炫光效果

材质

Three.js中有一个材质基类:THREE.Material,这个基类列出了材质的共有属性,主要分为三类:
基础属性:这些属性是最常用到的。用来控制物体的透明度、是否可见或如何引用物体
融合属性:每个物体都有一系列的融合属性,这些属性决定物体如何与背景融合
高级属性:有一些高级属性可以控制底层WebGL上下文渲染物体的方法。

基础属性

ID:用来标识材质,在创建时赋值
name:赋予材质名称
opacity:透明度,取值范围0~1
transparent:如果设置为true,Three.js根据opacity来渲染物体。如果false,这个物体就不透明。
overdraw:过渡描绘。如果用THREE.CanvasRenderer对象,多边形渲染会偏大。有缝隙时,将该值设置为true
visible:是否可见
side:侧面。通过这个属性,可以决定在几何体的哪一面应用这个材质。默认值是THREE.FrontSide。(BackSide,DoubleSide)
needsUpdate:是否刷新。如果设为true,Three.js就会使用新的材质属性刷新它的缓存

融合属性

blending:融合。一般是NormalBlending,在这种模式下,只显示材质的上层
blendsrc:融合源,除了使用标准融合模式之外,还可以创建自定义的融合模式。该属性指定物体如何跟背景相融合,默认值是SrcAlphaFactor,即使用alpha透明度通道进行融合
blenddst:默认值OneMinusSrcAlphaFactor。含义是:目标也使用源的alpha通道进行融合,只是用的值是1
blendingequation:融合公式,指定如何使用blendsrc和blenddst的值。默认是addEquation,即将两个颜色值相加。

MeshBasicMaterial:网格基础材质
不考虑光照的影响,使用这种材质的网格会被渲染成一些简单的平面多边形
MeshDepthMaterial:网格深度材质
使用这种材质的物体,其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。
MethNormalMaterial:网格法向材质
MeshFaceMaterial:网格面材质
MeshLambertMaterial:网格郎伯材质
MeshPhongMaterial:网格Phong式材质
ShaderMaterial:着色器材质
LineBasicMaterial:直线基础材质
LineDashedMaterial:虚线材质
注:可以为一个几何体赋予多种材质。这样做会复制几何体,从而创建出多个网格。

几何体

二维

PlaneGeometry:平面
CircleGeometry:圆形
ShapeGeometry:塑形

三维

CubeGeometry:立方体
SphereGeometry:球体
CylinderGeometry:圆柱
TorusGeometry:圆环(甜甜圈)
TorusKnotGeometry:环面纠结(麻花)

PolyhedronGeometry:多面体,传入顶点、面、半径和detail参数
多面体可以使用几个开箱即用的:
IcosahedronGeometry:二十面体
OctahedronGeometry:八面体
TetrahedronGeometry:四面体

高级几何体

ConvexGeometry:凸面体
TODO

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • 111. [动画系统]如何将其他类型的动画转换成关键帧动画? 动画->点缓存->关键帧 112. [动画]Unit...
    胤醚貔貅阅读 12,866评论 3 90
  • 今天CET4 早上醒来,是沾满口水的枕头与一晚上四级的噩梦。云淡风轻的跟朋友谈论着这些,努力使自己淡定自若。昨天晚...
    丁十二阅读 497评论 1 2
  • 2016的第一场雾霾,在回光返照的温暖中笼罩着这座熟悉又陌生的城市。以为睡了好久,推开门见此状发现自己的感觉越来越...
    涂天一阅读 220评论 0 0
  • 北方的冬天冷得叫人印象深刻,可是我能安慰自己说,还好,有暖气,屋子里还是暖的。 窗外到处白雪覆盖,积雪累月不化,阴...
    喂_我还在等你阅读 238评论 1 0
  • 23.justice n.正义;公正;法律制裁;审判员,法官。 24.adjust vt.&vi.(改变…以)适应...
    溪小悦阅读 228评论 0 0