objをthree.jsでロードする

Question

私はthree.jsと新しい3Dグラフィックスを一般的に使います。 ファイル「obj」をロードする必要があります。これは実際には画面上にロードする方法を見つけましたが、必要に応じて定義されていません。

ファイルはOBJファイルです。いくつかの真珠が入ったリングですが、リング内にいくつかの線が表示され、オブジェクトが定義されていません。実際に私は、オブジェクトをロードするためにこのスクリプトを使用：最初の画像で

  app.loadObj({ 
      path: 'obj/', 
      fileObj: 'prova.obj', 
      pivot: pivotA, 
      overdraw: true, 
      instanceNo: 0 
     }); 

は私がリングをレンダリングする方法を第二の画像には、話しているラインとリングです。

（いつものように、私の悪い英語のため申し訳ありません）を使用すると、リンク先サイトにロードされているOBJファイルを見てみると

Answer 1

：Ring 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))となり、この単一の法線は顔のすべての頂点に使用されている可能性があります。これはおそらく、イメージに見られる非常に鮮明で硬いエッジを得るためです。

これはおそらく、モデリングソフトウェアからメッシュをエクスポートする際の問題です。設定をもう一度行って、法線が含まれることを示すチェックボックスにチェックを入れてください。