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

【问题标题】：How to render OBJ model without three.js - WebGL如何在没有 three.js 的情况下渲染 OBJ 模型 - WebGL
【发布时间】：2016-01-30 05:08:30
【问题描述】：

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

让我们考虑来自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，但是当我运行这段代码时，它什么也没做。

【问题讨论】：

标签： javascript graphics rendering webgl

【解决方案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

【讨论】：