私はこれを聞いて、答えを得ました:
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);
geom.vertices.Push(new THREE.Vertex(v1));
geom.vertices.Push(new THREE.Vertex(v2));
geom.vertices.Push(new THREE.Vertex(v3));
var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.addObject(object);
私はこれが機能すると思っていましたが、機能しませんでした。
頂点を追加しましたが、それらの頂点を面に配置し、ジオメトリに追加するのを忘れました:
geom.faces.Push( new THREE.Face3( 0, 1, 2 ) );
あなたのスニペットは次のようになります:
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);
geom.vertices.Push(v1);
geom.vertices.Push(v2);
geom.vertices.Push(v3);
geom.faces.Push( new THREE.Face3( 0, 1, 2 ) );
var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.addObject(object);
Face3インスタンスは、リスト/配列内の頂点のインデックスを使用して、3つの頂点(以前にジオメトリに追加したx、y、z座標)を参照するという考え方です。現在、頂点は3つしかなく、それらを接続したいので、顔は頂点配列のインデックス0、1、2を参照します。
メッシュの法線マテリアルを使用しているため、ジオメトリの法線を計算することができます。また、オブジェクトが見えるようにする必要があります(大きくない、またはカメラの近くにクリップアウトされる、正しい方向を向く-カメラの方向など)。YZプレーンで描画しているので、あなたの三角形、このような何かが動作するはずです:
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);
geom.vertices.Push(v1);
geom.vertices.Push(v2);
geom.vertices.Push(v3);
geom.faces.Push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();
var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
object.position.z = -100;//move a bit back - size of 500 is a bit big
object.rotation.y = -Math.PI * .5;//triangle is pointing in depth, rotate it -90 degrees on Y
scene.add(object);
大きなポリゴンの場合、面を手動で追加するのは非常に手間がかかります。 THREE.ShapeUtils
のtriangulateShape
メソッド を使用して、メッシュに面を追加するプロセスを自動化できます。
var vertices = [your vertices array];
var holes = [];
var triangles, mesh;
var geometry = new THREE.Geometry();
var material = new THREE.MeshBasicMaterial();
geometry.vertices = vertices;
triangles = THREE.ShapeUtils.triangulateShape( vertices, holes );
for( var i = 0; i < triangles.length; i++ ){
geometry.faces.Push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
}
mesh = new THREE.Mesh( geometry, material );
vertices
は頂点の配列であり、holes
を使用すると、ポリゴンに穴を定義できます。
注:ポリゴンが自己交差している場合、エラーがスローされることに注意してください。頂点配列が有効な(交差していない)ポリゴンを表していることを確認してください。
Three.VertexはThree.jsの最新バージョンで非推奨になったため、その部分はもう必要ありません。
geom.vertices.Push(v1);
geom.vertices.Push(v2);
geom.vertices.Push(v3);