Lesson 4: 3D objects

This very short lesson shows you how to create and display 3D objects. To put it shortly, there is very little to it: if your model contains vertices that specify a three-dimensional model (that is, if the vertex field , then the default drawing mode in Lux will make sure that the occluded pieces of the 3D model are not displayed.

Model information is per vertex

At this point, we emphasize a point presented in the first lessons: when you create a Lux model, all information is stored per-vertex. This means that if you want different corners of a cube to have different colors, then you will need to repeat that vertex's position with different information. In other words, although the cube above looks like it has only 8 vertices, the model will have 24 vertices, 4 for each face:

var cube_model = Lux.model({
    type: "triangles",
    elements: [0,  1,  2,  0,  2,  3,
               4,  5,  6,  4,  6,  7,
               8,  9,  10, 8,  10, 11,
               12, 13, 14, 12, 14, 15,
               16, 17, 18, 16, 18, 19,
               20, 21, 22, 20, 22, 23],
    vertex: [[ 1, 1,-1, -1, 1,-1, -1, 1, 1,  1, 1, 1,
               1,-1, 1, -1,-1, 1, -1,-1,-1,  1,-1,-1,
               1, 1, 1, -1, 1, 1, -1,-1, 1,  1,-1, 1,
               1,-1,-1, -1,-1,-1, -1, 1,-1,  1, 1,-1,
              -1, 1, 1, -1, 1,-1, -1,-1,-1, -1,-1, 1,
               1, 1,-1,  1, 1, 1,  1,-1, 1,  1,-1,-1], 3],
    color: [g, g, g, g, o, o, o, o, r, r, r, r,
            y, y, y, y, b, b, b, b, v, v, v, v]
});

Notice the repeated vertex positions. For example, (1,1,1) appears as vertex 3, 8 and 21. If, on the other hand, all corners of your model look the same, then you can share the vertex among all the faces, like the pyramid:

var pyramid_model = Lux.model({
    type: "triangles",
    elements: [0, 1, 2,
               0, 2, 3,
               0, 3, 4,
               0, 4, 1],
    vertex: [[ 0,  1,  0, 
              -1, -1,  1, 
              -1, -1, -1,
               1, -1, -1,
               1, -1,  1], 3],
    color: [r, g, b, g, b]
});

The rest of the code is almost identical to that in previous lessons.

---

Back to the index.