我上了计算机图形学课程。所以我想学习,如何渲染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