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

解析这个模型显然很简单。但我不知道如何渲染这个。

这个lib的作者提供了一些example，但是当我运行它时，这段代码什么都不做。

Answer 1

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

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

在该项目中，helpers.js中有一个名为drawObject()的辅助函数。这基本上就是这个例子的作用。比较两者中的代码，试着了解正在发生的事情。（提示：model只是一个JS对象，其中包含指向OBJ.mesh实例的指针，而OBJ.mesh已经通过调用initMeshBuffers()初始化了。

在不知道你尝试过什么的情况下，因为即使是最基本的WebGL脚本也需要大量的样板代码（有许多地方可以打破），我真的无法提供帮助。

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

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

1 个答案: