ThreeJs入门21-三维模型的加载与显示基础

「这是我参与2022首次更文挑战的第25天,活动详情查看:2022首次更文挑战

yuque_diagram.jpg

  • 我们使用threejs创建3D世界,那么这里讲述的模型也就是3D模型。

  • 我们知道,在3DMAX,MAYA等软件(这是一些三维编辑软件)中,可以制作出3D模型。这些模型可用于室内设计,三维影视,三维游戏等领域。那么3D模型是怎么定义的呢?让我们来看看吧。

模型概述

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

image.png

  • 我们的3D模型汽车,是由一个个网格组成,所以我们也称3D模型为网格模型。
  • 我们现实中的模型,由于添加了纹理,变得丰富多彩

image.png 我们也可以在google的3D模型库找到更多的模型,查看免费的3D模型,3dwarehouse.sketchup.com/(这个网站可能需要代理)

模型文件

  • 存放三维数据的文件,叫模型文件。

image.png

  • 如果我们设计一个模型文件,应该怎么设计呢?
    • 一个模型由点、线、面组成
    • 由不同位置的2个点,组成线
    • 三条线组成一个面
    • 若干个面组成复杂的模型
    • 每个面赋予不同的颜色和纹理
    • 每个面计算出不同的光照效果

image.png

模型查看工具

  • 我们有了模型,怎么进行查看呢?在我们开发之前,总是希望能先看到模型的一些实际场景。这样当我们在开发时才会更容易想到如何使用这个模型,这里先教给大家如何查看模型。
  • 我们可以下载3Dmax之类的软件进行查看,但是这种软件体积太大,并且太专业,并不适合我们,在工程领域,我们可以使用轻量级的查看器,如paraview,blender。这种查看器够轻量并且打开比较快。

paraview模型查看器

  • 模型查看器paraview: www.paraview.org/

  • 请自行下载并安装查看器,这里我使用的是mac。

  • 打开查看器,并加载模型文件,模型文件链接bunny.vtk.zip

  • 我们右键选择open打开文件,或者选择左上角打开文件

image.png

  • 找到bunny.vtk文件,点击ok

image.png

  • 点击apply

image.png

  • 在右边就可以查看到我们的模型效果了

image.png

  • 关于paraview具体的使用指南可以查看相关文件:wenku.baidu.com/view/f360cc…
  • 我们也可以将一种3D模型的格式转换为另一种3D模型的格式,如obj、stl等。

其他方式查看模型

  • 三维动画制作软件blender: www.blender.org/
    • Blender是一款开源的跨平台全能三维动画制作软件,提供从建模、动画、材质、渲染、到音频处理、视频剪辑等- -系列动画短片制作解决方案。
  • 免费的模型资源网址:www.cc.gatech.edu/projects/la…

总结

这一节我们主要讲了以下内容:

  • 模型概述
  • 模型文件
  • 模型查看工具
    • paraview
    • blender

猜你喜欢

转载自juejin.im/post/7063259896531124254