网站建设需求说明书模板,图库,wordpress 主菜单 背景,秦皇岛qq群threejs术语和概念
threejs的API很长#xff0c;有很多概念和术语#xff0c;理解了这些概念和术语#xff0c;才能更好的使用threejs。这些概念和术语都藏在API右侧的大纲中#xff0c;下图简单整理了一下这些概念#xff1a; 这些概念又分为四个大类#xff08;见上图…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); //创建一个用点云表示的形状看了上面的例子你应该明白图形的几何形状Geometry是与表示方法无关的你可以使用点、线或面来表示一个几何形状。
几何形状Geometry
Geometry其实就是点的集合Geometrys分类下放的各种几何形状都是各种图形表示方法通用的 这些类提供便捷方法来创建代表各种形状的顶点的集合。
材质Material
材质与图形的类型是相关的点使用PointsMaterial线使用LineXXXMaterial网格使用MeshXXXMaterial精灵使用SpriteMaterial等等。
纹理
纹理是用来表现图形的一些微小细节的。理论上讲一个图形所有的细节都可以用点线面表示出来但是这么做需要巨量的点线面计算速度十分的慢所以在细节上可以使用纹理。 在threejs中使用Texture来表示纹理纹理可以从图片中加载也可以从canvas中加载所以纹理能表示的图像很丰富。 要了解纹理可以看【雪花】的例子
动画和声音
动画和声音暂时了解不多后面再讲
框架原理
这部分包括常量框架核心类数学库和帮助类后面再讲
threejs程序的对象图示
【Three.JS Walking Map】总结得很好如图 持续更新请看https://teakki.com/p/58a3ef1bf0d40775548c908f
