web-dev-qa-db-ja.com

THREE.JSでカスタムメッシュを作成する方法は？

私はこれを聞いて、答えを得ました：

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);

私はこれが機能すると思っていましたが、機能しませんでした。

javascriptthree.js
47
MaiaVictor

頂点を追加しましたが、それらの頂点を面に配置し、ジオメトリに追加するのを忘れました：

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);
68
George Profenza

三角測量を自動化できます

大きなポリゴンの場合、面を手動で追加するのは非常に手間がかかります。 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を使用すると、ポリゴンに穴を定義できます。

注：ポリゴンが自己交差している場合、エラーがスローされることに注意してください。頂点配列が有効な（交差していない）ポリゴンを表していることを確認してください。

25
Wilt

Three.VertexはThree.jsの最新バージョンで非推奨になったため、その部分はもう必要ありません。

geom.vertices.Push(v1);
geom.vertices.Push(v2);
geom.vertices.Push(v3);
10
BishopZ