Three.jsで三角形を描画する

threejs-triangle.png

Geometryのverticesに直接値を入れる形で描画します

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script type='text/javascript' >
    var width=300;
    var height=300;
    var scene = new THREE.Scene(); 
    var camera = new THREE.OrthographicCamera ( -3.0, 3.0,3.0, -3.0, 0.1, 2000 );
    var renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
function main(){
 
   var GREEN=0x99D2D6;
    camera.position.z = 5;
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement); 
 
//ジオメトリ(形状)の宣言と生成
var geometry = new THREE.Geometry();
 
//頂点座標データを追加   
geometry.vertices[0] = new THREE.Vector3(3,0,0);
geometry.vertices[1] = new THREE.Vector3(0,3,0);
geometry.vertices[2] = new THREE.Vector3(-3,-3,0);
geometry.vertices[3] = new THREE.Vector3(3,0,0);
//面指定用頂点インデックスを追加   三角形を塗りつぶす場合は必須
//geometry.faces[0] = new THREE.Face3(0,1,2);
//マテリアル(材質)の宣言と生成
var material =  new THREE.LineBasicMaterial({ color: GREEN,linewidth:8});
var Triangle =  new THREE.Line(geometry,material);
//シーンオブジェクトに追加 
scene.add(Triangle);      
 render();
}
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
 
</script>
<body onload="main()">
</body>

threejs triangle

サポートサイト Wikidot.com threejstriangle