Создание кривой сплайна между двумя точками в Three.js

Question

Я пытаюсь связать точки с сплайном, используя Three.js для визуализации, которую я пытаюсь сделать.

Насколько я могу судить, я добавляю точки к массиву, передаю это THREE.SplineCurve3, перешагнув точки сплайна, чтобы получить координаты геометрии и рендеринг. Он работает, если я добавляю только начальные/конечные точки в массив, но если я попытаюсь добавить среднюю точку, я получаю сообщение об ошибке.

Пример здесь:

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

Я уверен, что это что-то простое, но я не могу определить это - кто-нибудь может мне помочь?

В конечном счете, точки будут находиться на поверхности сферы, а сплайны между 2 точками пройдут по маршруту, который займет самолет - I.E. вид большого круга, но дальше от центра сферы в середине сплайна.

Большое спасибо заранее.

Answer 1

Параметр getPoint должен быть в диапазоне [0..1]:

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

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

Answer 2

Я думаю, вам нужно указать, сколько очков вы хотите сплайн интерполяцию кривой с, хотя вы указываете 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) где т является значение между 0-1, начальную и конечную точки сплайн.

Как в стороне, см. Недавний Question, на который был дан ответ, который включает в себя пример выше.

Answer 3

Мое решение для создания кривых между двумя точками в 3D сцене, особенно на земном шаре:

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; 
    } 

затем вызвать его:

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

примечание Квадратичного или кубический метод создания кривой