在Three.js中的2個點之間創建樣條曲線

我正在嘗試使用Three.js將樣點與樣條鏈接進行連接。在Three.js中的2個點之間創建樣條曲線

據我所知，我給一個數組添加了點，將它傳遞給THREE.SplineCurve3，逐步通過樣條點來獲取geom coords和渲染。如果我只將開始/結束點添加到數組中，但如果我嘗試添加中間點，則會出現錯誤。

例子是在這裏：

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

我敢肯定，這是簡單的東西，但我不能發現它 - 誰能幫助我？

最終，這些點將在球體的表面上，而2點之間的樣條將採用飛機將要採用的路線 - I.E.這是一個很大的圓，但離樣條中點的球體中心更遠。

非常感謝提前。

來源

2012-06-23 speedwell

的getPoint參數必須是範圍[0..1]：

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

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

來源

2012-06-24 09:16:29

我認爲你需要指定你要多少點樣條插值與曲線，雖然您指定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之間的價值，開始和結束點花鍵。

順便說一下，請參閱最近爲我解答的Question，其中包括上述示例。

來源

2012-06-25 08:29:41 Neil

另外，考慮您的項目，您可以使用球體中的頂點作爲樣條的控制點！ – Neil

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

注二次或三次方法 Quadratic vs Cubic Beizer

來源

2013-06-03 16:38:37 ijavid

我有完全相同的用例，但我想知道如何計算註釋代碼。對於立方曲線。你如何繼續計算start3_control和end3_control？ –

我也有計算正確座標的問題。隨意做一些實驗並找到你正確的配置，最後我選擇了二次方法...看到它工作http://vis.jaik.sk/（無人維護的學校項目）也檢查http：//www.movable- type.co.uk/scripts/latlong.html – ijavid

感謝這正是我所需要的;） – BasicSide

在Three.js中的2個點之間創建樣條曲線

回答

相關問題