three.js学习3

2023-03-09  本文已影响0人  浮若年华_7a56

1.粒子(也叫精灵)

我们可以使用THREE.Sprite来手工创建粒子,它需要传入唯一的参数材质(THREE.SpriteMaterial或THREE.SpriteCanvasMaterial)
THREE.Sprite于THREE.Mesh一样,都是THREE.Oject3D的子类,所以THREE.Sprite可以使用THREE.Mesh的大部分属性


1678242229488.png

使用THREE.Sprite可以很容易创造粒子,但是创造大量的THREE.Sprite时,就会有严重的性能问题,因为每个THREE.Sprite对象都需要去管理,所以这时候就需要使用THREE.Points了,我们只需要使用THREE.points对象,就能够实现统一管理大量粒子
HTREE.PointsMaterial对象的所有可设置的属性如下:

在webGLRenderer中使用html5画布

如果我们想要在WebGLRenderer中使用·canvas画布,可以采用两种方式,可以使用THREE.PointsMaterial创建THREE.Points对象,或者使用THREE.Sprite和THREE.SpriteMaterial的map属性


1678329479582.png
使用纹理化粒子

图像样式化粒子还可以使用THREE.TextureLoader().load()函数将图像加载为THREE.Texture对象,然后将THREE.Texture分配给材质的map属性

2.几何体的组合、合并和外部模型的加载

2-1.几何体对象的组合

当你创建多个网格对象时,你可以用THREE.Group将它们放到一个组中进行管理
当几何体被放置在组中的时候,你可以对组进行旋转、平移。缩放操作,这样组里的所有对象都会发生变化
旋转的中心是组的中心点,也可以对组内的某个对象单独进行操作,但是需要注意的是。所有定位、旋转、变形都是相对于父对象的

2-2.多个网格合并成一个网格

组可以管理大量网格,但对象·特别多的时候,性能就会到达瓶颈
因此我们可采用网格合并的方式,来提高的性能,但合并后的网格就没法操作单个网格进行旋转、移动操作
我们可以使用mergeBufferGeometries来实现多个mesh合并为一个mesh且可以使用多个Material

2-3.编码时改变几何体的位置进行合并网格

使用applyMatrix4()进行向量矩阵变换,applyMatrix4()是三维向量Vector的方法

2-4.从外部资源加载几何体

three.js可以读取几种三维文本文件格式,并从中导出几何体网络,支持的文件格式如下

格式 描述
json three.js自己的json文件格式,你可以用它来声明你的几何体和场景,尽管它不正式,但是非常方便你去复用复杂的场景和几何体
OBJ或MTL obj是一种简单的三维文件格式,由WavefrontTechnologies创建,它是使用最广泛的三维文件格式,用来定义对象的几何体。MTL文件常同obj文件一起使用,在一个mtl文件中,obj文件用来定义对象的材质,thre.js还有一个可定制的obj导出器,叫做OBJExporter.js,可以将three.js中的模型导出一个obj文件中
Collada Collada是一种用基于xml的格式定义的数字的内容的格式,也是一种被广泛使用的格式,三维软件和渲染引擎都支持这种格式
STL STL是STereoLithphy(立体成型术)的缩写,广泛用于快速成型。如三维打印机的模型文件通常是STL文件。thress.js还有一个可定制的STL导出器,叫做STLExporter.js,可以用来将three.js中的模型导出
CTM ctm是openCTM的一种文件格式,可以用来压缩格式存储三维网格的三角形面
VTK vtk是由Visualization Toolkit创建一种文件格式,用来指定顶点和面,vyk有两种格式:二进制
AWD 一种用于三维场景的二进制格式,通常与away3d(away3d是falsh或flex上一个功能强大且实时的3D引擎,具有快速、高效、api清楚等优点,但是会有三角型消失的问题)引擎一起使用,这个加载程序不支持压缩的AWD文件
Assimp Open asset import library(也称为Assimp)是一种导入各种三维模型格式的标准方法
VRML VRML(Virtual Reality Modeling Language)是一种基于文本的格式,允许定义三维对象和世界
Babylon 一个三维javascript游戏库,它以自己内部格式存储模型
PDB 由Protein Data bank(蛋白质数据银行)创建,用于定义蛋白质的形状
PLY 这种格式的全称是(Polygon)文件格式,通常用来保存三维扫描仪的信息
TDS Autodesk 3DS格式
3MF 3MF是3d打印的标准格式
AMF AMF是另一种3D打印的标准格式
PlayCanvas PlayCanvas是一款基于WebGL的开源游戏引擎,three.js可以加载基于该引擎的模型并在场景中使用
Draco Draco格式可以高效的保存几何体和点云
PEWM PRWM(Packed Raw WenGL Model)WebGL模型原始数据包,这是一种专注于高效存储和解析3D几何体的模式
GCODE GCODE是计算机程序与3D打印机和CNC机器通信的标准模式之一,打印模型时,计算机可以向3D打印机发送GCODE命令来控制打印机
NRRD NRRD是一种存储体素数据的文件格式,它可以用于保存CT扫描数据
SVG SVG是一种矢量图形的标准格式,它可以被three.js加载器加载成Path对象,该对象可以被拉伸成3D几何体,也可以被当做2D几何体来渲染
2-4-1.使用JSON保存和加载模型
//保存模型,将场景中的对象转换成json
scene.toJSON()
//将内容转换成JSON对象,然后使用ObjectLoader对象例的方法,将对象转换成three.js可以识别的模型对象
let loader = new ObjectLoader()
let obj = loader.parse(json数据)
2-4-2.引用obj

使用OBJLoader加载OBJ模型

注:three.js模型导入obj404报错,因为iis缺少MIMI的文件映射
打开IIS,点击MIME类型,把obj添加进去类型直接设置成text/html就可以了

3.three.js动画

3-1.简单动画

通过使用requestAnimationFrame修改物体的属性来实现动画

3-2.复杂动画
上一篇 下一篇

猜你喜欢

热点阅读