“This is my 38th day of participating in the First Challenge 2022. For details: First Challenge 2022”

The sample code USES three. Js – r73 version: cdnjs.cloudflare.com/ajax/libs/t…

In the last section, we explained the OBJ file format in detail. In this section, let’s create some OBJ files manually under the actual situation.

Create a quadrilateral OBJ file

  • Create an obj file and write a quadrilateral code
# Custom shape 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
Copy the code
  • Once the obj file is created, we import our file via the online Threejs Editor to view it

  • At this point we can’t see our imported model, we have to rotate it to see it. Why is that?
    • This is because we created the faces in a clockwise order of 1234, so the faces we created are actually visible to the back.

  • To see the heads, we go counterclockwise, modify our code, addf 4 3 2 1You can see both sides
# Custom shape 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
Copy the code

OBJ file creation point order problem

  • Consider the question, the surface we created above, what shape would be created if we changed the order of the points to the code below?
f 1 2 4 3
Copy the code
  • The order above would constitute the result

  • Our 3D program cannot recognize intersecting triangles. Our 3D program can only recognize sequential or reverse triangular rows, polygons.
  • Let’s go ahead and create an obj file and import it into the editor, and we’ll see something different (not a quadrilateral)
# Custom shape 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
Copy the code

​

  • The bottom left corner of the editor shows that two triangles have been created, but we can only see one of them and the other when rotated.

  • There are1, 2, 4Positive sequence,2 3 4In reverse order, two triangles formed

  • That’s the editorf 1 2 4 3It resolves into two sidesf 1 2 4``f 2 4 3

OBJ file creates other shapes

  • From obJ files, we can construct not only quadrilateral shapes, but also cubes, surfaces, and so on
  • We created a cube in Blender, exported it to OBJ format, and imported it into the editor
# Blender v3. 01. 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

Copy the code
  • We can see that a simple cube is made up of the following parts
    • Mtllib: material
    • O: name
    • V: vertex coordinates
    • Vt: Map coordinate points
    • Vn: vertex normals
    • Usemtl: material name
    • F: surface

  • The reason the cube shown in our editor is black: we didn’t load the correspondingmtlThe material file

conclusion

In this section, we mainly talk about the following contents:

  • Create a quadrilateral OBJ file
  • OBJ file creation point order problem
  • OBJ file creates other shapes