9

作成しようとしている視覚化のためにThree.jsを使用して、ポイントをスプラインにリンクしようとしています。

私が知る限り、配列にポイントを追加し、それをTHREE.SplineCurve3に渡し、スプラインポイントをステップスルーして、geom座標を取得してレンダリングします。開始点/終了点を配列に追加するだけで機能しますが、中点を追加しようとするとエラーが発生します。

例はここにあります：

http://jsfiddle.net/sLQK9/4/

簡単なことだと思いますが、見つけることができません。誰か助けてもらえますか？

最終的に、ポイントは球の表面上にあり、2つのポイント間のスプラインは、航空機がたどるルートをたどります。IEのような大円ですが、スプラインの中点で球の中心からさらに離れています。

よろしくお願いします。

4

3 に答える 3

9

スプラインで曲線を補間するポイントの数を指定する必要があると思いますが、ポイントを指定していますがcontrol、曲線はどれだけ滑らかにしたいのかわかりません。

次のようなことを試してください：

// smooth my curve over this many points
var numPoints = 100;

spline = new THREE.SplineCurve3([
   new THREE.Vector3(0, 0, 0),
   new THREE.Vector3(0, 200, 0),
   new THREE.Vector3(150, 150, 0),
   new THREE.Vector3(150, 50, 0),
   new THREE.Vector3(250, 100, 0),
   new THREE.Vector3(250, 300, 0)
]);

var material = new THREE.LineBasicMaterial({
    color: 0xff00f0,
});

var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(numPoints);

for(var i = 0; i < splinePoints.length; i++){
    geometry.vertices.push(splinePoints[i]);  
}

var line = new THREE.Line(geometry, material);
scene.add(line);

次に、@juan Mellado の回答で指摘されているように、spline.getPoint(t)t は0-1スプラインの始点と終点の間の値です。

余談ですが、私のために回答された最近の質問を参照してください。これには、上記の例が含まれています。

于 2012-06-25T08:29:41.687 に答える
3

The parameter of getPoint must be in range [0..1]:

// Virtual base class method to overwrite and implement in subclasses
//  - t [0 .. 1]

THREE.Curve.prototype.getPoint = function ( t ) {
...
于 2012-06-24T09:16:29.263 に答える