Creazione di una curva spline tra 2 punti in Three.js

Question

Sto provando a collegare punti con una spline utilizzando Three.js per una visualizzazione che sto cercando di realizzare.

Per quanto ne so, aggiungo punti a un array, lo passo a THREE.SplineCurve3, passo attraverso i punti spline per ottenere i geom coords e render. Funziona se aggiungo solo i punti di inizio/fine alla matrice, ma se provo ad aggiungere un punto intermedio, ottengo un errore.

Esempio è qui:

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

Sono sicuro che è una cosa semplice, ma non riesco a individuarlo - qualcuno mi può aiutare?

Alla fine, i punti saranno sulla superficie di una sfera e le scanalature tra 2 punti prenderanno la rotta che un aereo prenderebbe. - I.E. una specie di grande cerchio ma più lontano dal centro della sfera nel punto medio della spline.

Molte grazie in anticipo.

Answer 1

Il parametro di getPoint deve essere nel range [0..1]:

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

THREE.Curve.prototype.getPoint = function (t) { 
... 

Answer 2

Credo che è necessario specificare quanti punti si desidera che la spline per interpolare la curva con, anche se si specifica control punti, la curva non sa quanto liscio lo vuoi.

provare qualcosa di simile:

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

Poi, come sottolineato in risposta @juan Mellado, è possibile ottenere una posizione sulla linea utilizzando spline.getPoint(t) dove t è il valore tra 0-1, punti iniziale e finale della spline.

Come parte, vedere un recente Question per il quale è stata fornita una risposta, che include l'esempio sopra.

Answer 3

La mia soluzione per fare le curve tra due punti in scena 3D, in particolare sul globo:

var createCurvePath = function(start, end, elevation) { 
     var start3 = globe.translateCordsToPoint(start.latitude,start.longitude); 
     var end3 = globe.translateCordsToPoint(end.latitude, end.longitude); 
     var mid = (new LatLon(start.latitude,start.longitude)).midpointTo(new LatLon(end.latitude, end.longitude)); 
     var middle3 = globe.translateCordsToPoint(mid.lat(), mid.lon(), elevation); 

     var curveQuad = new THREE.QuadraticBezierCurve3(start3, middle3, end3); 
    // var curveCubic = new THREE.CubicBezierCurve3(start3, start3_control, end3_control, end3); 

     var cp = new THREE.CurvePath(); 
     cp.add(curveQuad); 
    // cp.add(curveCubic); 
     return cp; 
    } 

poi chiamarlo:

var cp = globe.createCurvePath(item1, item2, 200); 
var curvedLineMaterial = new THREE.LineBasicMaterial({color: 0xFFFFAA, linewidth: 3}); 
var curvedLine = new THREE.Line(cp.createPointsGeometry(20), curvedLineMaterial); 
globe.scene.add(curvedLine); 

nota metodo quadratica o cubica della creazione curva