构建一些规则的 3D 物体，如立方体、球体、椎体等，我们自己可以手动轻易实现，但是在实际开发中往往会用到复杂的 3D 物体，如人体、汽车等，这就需要设计师和专业的建模工具软件（像 3DS Max、Maya...OBJ 文件的结构 本文主要介绍 obj 3D 模型文件及其附属文件 mtl ，下面是 obj 模型文件的数据结构（为了方便展示部分数据被略过）。...OBJ 文件数据结构的简单说明： # 开头的行表示注释行； mtllib 表示指定该 OBJ 文件所使用的 mtl 文件（材质文件）； v 开头的行表示存放的是顶点坐标，后面三个数分别表示一个顶点的（x...分量值，其中 p 分量一般用于 3D 纹理； usemtl 01___Default 表示使用指定 mtl 文件中名为 01___Default的材质； s 1 表示开启平滑渲染； f 开头的行表示存放的是一个三角面的信息...表示指定材质的凹凸纹理文件，凹凸纹理修改表面法线，用于凹凸纹理的图像表示相对于平均表面的表面拓扑或高度（没用过）。
有，使用建模软件生成obj文件。 Obj文件简单来说就是包含一个3D模型信息的文件，这里信息包含：顶点、纹理、法线以及该3D模型中纹理所使用的贴图。...[img594ca77c3ca47.png] Mtllib(material library)指的是该obj文件所使用的材质库文件(.mtl) 单纯的obj生成的模型是白模的，它只含有纹理坐标的信息...使用材质库文件中具体哪一个材质 [img594ca7811c1a3.png] F是面，后面分别对应 顶点索引 / 纹理坐标索引 / 法线索引 这里大部分也都是我们非常常用的属性了，还有一些其他的...，如果有对obj文件所有可能含有的信息完成匹配的同学可以去看下Threejs中objLoad部分源码 3、将obj中数据真正的运用3D对象中去 Text3d.prototype.addFace =...文件中f(ace)行中4个值的情况，导出obj文件中可以强行选择只有三角面，不过我们在代码中兼容一下比较稳妥 4、旋转平移等变换 物体全部导入进去，剩下来的任务就是进行变换了，首先我们分析一下有哪些动画效果
以创建一个简单的立方体为例，创建简单的立方体需要添加8个顶点和12个三角形的面，创建顶点时需要指定顶点在坐标系中的位置，添加面的时候需要指定构成面的三个顶点的序号，第一个添加的顶点序号为0，第二个添加的顶点序号为...七、纹理 在生活中纯色的物体还是比较少的，更多的是有凹凸不平的纹路或图案的物体，要用Three.JS实现这些物体的效果，就需要使用到纹理贴图。...球体、立方体、圆柱体等等，但是在实际使用中往往需要用到一些特殊形状的几何体，这时可以使用3D建模软件制作出3D模型，导出obj、json、gltf等格式的文件，然后再加载到Three.JS渲染出效果。...上图的椅子是在3D制图软件绘制出来的，chair.mtl是导出的材质文件，chair.obj是导出的几何体文件，使用材质加载器加载材质文件，加载完成后得到材质对象，给几何体加载器设置材质，加载后得到几何体对象...主要的代码如下： // .mtl材质文件加载器 var mtlLoader = new THREE.MTLLoader(); // .obj几何体文件加载器 var objLoader = new THREE.OBJLoader
文件，查看是否有“vn” 标记 mtl文件中设置模型颜色为黑色 一些建模人员在导出mtl文件时候， 参数Kd 是0 0 0， Kd参数会被解析成模型材质的color属性，既颜色。...mtl 也是文本文件，直接用文本编辑器可以打开查看： PS mtl中 Kd 代表漫反射的颜色， Ks代表高光反射的颜色。...mtl文件中贴图引用了本地路径 有时候建模人员在导出mtl文件的时候，里面的贴图路径是本地的绝对路径，如下图所示： 此时导入的模型因为找不到贴图，而变成了黑色。...解决方法就是把绝对路径改成相对路径，如下图： 可以手动编辑mtl文件修改，也可以建模人员导出的时候设置。...导入的场景没有设置灯光 还有一种情况，模型都没有问题，但是由于场景没有设置任何灯光，导致模型看不见，此种情况需要程序上添加灯光即可。 结语 上一张修改后的效果图
('obj/city.obj', 'obj/city.mtl', { // 加载模型 center: true, // 模型是否居中，默认为 false，设置为 true 则会移动模型位置使其内容居中...，如果是相对路径则以加载 obj 的 html 页面的路径为参考 shape3d: 'city', // 如果指定了 shape3d 名称，则HT将自动将加载解析后的所有材质模型构建成数组的方式...shape3d 属性，然后设置到节点的 shape3d 属性上，即可修改；或者直接设置节点的 shape3d 属性为 json 格式的 obj 文件，这里还是采取第一种方式： var showFloor.../obj/city.obj", // 必须设置 obj 属性 "mtl": "..../obj/city.mtl" // 此项可写可不写，如果需要设置 obj 模型的样式（如颜色等），则必须设置此项 } 但是这种模式不适用于这个场景，因为我的模型有些大，需要调用到 obj 模型的原始大小
('obj/city.obj', 'obj/city.mtl', {// 加载模型 center: true,// 模型是否居中，默认为false，设置为true则会移动模型位置使其内容居中...cube: true,// 是否将模型缩放到单位1的尺寸范围内，默认为false prefix: 'obj/',// 图片路径前缀，即在map_kd值之前增加的前缀，如果是相对路径则以加载...显示 city.obj 与 city.mtl 的内容 } }); } 工控楼层模型的加载也是类似，这里就不再赘述。.../obj/city.obj",// 必须设置 obj 属性 "mtl": "..../obj/city.mtl"// 此项可写可不写，如果需要设置 obj 模型的样式（如颜色等），则必须设置此项 } 但是这种模式不适用于这个场景，因为我的模型有些大，需要调用到 obj 模型的原始大小
之前学习blender的时候，在国外的一个系列教程有提到解析obj文件，这篇教程便来介绍如何解析obj和mtl文件，并用OpenGL ES显示出来。...概念介绍 1、obj文件 obj文件是一种3D模型文件。 文件格式 ?...文件 mtl文件则是obj文件的附属文件，描述几何体的表面属性。...和mtl文件，解析文件内容，写入到.h/.c文件中，把.h/.c文件加入新的工程引用。...把Model中存储的解析信息，分别写入到.h/.c文件中。
）来加载 OBJ 文件： ht.Default.loadObj('obj/plane.obj', 'obj/plane.mtl', { center: true..."obj/plane.obj", "mtl": "obj/plane.mtl"// 要是没有 mtl 文件，则设置为 "" } 之后通过设置节点的 style 的 shape3d 属性设置为这个...不管使用哪种方法来加载模型，mtl 文件中如果有使用贴图，贴图的路径需要是相对于 obj 文件的路径。...前面代码中的 modelMap.propeller 是 OBJ 文件中定义好的 modelMap 对象中的 propeller 对象，可以试着打印 modelMap 看看输出结果。 ?.../guide/guide/plugin/obj/ht-obj-guide.html#ref_loadobj），我们还添加了一个在 OBJ 模型中没有的飞机尾部的“红色闪烁指示灯”，这里用到的是组合模型
，也要设置绝对定位中的位置，我在页面中添加了一个 div，将 HT 的部分都添加进这个 div 中： <div id="myDiv" style="border: 1px solid red; width...HT 封装了解析 <em>obj</em> 格式的函数 ht.Default.loadObj 函数用来导入模型，该函数有三个参数，第一第二分别为 <em>obj</em> <em>文件</em>的<em>路径</em>和 <em>mtl</em> <em>文件</em>的<em>路径</em>，第三个参数为 json 格式控制参数...<em>obj</em>', '<em>obj</em>/机柜组件1.<em>mtl</em>', { cube: true,//是否将模型缩放到单位1的尺寸范围内，默认为false center: true,//模型是否居中...prefix: '<em>obj</em>/',//<em>路径</em>前缀，如果前面参数写了<em>路径</em>前缀，这个不写也可以 shape3d: 'cabinet',//指定 shape3d 名称 finishFunc: function...，<em>如</em>setAttr('age', 98)触发事件的e.property为a:age 这里我们将对模型<em>中</em> Data 的属性变化事件的监听结果传给 HTML <em>中</em>的 id 为 property 的 span
前两天有伙伴在 QQ 上询问，如何在 Creator 3D 中切换模型贴图。...上图中，先使用引擎内置的无光照的 Effect，它的选项看起来没那么多，可以减少畏惧感，我们将一 ground 的图片拖动到 test.mtl 材质资源上。...3 使用脚本修改材质纹理 我这里创建了一个 test.ts 的脚本文件，用于修改材质上的纹理资源，先看下组件属性： ?...纹理资源已经设置好了，如何通过代码访问或修改材质呢？...只需要将材质属性中的属性名，首字母小写就可以了！ 3 小结 本篇介绍了使用 material.setProperty API 修改材质纹理。
这个例子用了 HT 中的树组件 ht.widget.TreeView 和 HT 中加载 OBJ 格式文件的 ht.Default.loadObj 函数来加载图中的两辆摩托车，我们利用代码来从头开始解析这个例子的部分...接着要将最外层的组件添加进底层 div 中，没有阅读过我的文章的同学这边我解释一下，所有的 HT 组件最根层都是一个 div 组件，可通过组件的 getView 函数获得，默认和自定义交互时间监听一般添加在该...接着通过利用 ht.widget.loadObj 函数将 OBJ 格式文件导入模型： ht.Default.loadObj('obj/scooter.obj', 'obj/scooter.mtl', {...文件路径，mtlUrl MTL 文件路径，params JSON 结构参数，parmas 参数可以设置 ht.Default.parseObj(text, mtlMap, params) 第三个参数的控制信息...本例中有两个 motor 摩托车模型，一个是整体的模型，不能拆分，一个是可以拆分成部分的模型，接下来就来看看如何将 OBJ 文件中的模型拆分开来： ht.Default.loadObj('obj/scooter.obj
这是我要压缩的文件列表，把响应的资源文件存放到对应的文件夹下，然后在 loadorder 文件中标明资源加载的顺序，loadorder 文件内容如下： 'js/ht.js', 'js/ht-obj.js...', 'js/ht-modeling.js', 'obj/equipment.mtl', 'obj/equipment.obj', 'image/equipment.jpg' 在资源加载顺序中，要标明响应资源的相对于....zip 文件的路径，这样方便在读取 .zip 文件时快速找到相应的资源文件。...有涉及到 3D 模型数据与 HT 3D 拓扑应用的结合，在 .zip 文件中的 obj 目录就是存放 3D 模型数据，在文件读取中，将 3D 模型数据以文本对形势读取出来存放到变量中，再将数据传递到 init...其中那段 setImage 的代码需要特别注意，为什么我要大费周张的去判断 image 的文件名呢，那是因为在 mtl 3D 模型描述文件中有一个设置贴图的属性，该属性可以指定文件的绝对路径，也可以指定文件的相对路径
这个例子用了 HT 中的树组件 ht.widget.TreeView 和 HT 中加载 OBJ 格式文件的 ht.Default.loadObj 函数来加载图中的两辆摩托车，我们利用代码来从头开始解析这个例子的部分...接着要将最外层的组件添加进底层 div 中，没有阅读过我的文章的同学这边我解释一下，所有的 HT 组件最根层都是一个 div 组件，可通过组件的 getView 函数获得，默认和自定义交互时间监听一般添加在该...接着通过利用 ht.widget.loadObj 函数将 OBJ 格式文件导入模型： 1 ht.Default.loadObj('obj/scooter.obj', 'obj/scooter.mtl'...文件路径，mtlUrl MTL 文件路径，params JSON 结构参数，parmas 参数可以设置 ht.Default.parseObj(text, mtlMap, params) 第三个参数的控制信息...本例中有两个 motor 摩托车模型，一个是整体的模型，不能拆分，一个是可以拆分成部分的模型，接下来就来看看如何将 OBJ 文件中的模型拆分开来： 1 ht.Default.loadObj('obj/
所以我怕我代码写多了， 你们反而看起来不好理解hhhhhh 在c++下用OpenGL解析的话可以看我其他博客 运行环境：vs2017，需要配置的库为：sharpGL 一.读取3D模型 在3d图形处理中，...下面是一个obj的模型文件，我们可以使用记事本打开看看里面是什么： # Blender3D v249 OBJ File: untitled.blend # www.blender3d.org mtllib...cube.mtl v 1.000000 -1.000000 -1.000000 v 1.000000 -1.000000 1.000000 v -1.000000 -1.000000 1.000000...调用方法也很简单，在winform下的话，在openglControl控件的draw事件中加下面的代码： 第一步：New一个对象 第二步：读取自己路径下的obj模型文件 第三步：调用显示列表绘制图案...gl.CallList(obj.showFaceList); } 对了如果用opengl读取模型解析3d模型后看起来像个2d的样子，无非就是你的光照问题，或者模型文件里面没有顶点法线
用VMD载入一些常见的格式，如xyz、pdb等，然后点击File → Render，选择Wavefront (OBJ and MTL)渲染方式，然后点击Start Rendering即可。...在VMD的安装目录会生成vmdscene.mtl和vmdscene.obj两个文件。 2....将3D模型插入PPT 将上述vmdscene.obj文件复制进所需的PPT页面或直接拖进去即可，如下图所示： 拖动中间的旋转按钮，可以拖动到想要的角度。 3....点中3D模型后，点击PPT中的“动画”，会看到比一般的图片或文本框多几个选项，如下图所示： 选择“转盘”效果，即可实现3D模型的旋转。...说句题外话，其实PPT的3D模型功能还可以配合一些动作效果或插件，实现更酷炫的效果，大家可以在网上搜索相关教程，说不定在自己将来的PPT中能用上。
，并把图元添加到 3D 场景中，这时我们可以向图元中添加各种属性和样式以及标签作为标记，本例中用到的图元是 3D 模型，利用 ht.Default.parseObj 函数对 obj 和 mtl 文件进行解析...(meter_obj, meter_mtl, params);//解析obj和mtl文件， 解析后返回的map结构json对象中，每个材质名对应一个模型信息 当然，前提是要已经声明了 meter_obj...以及 meter_mtl 两个文件，这里我们是将这两个部分分别放到 js 文件中，并在头部调用。...'pointer'){//obj 文件中的一个模型 名称为 pointer model.mat = {//矩阵变化参数，可对模型进行矩阵变化后导入 func: function(data){ var...JSON 文件，直接看到 3D 中我们修改的效果啦~怎么样？
领取专属 10元无门槛券
手把手带您无忧上云
