「这是我参与2022首次更文挑战的第38天，活动详情查看：2022首次更文挑战」
示例代码采用three.js-r73版本: cdnjs.cloudflare.com/ajax/libs/t…
上一节，我们对OBJ文件格式进行了详细的讲解，这一节让我们来实战下手动创建一些OBJ文件，深入了解OBJ文件格式，一起来看看吧。
实战创建一个四边形OBJ文件
- 创建一个obj文件，写入一个四边形的代码
# 自定义形状
v -0.58 0.84 0
v 2.68 1.17 0
v 2.84 -2.03 0
v -1.92 -2.89 0
f 1 2 3 4
复制代码- obj文件创建好以后，我们通过在线threejs editor导入我们的文件来查看
- 此时我们是看不到我们导入的模型的，需要通过旋转才能看到。这是为什么呢？
- 这是由于我们创建的面时点的顺序是1234,是顺时针的，所以我们创建出来的面能看到的其实是背面。
- 想要看到正面，就要逆时针创建,修改我们的代码，添加
f 4 3 2 1，正反两面就都可以看到了
# 自定义形状
v -0.58 0.84 0
v 2.68 1.17 0
v 2.84 -2.03 0
v -1.92 -2.89 0
f 1 2 3 4
f 4 3 2 1
复制代码OBJ文件创建面时点顺序的问题
- 思考一个问题，上面我们创建的面，如果改变点的顺序为下面的代码，会创建出什么形状物体呢？
f 1 2 4 3
复制代码- 上面的顺序会构成这样的结果
- 我们的3D程序是没办法识别交叉三角形的，我们的3D程序只能识别顺序或逆序的三角行，多边形。
- 我们把代码创建一个obj文件导入编辑器中查看，会看到不一样的效果(不是四边形)
# 自定义形状
v -0.58 0.84 0
v 2.68 1.17 0
v 2.84 -2.03 0
v -1.92 -2.89 0
f 1 2 4 3
复制代码
- 编辑器左下角会显示创建了两个三角形，但是我们只能看到其中一个，旋转之后看到另一个。
- 其实是有
1 2 4正序、2 4 3逆序，构成的两个三角形
- 也就是编辑器把
f 1 2 4 3解析成了两个面f 1 2 4``f 2 4 3
OBJ文件创建其他形状
- 通过obj文件，我们不仅可以构造四边形，还可以构造立方体、曲面等等形状
- 我们通过blender创建一个立方体，导出obj格式,导入编辑器中
# Blender v3.0.1 OBJ File: ''
# www.blender.org
mtllib shap.mtl
o Cube
v 1.000000 1.000000 -1.000000
v 1.000000 -1.000000 -1.000000
v 1.000000 1.000000 1.000000
v 1.000000 -1.000000 1.000000
v -1.000000 1.000000 -1.000000
v -1.000000 -1.000000 -1.000000
v -1.000000 1.000000 1.000000
v -1.000000 -1.000000 1.000000
vt 0.625000 0.500000
vt 0.875000 0.500000
vt 0.875000 0.750000
vt 0.625000 0.750000
vt 0.375000 0.750000
vt 0.625000 1.000000
vt 0.375000 1.000000
vt 0.375000 0.000000
vt 0.625000 0.000000
vt 0.625000 0.250000
vt 0.375000 0.250000
vt 0.125000 0.500000
vt 0.375000 0.500000
vt 0.125000 0.750000
vn 0.0000 1.0000 0.0000
vn 0.0000 0.0000 1.0000
vn -1.0000 0.0000 0.0000
vn 0.0000 -1.0000 0.0000
vn 1.0000 0.0000 0.0000
vn 0.0000 0.0000 -1.0000
usemtl Material
s off
f 1/1/1 5/2/1 7/3/1 3/4/1
f 4/5/2 3/4/2 7/6/2 8/7/2
f 8/8/3 7/9/3 5/10/3 6/11/3
f 6/12/4 2/13/4 4/5/4 8/14/4
f 2/13/5 1/1/5 3/4/5 4/5/5
f 6/11/6 5/10/6 1/1/6 2/13/6
复制代码- 我们可以看出来，一个简单的立方体，是由以下部分组成的
- mtllib：材质
- o： 名称
- v：顶点坐标
- vt：贴图坐标点
- vn：顶点法线
- usemtl：材质名称
- f：面
- 我们编辑器中显示的立方体是黑色的原因：我们没有加载对应的
mtl材质文件
总结
这一节我们主要讲了以下内容：
- 实战创建一个四边形OBJ文件
- OBJ文件创建面时点顺序的问题
- OBJ文件创建其他形状