如何在没有three.js的情况下渲染OBJ模型 - WebGL

Question

我上了计算机图形学课程。所以我想学习，如何渲染 OBJ 模型。当然，我不能使用这样的three.js库。

让我们考虑来自webgl-obj-loader 的模型。

            #   OBJ File Generated by Blender
            #
            ####
            o my_cube.obj
            v 1 1 1
            v -1 1 1
            v -1 -1 1
            v 1 -1 1
            v 1 1 -1
            v -1 1 -1
            v -1 -1 -1
            v 1 -1 -1
            vn 0 0 1
            vn 1 0 0
            vn -1 0 0
            vn 0 0 -1
            vn 0 1 0
            vn 0 -1 0
            f 1//1 2//1 3//1
            f 3//1 4//1 1//1
            f 5//2 1//2 4//2
            f 4//2 8//2 5//2
            f 2//3 6//3 7//3
            f 7//3 3//3 2//3
            f 7//4 8//4 5//4
            f 5//4 6//4 7//4
            f 5//5 6//5 2//5
            f 2//5 1//5 5//5
            f 8//6 4//6 3//6
            f 3//6 7//6 8//6

解析这个模型显然很简单。但我不知道，如何呈现这个。

这个库的作者给出了一些例子，但是当我运行它时，这段代码什么也不做。

Answer 1

在 webgl-obj-loader 的不同分支上有一个示例项目：https : //github.com/frenchtoast747/webgl-obj-loader/tree/gh-pages

当然，代码是为特定项目量身定制的，但它应该让您对如何在项目中使用它有一个很好的了解。

在那个项目中，helpers.js 中有一个名为drawObject(). 这基本上就是这个例子所做的。比较两者中的代码以尝试了解发生了什么。（提示：模型只是一个 JS 对象，它包含一个指向OBJ.mesh实例的指针，并且OBJ.mesh已经通过调用 初始化initMeshBuffers()）。

在不知道您尝试过什么的情况下，由于即使是最基本的 WebGL 脚本也需要大量样板代码（有很多地方可以解决问题），我真的无能为力。

此外，请查看使用加载器所需的绝对基本设置的开发分支：https : //github.com/frenchtoast747/webgl-obj-loader/tree/development/development