threejs概览
来源:互联网 发布:淘宝联盟api免费申请 编辑:程序博客网 时间:2024/06/12 11:17
threejs术语和概念
threejs的API很长,有很多概念和术语,理解了这些概念和术语,才能更好的使用threejs。这些概念和术语都藏在API右侧的大纲中,下图简单整理了一下这些概念:
这些概念又分为四个大类(见上图,个人划分,未必准确),个人觉得,可以按这四个大类的顺序来了解threejs,下面对这个个大类进行简述。
threejs三大组件
这三大组件分别是相机(Camera)、渲染器(Renderer)和场景(Scene),这三个组件是创建3D图形的必备组件。其中:
- 场景用来容纳图形元素。场景相当于宇宙,而图形元素就是星星,图形元素只有添加到场景中,其坐标、大小等才有意义。
- 相机的作用是定义可视域,即确定哪些图形元素是可见的。
- 渲染器则负责用如何渲染出图像,是使用WegGL还是Canvas。
关于渲染器和相机,可以看【相机和渲染器】一文。
threejs基本图形元素
所谓基本图形元素,就是threejs中的图形显示,基本与这些对象相关。那么,理解了这些对象,就能知道如何在threejs中表示图形。threejs的基本图形元素都定义在Objects下,如下图:
可以打开【threejs参考文档】,查看一下。
这些类又可以分成下面4个小类别:
点、线、面
首先,所有图形都是由点、线或面构成,所以有:
- Points:点或点云,可以用点或点云表示图形
- Line/LineSegments:直线和虚线,可以用线或线团表示图形
- Mesh:网格模型,可以用若干三角面表示图形
点、线、面都可以聚集到一起组成一个立体图形,也可以单独一个,作为一个2D图形,可以看【点云表示图形】【线团表示图形】【网格模型表示图形】这几个例子来直观了解。
精灵
Sprite在threejs中定义为“一个永远面向相机的平面,通常用来加载纹理”,其最重要的特点是永远面向相机,这在某些时候很有用。要想一睹精灵的风采,可以打开【精灵】,注意一下,所有图形都是面向相机的。
骨骼
骨骼相当于图形的控制单元,控制骨骼运动,就能带动骨骼上附着的图形的运动。如果你不理解什么是骨骼,可以看看腾讯开发的一个骨骼游戏框架【AlloyStick】,按JJKL,看看火柴人的运动。threejs的骨骼例子则看【这里】。
在threejs中,与骨骼相关的类有:
- Bone:骨骼
- Skeleton:骨架,由多根骨骼组成
- SkinnedMesh:皮肤,附着在骨骼上的图形
其它类
- lensFlare:光晕
- LOD:细节级别
- Group:组,可以将多个对象打包成一个组,便可统一操作。
其实,在Threejs中能看到的东西就是这些了,然后这些东西的组成也有很大的变化,从而演化成一个变化多端的系统。
几何形状和材质
threejs使用Geometry定义物体的几何形状,其实Geometry的核心就是点集,之所以有这么多的Geometry,是为了更方便的创建各种形状的点集。
threejs通过Material定义物体的材质。下面是创建一个图形的过程的例子:
//1、定义形状let geometry = new THREE.BoxGeometry(10,10,10);//2、定义材质let meshMaterial = new THREE.MeshBasicMaterial({color:0xff0000});let lineMaterial = new THREE.LineBasicMaterial({color:0x934894});let pointMaterial = new THREE.PointMaterial({color:0x738938});//3、创建图形let mesh = new THREE.Mesh(geometry,meshMaterial); //创建一个用网格模型表示的形状let line = new THREE.Line(geometry,lineMaterial); //创建一个用线团表示的形状let point = new THREE.Points(geometry,pointMateril); //创建一个用点云表示的形状
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
看了上面的例子,你应该明白,图形的几何形状(Geometry)是与表示方法无关的,你可以使用点、线或面来表示一个几何形状。
几何形状(Geometry)
Geometry其实就是点的集合,Geometrys分类下放的各种几何形状都是各种图形表示方法通用的:
这些类提供便捷方法来创建代表各种形状的顶点的集合。
材质(Material)
材质与图形的类型是相关的,点使用PointsMaterial,线使用LineXXXMaterial,网格使用MeshXXXMaterial,精灵使用SpriteMaterial等等。
纹理
纹理是用来表现图形的一些微小细节的。理论上讲,一个图形所有的细节都可以用点线面表示出来,但是这么做需要巨量的点线面,计算速度十分的慢,所以,在细节上,可以使用纹理。
在threejs中使用Texture来表示纹理,纹理可以从图片中加载,也可以从canvas中加载,所以,纹理能表示的图像很丰富。
要了解纹理,可以看【雪花】的例子
动画和声音
动画和声音暂时了解不多,后面再讲
框架原理
这部分包括常量,框架核心类,数学库和帮助类,后面再讲
threejs程序的对象图示
【Three.JS Walking Map】总结得很好,如图:
持续更新请看:https://teakki.com/p/58a3ef1bf0d40775548c908f
- threejs概览
- threejs概览
- threejs
- threejs截屏
- ThreeJS阴影
- threejs纹理
- threejs路径
- ThreeJS 入门教程
- 概览
- threeJS中粒子特效
- ThreeJS中的相机
- ThreeJS中的相机
- ThreeJs 中,如何画线?
- Threejs 入门 转载
- 【ThreeJs】html5小游戏-SearchX
- THREEJS开篇简介
- threejs渲染器透明
- THREEJS阴影效果
- [iOS固定宽度后计算UILable高度]
- Tomcat 结合Atomikos 实现JTA
- 2017.9.9 幸运数字 失败总结
- 关于resultset返回数字类型时为BigDecimal类型
- 使用jeesite生成单表的增删改查BUG总结
- threejs概览
- 解决Linux无法用ssh进行连接
- 67 个拯救前端开发者的工具、库和资源
- JAVA设计模式---装饰模式
- CSS3基础
- A+B
- 华为机试2
- HMAC与数字签名学习记录
- python编程中的几个问题