Three.js加载3D模型

Easter79
• 阅读 876

  3D模型由顶点(vertex)组成,顶点之间连成三角形或四边形(在一个平面上),多个三角形或者四边形就能够组成复杂的立体模型.

一、模型在three.js的表示

  模型是由面组成,面分为三角形和四边形面。三角形和四边形面组成了网格模型。在Three.js中用THREE.Mesh来表示网格模型。THREE.Mesh可以和THREE.Line相提并论,区别是THREE.Line表示的是线条。THREE.Mesh表示面的集合。

THREE.Mesh的构造函数是:

THREE.Mesh = function ( geometry, material )

其中第一个参数geometry:是一个THREE.Geometry类型的对象,他是一个包含顶点和顶点之间连接关系的对象。

第二个参数Material:就是定义的材质。有了材质就能够让模型更好看,材质会影响光照、纹理对Mesh的作用效果。

二、模型的加载

three.js加载一个简单模型的过程如图所示:

Three.js加载3D模型

1、服务器上的模型文件大多是存储的模型的顶点信息,这些信息可以以文本的方式存储的(并不一定需要用文本的方式存储)。Three.js支持很多种3D模型格式,例如ply,stl,obj,vtk等等。随着three.js的升级,会支持越来越多的文件格式,到目前为止,three.js已经能够支持市面上大多数3D模型格式了。

同时需要重点说明的是,如果认真理解完three.js对模型的加载、解析方法,那么写一种自己的3D文件解析器是非常便利的。

2、第二步是浏览器下载文本文件,这是一件很普通的事情,只需要使用javascript的异步请求就可以实现了。

3、Javascript解析文本文件并生成一个geometry,最终生成Mesh,也是一件简单的事情。我们会在后面介绍这个过程。

4、当产生Mesh后,将其加入到场景中,那就非常简单了。

整个模型的加载思路就是这样。

 三、VTK文件格式

