如何在没有 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

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

这个库的作者给了一些example，但是这段代码什么也没做，当我运行它。

Answer 1

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

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

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

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

此外，检查开发分支以了解使用加载程序所需的绝对基本设置： https://github.com/frenchtoast747/webgl-obj-loader/tree/development/development

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

How to render OBJ model without three.js - WebGL

javascript

graphics

rendering

webgl