使用three.js加载obj

Question

我是three.js的新手，一般是3d图形。 我必须加载一个文件obj，它是“高度定义的”，实际上我已经找到了在屏幕上加载它的方法，但它没有很好地定义为我想要的。

该文件是一个OBJ文件，一个带有一些珍珠的戒指，但在戒指中我看到一些线条并且该物体不是定义的。实际上我使用这个脚本来加载对象：

new FileInfo()

在第一张图片中是带有我正在谈论的线条的环，在第二张图片中是如何呈现环的。

（一如既往，抱歉我的英语不好）

Answer 1

查看您在链接的网站Ring OBJ上加载的OBJ文件，我认为您没有定义vertex normals。

看看Wikipedia article on the Wavefront .obj file format。您将看到定义顶点法线的方式是面部级别，其中包含正常使用法线的索引。

例如，这里是三角形的OBJ定义：

v 0.00 0.00 0.00
v 0.00 1.00 0.00
v 1.00 0.00 0.00

vt 0.00 0.00
vt 0.00 1.00
vt 1.00 0.00

vn 0.00 0.00 1.00

f 0/0/0 1/1/0 2/2/0

• v 0.00 0.00 0.00定义顶点位置
• vt 0.00 0.00定义纹理UV位置
• vn 0.00 0.00 1.00定义了正常的
• f 0/0/0 1/1/0 2/2/0定义使用每个组件f vertexIndex/uvIndex/normalIndex ...
的索引的面

在你的文件中，如果你一直看到底部，你会看到你的面部被定义为没有法线。它们包括顶点索引和UV索引，但没有正常：

v 3.462315 8.68541 -0.125
v 3.462315 8.68541 -0.497999
v 3.49977 8.670371 -0.766575
...

vt 0.166677 0 0
vt 0.166677 0.029819 0
vt 0.166677 0.052183 0
vt 0.166677 0.067092 0
...

f 1/1 8/8 25/25 
f 8/8 9/9 25/25 
f 9/9 10/10 24/24 
f 10/10 2/2 51/51 
f 2/2 11/11 49/49 
...

因为您没有提供顶点法线，Three.js可能会为您计算默认法线。最简单的方法是每面，没有平滑。

计算结果为：cross((v1 - v0), (v2 - v0))，这个单法线可能用于脸部的所有顶点，这就是为什么你会得到你在图像中看到的非常锋利的硬边缘。

这可能是您从建模软件导出网格物体的方式的问题。再次完成配置并确保勾选所有要包括法线的复选框。