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

How to render OBJ model without three.js - WebGL

本文关键字：情况下 OBJ -WebGL 模型 js three      更新时间：2023-09-26

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

让我们考虑一下webgl-obj加载程序中的模型。

            #   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

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

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

webgl-obj加载程序的另一个分支上有一个示例项目：https://github.com/frenchtoast747/webgl-obj-loader/tree/gh-pages

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

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

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

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

相关文章：