Three.js を使用して単純な 2D シーンを作成する際に問題が発生しています。色付きの三角形で 2D ビューを作成したいと思います。三角形に色を付けることができません (例: 赤)。そのためには、次のものが必要になると思います。
- THREE.OrthographicCamera
- 単純な三角形 -> すなわち THREE.Geometry() は赤色で表示されます
影は必要ありません。正投影シーンに単純な赤い 2D 三角形だけが必要です。作成方法に関する提案は大歓迎です。
Three.js を使用して単純な 2D シーンを作成する際に問題が発生しています。色付きの三角形で 2D ビューを作成したいと思います。三角形に色を付けることができません (例: 赤)。そのためには、次のものが必要になると思います。
影は必要ありません。正投影シーンに単純な赤い 2D 三角形だけが必要です。作成方法に関する提案は大歓迎です。
ベース Geometry クラスを使用する場合は、独自の頂点をすべてシーンに追加する必要があります。次のように頂点クラスでこれを行うことができます
var geometry = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0); // Vector3 used to specify position
var v2 = new THREE.Vector3(1,0,0);
var v3 = new THREE.Vector3(0,1,0); // 2d = all vertices in the same plane.. z = 0
// add new geometry based on the specified positions
geometry.vertices.push(v1);
geometry.vertices.push(v2);
geometry.vertices.push(v3);
次に、頂点から面を構築する必要があります。頂点のインデックスを、上にプッシュされた順序で渡します。
[編集]: mrdoob が以下で指摘しているように、反時計回りに追加する必要もあります。
これは私のフィドルの問題でした。ここで固定デモを表示できます。
geometry.faces.push(new THREE.Face3(0, 2, 1));
最後にマテリアルを作成し、それをジオメトリと組み合わせてメッシュを作成します。2D の場合でも、これを表示するにはメッシュを作成する必要があると思います。
var redMat = new THREE.MeshBasicMaterial({color: 0xff0000});
var triangle = new THREE.Mesh(geometry, redMat);
scene.add(triangle) // added at the origin