5

THREE.objLoaderを使用してロードしているこのオブジェクトがあり、次のようにメッシュを作成します。

mesh = new THREE.SceneUtils.createMultiMaterialObject(
  geometry,
  [
    new THREE.MeshBasicMaterial({color: 0xFEC1EA}),
    new THREE.MeshBasicMaterial({
      color: 0x999999,
      wireframe: true,
      transparent: true,
      opacity: 0.85
    })
  ]
);

次に、私のシーンで、DirectionalLightを追加します。これは機能し、オブジェクトを見ることができますが、DirectionalLightはアンビエントライトのようです。顔が暗くなったり明るくなったりすることはありません。

オブジェクトは色で塗りつぶされていますが、照明は適用されていません。誰かがそれで私を助けることができればそれは大いにありがたいです:)

何が欠けている可能性がありますか？

ここのJsfiddle：http: //jsfiddle.net/5hcDs/

4

2 に答える 2

9

皆さん、MaëlNisonとmr doobのおかげで、私が欠けていたいくつかのことを理解することができました。私は完全な3d noobです...3dに入り始めた人々は、少し要約すると役立つと思います。

基本的な3Dの概念

  • 3D面は、いくつかの点（頂点）と、面の方向（どちら側が前面でどちら側が背面か）を示す法線と呼ばれるベクトルで構成されます。

  • 法線がない場合は、デフォルトで前面にのみ照明が適用されるため、非常に悪い場合があります。したがって、LambertMaterialまたはPhongMaterialを適用しようとすると黒いモデルになります。

  • OBJファイルは、3D情報を記述する方法です。これについてもっと知りたいですか？このウィキペディアの記事（en）を読んでください。また、フランス語のページには、テストに役立つキューブの例が記載されています。

Three.jsのヒントとコツ

  • 法線が存在しない場合、ライティングを適用できないため、黒のモデルがレンダリングされます。Three.jsは、不足しているものに応じて、geometry.computeVertexNormals（）および/またはgeometry.computeFaceNormals（）を使用して頂点と面の法線を実際に計算できます。

  • これを行うと、Three.jsの法線計算が間違って、法線が反転する可能性があります。これを修正するには、次のようにジオメトリの面配列をループするだけです。

/* Compute normals */
geometry.computeFaceNormals();
geometry.computeVertexNormals();

/* Next 3 lines seems not to be mandatory */
mesh.geometry.dynamic = true
mesh.geometry.__dirtyVertices = true;
mesh.geometry.__dirtyNormals = true;

mesh.flipSided = true;
mesh.doubleSided = true;

/* Flip normals*/               
for(var i = 0; i<mesh.geometry.faces.length; i++) {
  mesh.geometry.faces[i].normal.x = -1*mesh.geometry.faces[i].normal.x;
  mesh.geometry.faces[i].normal.y = -1*mesh.geometry.faces[i].normal.y;
  mesh.geometry.faces[i].normal.z = -1*mesh.geometry.faces[i].normal.z;
}
于 2012-06-22T08:54:44.727 に答える
2

MeshPhongMaterialを使用する必要があります。MeshBasicMaterialは、フラグメントの色を計算するときに光を考慮しません。

ただし、MeshPhongMaterialを使用すると、メッシュが黒になります。私はOBJローダーを使用したことがありませんが、モデルの法線が正しいと確信していますか？

ところで：おそらく代わりにPointLightを使用したいと思うでしょう。そして、その位置はおそらくカメラの位置に設定するlight.position = camera.position必要があります（カメラの位置がコントロールによって編集されるときにライトを移動できるようになるため、トリックを実行する必要があります）。

于 2012-06-14T13:05:19.597 に答える