码迷,mamicode.com
首页 > Web开发 > 详细

webGL3D模型的加载与使用

时间:2016-09-19 01:12:46      阅读:627      评论:0      收藏:0      [点我收藏+]

标签:

    在3DMAX,MAYA等软件(这是一些三维编辑软件)中,可以制作出3D模型。这些模型可用于室内设计,三维影视,三维游戏等领域。

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

    如下图所示:

    技术分享

    上图就是一辆汽车的3D模型(立体模型),因为是由一个个网格组成,所以,也叫其为网格模型。

    最终目的是要讲解怎么将模型导入three.js中,让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加载一个简单模型的过程。这个过程是这样的:

    技术分享

    

    上图的顺序是:

    1、服务器上的模型文件以文本的方式存储,除了以three.js自定义的文本方式存储之外,当然也可以以二进制的方式存储,不过这里暂时不讲。

    2、浏览器下载文件到本地

    3、Javascript解析模型文件,生成Mesh网格模型

    4、显示在场景中。

webGL3D模型的加载与使用

标签:

原文地址:http://www.cnblogs.com/yizhuceyonghuming/p/5883540.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!