没有合适的资源？快使用搜索试试~ 我知道了~

文库首页课程资源网页制作three.js关于obj、collada、stl、josn、ply格式的探究

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

three.js

stl

collada

需积分: 50 24 下载量 25 浏览量 2018-10-13 19:34:38 上传评论 3 收藏 863KB DOCX 举报

温馨提示

试读

25页

真的不想收大家钱的，这里面是我花了好几天用three.js对五个格式的探索，有效果图有代码，都是血泪

资源详情

资源评论

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 文件

根据控制台窗口发现结构如下

这时出现一个问题，明明只有一个立方体，为什么会出现两个 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 个单位

Object {type=“Group” }

Children[0]

{type=“Object3D” }

Children[1]

{type=“Mesh” }

Children[0]

{type=“Mesh” }

Web： Cube.006 相对于 Cube.007 沿 z 轴负向移动了 5 个单位

由控制台窗口得结构如下

(a)坐标的问题可能是由于 blender 自身得原因，先不予讨论，但也可以看出但如果

导入之前的模型如果有相对位置关系，那么导入 web 中也会有相对位置关系。

(b) 我们发现 object 的第一个子对象是我们在建模软件中后创建的立方体，第二个对

象是我们先创建的立方体，检查 obj 文件，第一个对象是 Cube.007，第二个是

Cube.006，（私下我又创建了一个具有 3 个立方体的场景，发现 three.js 导入立方体的

顺序和我们创建的顺序确实是相反的，即先创建的物体后导入，后创建的物体先导入）。

(c)接下来我们将实现对立方体的逐层控制。首先希望实现对一个立方体的着色，此时

发现改变一个 mesh.material.color 的值，另一个立方体的颜色也发生了变化。

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” }

这是怎么回事？

经过查看四个 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:

剩余24页未读，继续阅读

评论收藏

内容反馈

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

评论0

最新资源

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

评论0

最新资源

相关推荐

three.js加载obj模型

three.js加载obj模型的实例代码

( 演示例子) NFT 数字藏品 3D 展示方案（obj、mtl、png）引用 three.js

转换stl文件为ply格式的C++程序

THREE各种格式文件加载大全*Loader.js

THREE各种格式文件加载合集*Loader.js

vue使用three.js引入外部obj，mtl模型.zip

Three.js加载obj+mtl文件，（机房演示效果图）

three.js和高德地图结合引入obj格式模型.zip

three.js加载obj模型添加点击事件及其他

pcd三维点云样本T25梅花批头起子头pcl生成

pcl的pcd数据

stl数据转换成pcd点云数据，网上找不到的稀少资源（自己编写）

3D建模（导入 OBJ PLY OFF等格式的模型）

three js 开发指南 - 导图（内容完整）

three.js加载obj+mtl文件源码

使用THREE.js加载obj文件

three.js+objLoader.js源码包，内含测试3D建模

three.js拖拽生成场景简单示例

Three.js 给obj模型添加材料纹理的样例

MeshLab的IO插件读写JSON格式

Three.js内部实例-贴花

PLYLoader.js

ply文件转换库

把threejs的STLLoader封装成React组件

threejs教学课程文档.zip

three.js 引用3dmax 导出的obj与mtl文件及相关模块操作

ply.zip_obj文件转ply_ply文件_ply文件读取_site:www.pudn.com_读取ply文件