logo资料库

three.js关于obj、collada、stl、josn、ply格式的探究.docx

发布时间：2022-06-10 发布人：admin 分类：说明书 资料大小：0.84M 资料格式：docx 举报 版权申诉
第1页 / 共24页
第2页 / 共24页
第3页 / 共24页
第4页 / 共24页
第5页 / 共24页
第6页 / 共24页
第7页 / 共24页
第8页 / 共24页
资料共24页，剩余部分请下载后查看
    Q1. three.js 读取不同格式模型，学会控制不同格式模型的最小部分，探索前期模型的组合 方式是否和后期的数据是否相关? Q2. 根据地理坐标，怎样保持相对位置的一致? 模型： 两个立方体或更多 格式选择： (1)obj+mtl (2)ply (3)stl (4)josn (5)collada 根据组合的顺序不同查看数组的顺序是否发生变换 Ctrl+j（join） CTRL+g（group） Ctrl+p（父级 parent） 查看导入模型的相对位置是否变换 最终根据地图实际导入到 web 中查看相对位置是否变换 (1) obj+mtl ：obj 是一种简单的三维文件格式。它是使用最广泛的三维文件 格式，用来定义对象的几何体。MTL 文件常和 OBJ 文件一起使用。在一个 OBJ 文件中，用 MTL 文件定义对象的材质 实验步骤： 1. 先将一个简单的立方体使用 blender 以 obj 格式导出，blender 自动生成两个文件： 一个 obj 文件和一个 mtl 文件 根据控制台窗口发现结构如下
    Object {type=“Group” } Children[0] {type=“Object3D” } Children[0] {type=“Mesh” } Children[1] {type=“Mesh” } 这时出现一个问题，明明只有一个立方体，为什么会出现两个 Mesh 对象，经过对两个 对象的仔细比较，发现他们的 geometry 属性中 vertices（顶点坐标）属性中数据都一致， 但 faces 属性不同，children[1]具有正确的 faces 属性，而 children[0]的 faces 属性中没有数 据！除了 geometry 属性，更大的差异在于 material 属性，children[1]中的 material 的 type= “MeshPhongMaterial”，而 children[0]中的 material 的 type 属性为“MeshLambertMateria l”，因 此可以判断 three.js 基于两个不同材质创建了两个实例（THREE.Mesh 对象），将这些实例放 在了一个组里面（THREE.Object3D 对象）。 弄清楚以上问题，我们开始将导入两个立方体进行探讨。 2. 导入两个立方体(未进行 join、group、parent 操作) Blender: Cube.006 相对于 Cube.007 沿 y 轴正向移动了 5 个单位
    Web： Cube.006 相对于 Cube.007 沿 z 轴负向移动了 5 个单位 由控制台窗口得结构如下 Object {type=“Group” } Children[0] （Cube.007） {type=“Object3D” } Children[1] （Cube.006） {type=“Object3D” } Children[0] {type=“Mesh” } Children[1] {type=“Mesh” } Children[0] {type=“Mesh” } Children[1] {type=“Mesh” } (a)坐标的问题可能是由于 blender 自身得原因，先不予讨论，但也可以看出但如果导入 之前的模型如果有相对位置关系，那么导入 web 中也会有相对位置关系。 (b) 我们发现 object 的第一个子对象是我们在建模软件中后创建的立方体，第二个对象 是我们先创建的立方体，检查 obj 文件，第一个对象是 Cube.007，第二个是 Cube.006，（私 下我又创建了一个具有 3 个立方体的场景，发现 three.js 导入立方体的顺序和我们创建的顺 序确实是相反的，即先创建的物体后导入，后创建的物体先导入）。 (c)接下来我们将实现对立方体的逐层控制。首先希望实现对一个立方体的着色，此时发 现改变一个 mesh.material.color 的值，另一个立方体的颜色也发生了变化。
    这是怎么回事？ 经过查看四个 mesh 对象的 material 属性发现除了 object.children[0].children[0].mater Ial.type 为“MeshLambertMaterial”其余三个 mesh 的 material 的 type 属性均为“MeshPhongMa terial”，并且均为同一引用对象，根据 JavaScript 对引用对象的描述，不难知道为什么两个 立方体的颜色均发生了变换。 解决方法为使他们指向不同的引用对象。 由于三角形为基本形状，我们只要为每个面的顶点指定颜色，将 material 中的 vertexC olors 属性开启即可（此时得出的颜色为线性插值得到的结果），或者为每个面直接进行指定 颜色，最后将 material 的 vertexColors 属性设置为 FaceColor。由控制台窗口中的数据可知 立方体顶点顺序如下。 效果图如下：
    由此可知，能够对几何体的 geometry 属性中的 vertices 和 faces 进行操作 从而控制几何体的顶点和面。 3. 导入两个立方体(进行 join 操作) Blender: Cube.006 相对于 Cube.007 沿 y 轴正向移动了 5 个单位，先点击 Cube.007，， 后点击 Cube.006。（我们可以发现只剩下 Cube.006，Cube.007 已经被合并了） Web: 由控制台窗口可知结构如下
    Object {type=“Group” } Children[0] {type=“Object3D” } Children[0] {type=“Mesh” } Children[1] {type=“Mesh” } 其实非常容易理解，两个物体合成了一个物体，发生改变的是网格对象中的顶点个数从 8 变成了 16，顶点的顺序仍之前的一致 并且我们发现顶点数组中先计入的是 Cube.006 的坐标，后计入 Cube.007 坐标。因为 是 Cube.007 并入了 Cube.006，所以 three.js 先导入 Cube.006 的坐标，后导入 Cube.007 的 坐标。同理我们也可以控制这个对象的顶点和面（颜色或坐标） 代码如下
    效果图如下 4. 导入两个立方体(进行 group 操作) Blender: Cube.006 相对于 Cube.007 沿 y 轴正向移动了 5 个单位，先点击 Cube.007，， 后点击 Cube.006。
    Web： 由控制台窗口可得结构如下 Object {type=“Group” } Children[0] （Cube.007） {type=“Object3D” } Children[1] （Cube.006） {type=“Object3D” } Children[0] {type=“Mesh” } Children[1] {type=“Mesh” } Children[0] {type=“Mesh” } Children[1] {type=“Mesh” } 可以看出与没有进行 group 操作没有什么区别，是不是两个立方体太少了呢，下面我们来 在加一个立方体，并为他创建一个组 Blender: Cube.006 相对于 Cube.007 沿 y 轴正向移动了 5 个单位，Cube.011 相对于 Cube.007 沿 x 轴正向移动了 5 个单位，先点击 Cube.007，后点击 Cube.006，进行组合。
    分享到：
    赞 收藏

    相关推荐

    资料库

    课程资源

    共收录17145份资料，累计13个分类，关注成员有19位，主要包括：PHP,网络管理,网页制作,Java,.Net,数据库,3G/移动开发,C/C++,游戏开发,嵌入式,讲义,软件测试,专业指导

    热门标签

    PHP 网络管理 网页制作 Java .Net 数据库 3G/移动开发 C/C++ 游戏开发 嵌入式 讲义 软件测试 专业指导

    最新资料