# 这里表示使用的是vtk的3.0版本。虽然4.0版本已经出来了,不过目前广泛使用的仍然是3.0
# vtk DataFile Version 3.0
# 这一行是输出vtk文件的软件写的文字,无论什么都可以。
vtk output
# ASCII,表示这份vtk使用的标准ASCII码字符集
ASCII
# “DATASET POLYDATA”表示多边形面集,面是由一个个点组成的
DATASET POLYDATA
# 这里表示这个模型由35947个点组成,每个坐标的分量是一个浮点型
POINTS 35947 float
# 下面是35947个点的数据
-0.0378297 0.12794 0.00447467 -0.0447794 0.128887 0.00190497 -0.0680095 0.151244 0.0371953 
-0.00228741 0.13015 0.0232201 -0.0226054 0.126675 0.00715587 -0.0251078 0.125921 0.00624226 
-0.0371209 0.127449 0.0017956 0.033213 0.112692 0.0276861 0.0380425 0.109755 0.0161689 
-0.0255083 0.112568 0.0366767 -0.0245306 0.112636 0.0373469 0.0274031 0.12156 0.0212208 
-0.0628961 0.158419 -0.0175871 0.0400813 0.104202 0.0221684 0.0451532 0.0931968 0.0111604 
..........................................
..........................................
POLYGONS 69451 277804
3 21216 21215 20399 
3 9186 9280 14838 
3 16020 13433 5187 
3 16021 16020 5187 
3 20919 20920 21003 
3 23418 15239 23127 
3 30553 27378 30502 
..................
....................
CELL_DATA 69451
POINT_DATA 35947

   Vtk模型是一种以文本方式表示的3D模型文件,其能够表示点面信息,而且能够以人类易读易懂的方式以文本的形式存储下来。在科学研究中,这种文件格式使用得非常多,我们这里详细的讲解一下,这种文件格式。

  • # vtk DataFile Version 3.0表示这个vtk文件的版本是3.0。最新版本是4.0,不过改变不大。
  • vtk output表示该文件是名字,一般写成vtk output就可以了,基本上,你没有必要去改变它。
  • ASCII表示该文件的格式,是ascii版本,该位置也可以写binary,那么这个文件就是二进制格式的了。
  • DATASET POLYDATA中的DATASET是关键字表示数据集的意思,POLYDATA表示数据的类型,可以取STRUCTED_POINTS、STRUCTURED_GRID、UNSTRUCTURED_GRID、POLYDATA、FIELD等。这里取的是POLYDATA,表示三角形或者四边形数据。
  • POINTS 35947 float 表示这个模型由35947个点组成,每个点的分量,其数据类型是浮点型。这一行后面就是35947*3个float型数字了。每三个数字表示一个点。
  • POLYGONS 69451 277804,POLYGONS是关键字,69451表示模型有69451个多边形组成,后面行的3 21216 21215 20399中的3表示每个多边形由三个顶点组成,如果等于4,那么每个多边形有4个顶点组成。277804表示整个POLYGONS占据的数组的长度,长度计算公式是69451*4 = 277804,乘数4是3 21216 21215 20399这组元素的长度(一共有4个元素),也就每一行元素的个数,这主要是用来计算存储空间的。
  • 接下来后面是69451行数据,每一行是一个多边形面。每个面由3个顶点组成,如3 21216 21215 20399这一行,后面的21216 21215 20399这三个数字,表示在上面的POINTS 35947 float段的顶点索引。
  • CELL_DATA 69451 表示面的个数,和上面定义的面数目必须一致。
  • POINT_DATA 35947表示点的个数,和“POINTS 35947 float”定义的也必须相同。
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Nginx + lua +[memcached,redis]
精品案例1、Nginxluamemcached,redis实现网站灰度发布2、分库分表/基于Leaf组件实现的全球唯一ID(非UUID)3、Redis独立数据监控,实现订单超时操作/MQ死信操作SelectPollEpollReactor模型4、分布式任务调试Quartz应用
Stella981 Stella981
2年前
Ruby on Rails 学习笔记(三)
从模型开始,先建立模型而不是建立支架 ruby script/generate model ad name:string description:text price:decimal seller_id:integer email:string img_rul:string从新迁移一下数据库rake db:migrate空模型
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
ThinkPHP 根据关联数据查询 hasWhere 的使用实例
很多时候,模型关联后需要根据关联的模型做查询。场景:广告表(ad),广告类型表(ad\_type),现在需要筛选出广告类型表中id字段为1且广告表中status为1的列表先看关联的设置部分 publicfunctionadType(){return$thisbelongsTo('A
Wesley13 Wesley13
2年前
Unity Mesh基础系列(一)生成网格(程序生成)
目录1渲染事物2创建顶点网格3创建Mesh4生成附加顶点数据本文主要内容:1、创建一个点阵网格2、用协程分析点阵网格的位置3、用三角形定义表面4、自动生成法线5、增加纹理坐标和切线在本教程中,我们将创建一个由顶点和三角形组成
Stella981 Stella981
2年前
Nginx
!(https://imagestatic.segmentfault.com/255/117/25511790966008dc5b00fd8)Nginx进程模型分析在介绍Nginx的进程模型之前我们先来给大家解释下一些常见的名词,这能辅助我们更好的了解Nginx的进程模型。作为Web服务器,设计的初衷就是为了能够处理更多的客户端的请
京东云开发者 京东云开发者
4个月前
直播预告丨大模型如何在健康医疗中挖出大大的花?
大模型时代,“应用变了”:大模型如何在健康医疗中挖出大大的花?12月1日(周五)14:0015:00开播!大模型时代,给千行百业带来了新的想象空间试想一下,大模型经过专业知识训练竟然能够成为你的健康医疗助手曾经科幻片中的场景,正一步步成为现实这一期,我们将
京东云开发者 京东云开发者
4个月前
直播预告 | 大模型时代 “应用变了”:看大模型如何跑进零售电商应用
走进零售电商,大模型能做什么?今年11.11,应用大模型带来成效显著今天下午2:00,京东云视频号准时直播看京东零售如何破题新解法,大小模型协同大模型将走向多模态,走向具身智能
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k