Creando una curva spline entre 2 puntos en Three.js

Question

Estoy tratando de unir puntos con una spline usando Three.js para una visualización que estoy tratando de hacer.

Por lo que puedo decir, agrego puntos a una matriz, paso eso a THREE.SplineCurve3, paso por los puntos spline para obtener las coordenadas geom y renderizar. Funciona si solo agrego los puntos de inicio/final a la matriz, pero si trato de agregar un punto medio, aparece un error.

Ejemplo está aquí:

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

Estoy seguro de que es algo sencillo, pero no puedo detectarlo - ¿Puede alguien ayudarme?

En última instancia, los puntos estarán en la superficie de una esfera y las estrías entre 2 puntos tomarán la ruta que tomaría una aeronave: I.E. tipo de gran círculo pero más alejado del centro de la esfera en el punto medio de la spline.

Muchas gracias de antemano.

Answer 1

El parámetro de getPoint debe estar en el rango [0..1]:

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

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

Answer 2

Creo que es necesario especificar el número de puntos que desea que el spline para interpolar la curva con, a pesar de que está especificando control puntos, la curva no sabe lo suave que la quiere.

Pruebe algo como esto:

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

Entonces, como se ha señalado en respuesta Mellado @juan, se puede obtener una posición en la línea usando spline.getPoint(t) donde t es el valor entre 0-1, puntos inicial y final de la ranura.

Como un aparte, vea un reciente Question que fue respondido por mí, que incluye el ejemplo anterior.

Answer 3

Mi solución para hacer curvas entre dos puntos en la escena 3D, sobre todo en el 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; 
    } 

luego llamarlo:

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 método cuadrática o cúbica de creación de curvas