Three.js - カスタムシェイプ？

Question

私はthree.jsに新しいです...これまでのところ私は 形状とシーン&カメラビューを再生することができますポイントに来た。

私のプロジェクトでは、私が作成した形状が球体であると私は材料のためのテクスチャ として画像を使用し....

私の質問は、カスタム図形作成する方法である（ない球、矩形を...）？ たとえば、どのようにして半球を作成できますか？

今の私のコード：

  // create texture 
    texture = THREE.ImageUtils.loadTexture('red.png');  

    // create a sphere shape   
    geometry = new THREE.SphereGeometry(50, 16, 16); 

    // give a shape red color 
    material = new THREE.MeshLambertMaterial({map: texture}); 

    // create an object 
    mesh = new THREE.Mesh(geometry, material); 

Answer 1

（素敵three.js exporterが既に存在するためにブレンダーのような、）3Dエディタを経由してモデルをエクスポートするから、three.jsでジオメトリを使用するための複数の方法がありますが、作成しますジオメトリからゼロまで。

THREE.Geometryのインスタンスを作成し、頂点を追加することによって、顔のインデックスを追加する方法を理解することができますが、これは簡単な方法ではありません。 私はなどTHREE.CubeGeometry、THREE.CylinderGeometry、THREE.IcosahedronGeometry、THREE.OctahedronGeometry、のような（エクストラ/ジオメトリパッケージで見つかった）既存のジオメトリから始まるお勧めします）

さらにそのいくつかの本当に素敵なクラスがあります押し出し（THREE.ExtrudeGeometry）と旋盤（THREE.LatheGeometry）を生成できます。 extrusionsの場合はexampleを参照してください。

あなたは半球の作成について述べました。それはLatheGeometryを使用するための理想的な候補です。 ハーフサークルパス（Vector3インスタンスの配列）を作成して旋盤に渡すだけで、ハーフサークルを3Dに変換することができます。あなたのメッシュに

var pts = [];//points array - the path profile points will be stored here 
var detail = .1;//half-circle detail - how many angle increments will be used to generate points 
var radius = 200;//radius for half_sphere 
for(var angle = 0.0; angle < Math.PI ; angle+= detail)//loop from 0.0 radians to PI (0 - 180 degrees) 
    pts.push(new THREE.Vector3(Math.cos(angle) * radius,0,Math.sin(angle) * radius));//angle/radius to x,z 
geometry = new THREE.LatheGeometry(pts, 12);//create the lathe with 12 radial repetitions of the profile 

プラグその形状をし、ボブのあなたの叔父： ここでの例です！

オプションで、GeometryUtilsを使用してメッシュ/ピボットをセンタリングすることができます

THREE.GeometryUtils.center(geometry); 

は、お楽しみに！